...

View Full Version : Css Nav Menu - sub menu issue with selected state



jrobe1111
08-24-2010, 04:38 AM
I have a horizontal nav menu in which the client has asked me to add a few sub-menu drop-downs for various sections. The current menu has a gradient fade image that repeats at hover and selected state when the page is viewed. I achieved this by giving each page in a particular section a <body id"___"> tag. For example, all pages in the "services" section have the tag <body id="services"> to allow the style sheet to control the selected state.

Now that I have added the sub-menus, they are consistently in the selected state. The client wishes for them to have a black background unless they are hovered. I cannot figure out where my error is. Is it in the style sheet or the nav include file??

The site is located on my development server here: http://www.netfusionstudios.com/webdev/kraftech/services.php

Here is the code for the nav include (nav.html):


<ul>
<li id="t-home"><a href="index.php">Home</a></li>
<li id="t-builder_profile"><a href="builderprofile.php" class="current" >Builder Profile</a></li>
<li id="t-services"><a href="services.php" >Services</a>
<ul>
<li><a href="newconstruction.php">New Construction</a>
<li style="border-bottom:none;"><a href="renovation.php" >Renovations/Additions</a></li>
</ul>
</li>
<li id="t-communities"><a href="communities.php" >Communities</a>
<ul>
<li id="t-communities"><a href="canyonwoods.php">Canyon Woods</a></li>
<li id="t-communities" style="border-bottom:none;"><a href="hiddencanyon.php" >Hidden Canyon</a></li>
</ul>
</li>
<li id="t-gallery"><a href="gallerymain.php">Gallery</a></li>
<li id="t-testimonials"><a href="testimonials.php">Testimonials</a></li>
<li id="t-contact"><a href="contact.php" >Contact</a></li>
</ul>


Here is the portion of the style sheet that controls the nav menu:


/*----nav menu buttons----*/

.menu{
width:796px;
height:44px;
float:left;

background:url(../images/menu-bg.jpg) top left no-repeat #29100c;
}


.menu ul {
float: right;
margin: 0px;
padding: 0 0 0 0;
width: 796px;
list-style: none;
}

.menu ul li {
display: block;
float:left;
position:relative;
}

.menu ul li a {
float: left;
padding:14px 16px 14px 16px;
text-align: center;
text-decoration: none;
text-transform:uppercase;
color:#fae6bc;
font-family:Helvetica;
font-size: 12px;
letter-spacing:1px;
outline: none;
font-weight:bold;
}

.menu li a:hover, body#home #t-home a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#builder_profile #t-builder_profile a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#services #t-services a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#communities #t-communities a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#gallery #t-gallery a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#testimonials #t-testimonials a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#contact #t-contact a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

/*----sub-menu buttons----*/
.menu ul ul{
display:none;
}
.menu ul li:hover ul{

width:200px;
border:#695c42 1px solid;
text-align:center;
display:block;
position:absolute;
top:43px;
left:0px;
background:#000000;
}
.menu ul ul li{

border-bottom:#695c42 solid 1px;
width:200px;
display:block;
clear: both;
}
.menu ul ul li a{
font-size:10px;
padding:10px 12px 10px 12px;
width:176px;
}

Thank you in advance for any help you can provide.

DrunkMunki
08-24-2010, 08:49 AM
<li id="t-communities"><a href="communities.php" >Communities</a>
<ul>
<li id="t-communities"><a href="canyonwoods.php">Canyon Woods</a></li>
<li id="t-communities" style="border-bottom:none;"><a href="hiddencanyon.php" >Hidden Canyon</a></li>
</ul>
</li>


the above is an example from your page, you have multiple ID tags for each link, an ID tag HAS to be UNIQUE, use a class to change the style.
i would remove the style: code and use a style sheet.

E.G below;


<li id="t-communities" class="active"><a href="communities.php" >Communities</a>
<ul>
<li id="t-communities-1" class="normal"><a href="canyonwoods.php">Canyon Woods</a></li>
<li id="t-communities-hidden" class="normal"><a href="hiddencanyon.php" >Hidden Canyon</a></li>
</ul>
</li>



<style type="text/css">
.normal {font-family: Verdana, Geneva, sans-serif;}
.active {font-family: Verdana, Geneva, sans-serif; font-weight: bold; color: #0F9;}
</style>

craftygeek
08-24-2010, 08:55 AM
I think you've made the whole thing more complicated than it needs to be.

You don't need to use IDs for this...classes will be simpler.

I'd suggest starting again.

Have the top level menu items with a class 'top'
sub menu items with a class 'sub'

then any top level menu item that is current, give a class 'current'...do the same if appropriate for the sub menu items.

Now style the .top level menu items for
.top
.top:hover
.top.current
.top.current:hover

& the sub menu items as
.top .sub
.top .sub:hover
.top.current .sub
.top.current .sub:hover
.top.current .sub.current
.top.current .sub.current:hover

That should (I think) cover every state that you need, in practise you probably won't need:
.top.current .sub
.top.current .sub:hover

jrobe1111
08-24-2010, 09:06 PM
Thanks for the replies!

I will actually try both to see how they work.

Norfolk: Will your method still have the nav button in the selected state when a user is browsing a page in that section? I don't see what would do that in the styles since the nav menu must be an include (there are over 50 pages in the site).

Thanks all!

jrobe1111
08-29-2010, 07:26 PM
Thanks for the suggestions everyone. I tried both of them and didn't get the desired result. It could have been due to an error on my part. I did, however, get the result I wanted with the following code:




<ul>
<li id="t-home"><a href="index.php">Home</a></li>
<li id="t-builder_profile"><a href="builderprofile.php" class="current" >Builder Profile</a></li>
<li id="t-services"><a href="services.php">Services</a>
<ul>
<li><a href="newconstruction.php">New Construction</a></li>
<li><a href="renovation.php" >Renovations/Additions</a></li>
</ul>
</li>
<li id="t-communities"><a href="communities.php">Communities</a>
<ul>
<li><a href="canyonwoods.php">Canyon Woods</a></li>
<li><a href="hiddencanyon.php" >Hidden Canyon</a></li>
</ul>
</li>
<li id="t-gallery"><a href="gallerymain.php">Gallery</a></li>
<li id="t-testimonials"><a href="testimonials.php">Testimonials</a></li>
<li id="t-contact"><a href="contact.php" >Contact</a></li>
</ul>



The style sheet changes are as follows:




.menu li a:hover, body#home #t-home a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#home #t-home {
color:#FFFFFF;
}

.menu li a:hover, body#builder_profile #t-builder_profile a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#services #t-services {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#services #t-services a {
color:#FFFFFF;
}

.menu li a:hover, body#communities #t-communities {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#communities #t-communities a {
color:#FFFFFF;
}

.menu li a:hover, body#gallery #t-gallery a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#gallery #t-gallery {
color:#FFFFFF;
}

.menu li a:hover, body#testimonials #t-testimonials a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}

.menu li a:hover, body#testimonials #t-testimonials {
color:#FFFFFF;
}

.menu li a:hover, body#contact #t-contact a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#contact #t-contact {
color:#FFFFFF;
}



Granted, there is extra styles in for Home, Builder Profile, Testimonials, and Contact. These styles aren't used at this point, but in the future we may add sub-menus to those sections.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum