I have mostly got this work, however I have 2 issues:
The Home menu link always remains active
When I select a sub-menu item, the sub-menu item shows as active, however I also require the parent to remain active.
See the live site here - http://www.lync.geek.nz/
JavaScript:
<script type='text/javascript'>
//<![CDATA[
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
//]]>
</script>
HTML Menu:
<!-- start navmenu -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/p/tools.html'>Tools</a>
<ul>
<li><a href='/p/admin-tools.html'>Admin Tools</a></li>
<li><a href='/p/call-accounting.html'>Call Accounting/Reporting</a></li>
<li><a href='/p/lync-phone-edition-log-viewer.html'>Phone Edition Log Viewer</a></li>
<li><a href='/p/sonus-sbc-5kswe-log-viewer.html'>Sonus SBC 5k/SWe Log Viewer</a></li>
<li><a href='/p/customer-support-tool.html'>Customer Support Tool</a></li>
<li><a href='/p/powershell-scripts.html'>PowerShell Scripts</a></li>
<li><a href='/p/powershell-one-liners.html'>PowerShell One-Liners</a></li>
</ul>
</li>
<li><a href='/p/lync-updates.html'>Lync Updates</a>
<ul>
<li><a href='/p/lync-updates.html#Lync2013Server'>Lync 2013 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2010Server'>Lync 2010 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2013WinClient'>Lync 2013 Client</a></li>
<li><a href='/p/lync-updates.html#Lync2010WinClient'>Lync 2010 Client</a></li>
<li><a href='/p/lync-updates.html#LyncMacClient'>Lync for Mac</a></li>
<li><a href='/p/lync-updates.html#LyncStoreApp'>Lync Store App</a></li>
<li><a href='/p/lync-updates.html#LyncRoomSystem'>Lync Room System</a></li>
<li><a href='/p/lync-updates.html#LyncPhoneEdition'>Lync Phone Edition</a></li>
</ul>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='/p/end-user-training.html'>End User</a></li>
<li><a href='/p/troubleshooting.html'>Troubleshooting</a></li>
<li><a href='/p/sip.html'>SIP</a></li>
</ul>
</li>
<li><a href='/p/deployment.html'>Deployment</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
<!-- end navmenu -->
CSS:
/*DROPDOWN MENU MOD*/
/* ----- CSS Nav Menu Styling ----- */
#nav {
margin: 0px 0 0 0px;
padding: 0px 0px 0px 0px;
width: 1148px; /* Set your width to fit your blog */
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
/*color: $(tabs.text.color); Template Designer - Change Font Size */
}
ul#nav li a.active {
position: relative;
z-index: 1;
background: #dd7700 none repeat scroll bottom;
color: #ffffff;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
box-shadow: 0 0 0 rgba(0, 0, 0, .15);
}
#nav ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
float: left;
padding: 0px;
}
#nav li a {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#nav > ul > li > a {
/*color: $(tabs.text.color); Template Designer - Change Font Color */
}
#nav ul ul a {
/*color: $(tabs.text.color); Template Designer - Change Color */
}
#nav li > a:hover, #nav ul li:hover {
*/color: $(tabs.selected.text.color); Template Designer - Change Font Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#nav li ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#nav li:hover ul {
display: block;
}
#nav li li {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}
#nav li:hover li a {
/*background: $(tabs.selected.background.color); Template Designer - Change Background of Link on Hover */
}
#nav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#nav li ul a:hover, #nav li ul li:hover > a {
/*color: $(tabs.selected.text.color); Template Designer - Change Text Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/*DROPDOWN MENU MOD*/
Heres an example of what happens:
Any guidance would be much appreciated.
You might want to rethink your link hierarchy/architecture and restructure your links with folders:
<li><a href='/p/tools/'>Tools</a>
<ul>
<li><a href='/p/tools/admin-tools'>
and have your pages be "index.html" files in those folders,
(I am assuming a dynamic page is outside your limitations for now)
and for the home page: simply call the index.html there (or what ever it is called) in the link
The reason your home link is always active is that "/" is ALWAYS going to appear in the url. I think you want to use document.location.pathname, and test for equality instead.
For the second problem, why not just walk up the parent tree until you are no longer in a link? Here is an example to fix both problems:
if (document.location.pathname == aObj[i].href) {
var link = aObj;
while (link.tagName === 'a') {
link.className = 'active';
link = link.parentElement;
}
}
Just be sure to remove the active class up the chain in your onmouseout event handler as well.
Thanks to everyone for their input. I managed to get this working, and have fully documented the process on my blog, where you can also see the result.
http://www.lync.geek.nz/2015/02/highlight-current-active-menu-using-jquery-or-javascript.html
Related
I'm trying to create a slideshow for my website, where it doesn't use any timer of a kind because that's what I have right now, but I want the user to be able to use the navigational buttons. I've been trying to google it but everything I come across seems really complex and I can't get a hold of it. So was wondering if anyone here would be willing to explain how I would do that.
Here a picture of the situation is and how I'm gonna use it. It's an overlay.
does you website support bootstrap if its is you can use bootstrap Carousel slider.
you can stop auto slide by setting the property
$('.carousel').carousel({
interval: false
});
USE THIS CODE FOR NAVIGATION PANEL WITH DROP DOWN FUNCTION
body
{
/*background: url (whatever you want to use) no-repeat; */
background-size: cover;
font-family: Arial;
color: white
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li
{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a
{
color: white;
display: block;
}
ul li a:hover
{
background color:green;
}
ul li ul li
{
display: none;
}
ul li:hover ul li
{
display: block;
}
<html>
<link href ='style.css' rel= 'stylesheet' >
<ul>
<li><a>Home</a></li>
<li><a>About</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Things to do</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
</li>
<li><a>News</a>
<ul>
<li><a>First</a></li>
</ul>
</li>
</html>
I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.
I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".
Simple Div Structure:
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??
Like:
$("#menu").hover( // Div Menu is being hovered
function () {
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
},
function () {
$el..hide();
}
);
Or maybe my structure is completely wrong, Should use another method to do this? Please help.
$("#menu").hover( // Div Menu is being hovered
function (event) {
$el = $(event.target);
$el.show();
},
function (event) {
$el = $(event.target);
$el.hide();
}
);
Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.
This means you have to bind the handler to every single element in the menu tree:
$("#menu div").hover(
function (event) {
console.log(event);
$(this).children().show();
},
function (event) {
$(this).children().hide();
}
);
Demo at jsfiddle.net
Yes you could use the code you wrote for determining when you hover a div. Then you trigger a function for displaying the dropdown menu. When you define the css of the navigation bar you should set the part that doesn't have to be visible at the beginning to display:hidden; in the div, so it's hidden. Then through jquery you inject code into the css for changing the property display. I give you an example. Let's assume you create a div called "hidden" and set this in the css among other possible styles:
#hidden {
display:hidden
}
Then you want the part with id "hidden" to appear when you hover the mouse.
You can use:
$("#hidden").hover.css('display', 'block')
so the hidden part will appear.
Anyway you can create a dropdown menu even simply by using css only without jquery.
Here i give you an example:
Let's say you have this markup in the html file
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
<li>Sevice three</li>
<li>Sevice four</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
<li>Small product (three)</li>
<li>Small product (four)</li>
<li>Big product (five)</li>
<li>Big product (six)</li>
<li>Big product (seven)</li>
<li>Big product (eight)</li>
<li>Enourmous product (nine)</li>
<li>Enourmous product (ten)</li>
<li>Enourmous product (eleven)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
As you can see here the markup is simply a series of nested "ul". No verbose IDs/classes, no divs, just rich, semantic code.
The #nav ul contains a series of li, and any that require a dropdown then contain another ul. Notice the dropdown ul have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
Now the CSS:
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
So by using a nested unordered list and some css you can make an effective dropdown menu. That is the best solution according to me. Because the easier way you can make a thing the better it is.
For more details and a full explaination and demo of the dropdown menu, go to: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Of course you can set the colors and style as you prefer.
If you want a flyout vertical menu like that on Amazon check this example. It's simple, just html and css, no jquery. It looks alike.
HTML:
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>
CSS:
ul.nav{
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
}
ul.nav li{
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
}
ul.nav > li:hover{
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
}
ul.nav > li:hover > span{
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
}
ul.nav li a{
color: #666;
text-decoration: none;
}
ul.nav li a strong{
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
}
/* dropdown */
ul.nav li ul{
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
}
ul.nav li:hover > ul{
display: block;
}
ul.nav li ul li{
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
}
ul.nav li ul li a strong{
font-weight: normal;
color: #034995;
}
Look at the code and demo here: http://jsfiddle.net/blackpla9ue/KHLgm/8/
You can edit and add things as you prefer.
I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. What I want to do is add a second submenu inside the first submenu but make it a dropdown. I am not that great at css and I was wondering if anyone can help me with this. I haved followed some tutorials online and I was not able to get the results I was looking for. Here is the html and css I have so far.
<div id="navigation">
<ul id="mymenu">
<li>Home</li>
<li>Gallery</li>
<li>What We Do</li>
<li>Contact</li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
<li>General</li>
<li>Landon News</li>
<li>Trust Us</li>
</ul>
<ul id="s2">
<li>
Security Systems
<ul id="s2sys">
<li>Arlington HA</li>
<li>Enfield HA</li>
<li>Revere HA</li>
</ul>
</li>
<li>
WLAN Systems
<ul id="s2wlan">
<li>Beverly HA</li>
<li>Holyoke HA</li>
<li>Meriden HA</li>
<li>Revere HA</li>
</ul>
</li>
</ul>
<ul id="s3">
<li>Computers</li>
<li>Strategic Planning</li>
<li>Security Systems</li>
<li>WLAN, WiFi Broadband</li>
</ul>
<ul id="s4">
<li>Email</li>
<li>Address Info</li>
</ul>
</div>
Here is the javascript for the main menu which will display the first submenu
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Here is the CSS
#navigation{
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#1361A5;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#C3C2C1;
height:30px;
font-size:11px;
border-radius:8px;
-moz-border-radius:8px; /* Firefox 3.6 and earlier */
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
-moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
behavior: url(http://localhost/landon/assets/pie/PIE.php);
position: relative;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 10px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
#sublinks li:hover ul{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#sublinks li:hover li {
float: none;
}
#sublinks li:hover li a {
background-color: #C3C2C1;
border-bottom: 1px solid #fff;
color: #000;
left:50;
}
#sublinks li li a:hover {
background-color: #8db3ff;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}
What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. How can I do this?
http://jsfiddle.net/kVztG/1/
To make the sub-sub-menu a dropdown change the css below.
#sublinks li:hover li {
display:block;
position:relative;
top:30px;
}
The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline.
Try adding this css to your drop down ul list that is within your sub-menu.
position: absolute;
top: 30px;
Depending on the type of result your looking for, you might want to amend the top value, or have the dropdown vertical by adding a width
Demo: http://jsfiddle.net/4k2Tx/2/
I am making a drop-up using li nested in ul but am not able to set the width of li to dynamically match the width of the ul.
Please note that the li elements are constricted within a drop-up list.
The below looks like too much css but in essence it's just about the ul and li.
THE CSS
<style type="text/css" media="screen, tv, projection">
/* - - - ADxMenu: BASIC styles - - - */
/* remove all list stylings
.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
*/
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left; /* move all main list items into one row, by floating them */
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the bottom left corner, */
bottom: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
bottom: 100%; /* 1st level go above their parent item */
}
.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
bottom: 0;
left: 100%;
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
.menu ul ul {
padding: 30px 30px 30px 10px;
margin: 0 0 -30px -10px;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
color: #eee;
background: #000;
}
.menu ul {
background: #000;
width: 11em;
}
.menu a {
text-decoration: none;
padding: .4em 1em;
display: block;
position: relative;
font-family:BlairMdITCTTMedium;
color:#848484;
font-size:11px;
}
.menu a:hover, .menu li:hover>a {
color: #ccc;
}
.menu li li { /* create borders around each item */
border: 1px solid #000;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
bottom: 5px;
left: 90%;
}
/* Fix for IE5/Mac \*//*/
.menu a {
float: left;
}
/* End Fix */
/*]]>*/
</style>
**THE HTML CODE**
<ul class="menu">
<li style="width:80px;">
<a id="menu1" title="View all posts filed under Accessories" href="http://monique-relander.be/objects/accessories/">Accessories</a>
<ul>
<li>Home</li>
<li>Feeds</li>
<li>Archive</li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Furniture" href="http://monique-relander.be/objects/furniture/">Furniture</a>
<ul>
<li>Home</li>
<li>Feeds</li>
<li>Archive</li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Lighting" href="http://monique-relander.be/objects/lighting/">Lighting</a>
<ul>
<li>Home</li>
<li>Feeds</li>
<li>Archive</li>
</ul>
</li>
<li style="width:80px;">
<a title="View all posts filed under Mirrors" href="http://monique-relander.be/objects/mirrors/">Mirrors</a>
<ul>
<li>Home</li>
<li>Feeds</li>
<li>Archive</li>
</ul>
</li>
<li class="none" style="width:140px;">
<a title="View all posts filed under NEW ARRIVALS" href="http://monique-relander.be/objects/new-arrivals/">New Arrivals</a></li>
<li style="width:130px;">
<a title="View all posts filed under Sold Gallery" href="http://monique-relander.be/objects/sold-gallery/">Sold Gallery</a></li>
<li class="cat-item right">
Contact</li>
</ul>
The width of the li seems to be the same as the ul by default.
Atleast based on my experiments here http://jsfiddle.net/dwCsW/
If you remove the ul width it will be 100%, and by setting ul width the li will follow.
So there must be something else in your code removing that.
You could either give the li's a percentage width in the css... there are 7 of them, right? so maybe make each 10% wide, put 4% between each one and 3% at the beginning and end? Or, you could use JavaScript and detect the page resize event, then get the page/ul width and set the width of each li item using some good ol' fashioned number crunchin'!
I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});