Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Css Nav Menu - sub menu issue with selected state

    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/webd...h/services.php

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

    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 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:

    Code:
    /*----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.

  • #2
    New Coder
    Join Date
    Aug 2010
    Location
    Sydney/Australia
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
         <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;

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

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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:

    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:

    Code:
    .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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •