SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS menu doesnt highlight in sections marked, id class links

    Hello,

    I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works.

    The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work.

    http://www.tpxdesign.com/test/Valliant/alpha/index7.php

    My nav menu code and nav style sheet:

    Code:
    <!--[if !IE]><!-- start nav --><![endif]-->
    <div id="side_nav_bar" class="floater">
    <div id="nav_menu">
    <ul id="nav"> 
      <li><a href="demoreel.php" class="port">Portfolio</a> 
        <ul>
          <li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
          <li><a href="shorts.php" class="port">Shorts</a></li>
    	  <li><a href="musicvid.php" class="port">Music Video</a></li>
    	  <li><a href="comvid.php" class="port">Commercial</a></li>
    	  <li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
    	  <li><a href="gallery.php" class="port">Photo. Gallery</a></li>
        </ul>
      </li> 
      <li><a href="services.php" class="serv">Services</a> 
      </li> 
      <li><a href="newupdate.php" class="newe">News &amp; Events</a> 
        <ul>
          <li><a href="newupdate.php" class="newe">News/Updates</a></li>
          <li><a href="eventblog.php" class="newe">Event Calendar</a></li>
        </ul>
      </li>
      <li><a href="bio.php" class="about">About Valliant</a>
        <ul>
          <li><a href="resume.php" class="about">Resume</a></li>
          <li><a href="bio.php" class="about">Biography</a></li>
    	  <li><a href="contact.php" class="about">Contact</a></li>
        </ul>
      </li> 
      <li><a href="links.php" class="link">Links</a></li>
      <li><a href="index7.php" class="home">Home</a></li>
    </ul> 
    </div> 
    </div>
    <!--[if !IE]><!-- end nav --><![endif]-->
    Code:
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 199px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    	}
    
    ul li {
    	position: relative;
    	}
    	
    li ul {
    	position: absolute;
    	left: 198px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    		
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    		
    li:hover ul, li.over ul { display: block; } /* The magic */
    
    #home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
    {
    color: #000;
    background-color: #eee;
    }

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Care to be a bit more precise about which bit's not working because looking at your site when I go to different pages, the left-hand nav highlights different links. Is that not what you want?

  3. #3
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css menu highlight

    Quote Originally Posted by Tyssen
    Care to be a bit more precise about which bit's not working because looking at your site when I go to different pages, the left-hand nav highlights different links. Is that not what you want?
    By highlight I mean when you visit for example the Demo Reel page, the Portfolio section turns dark gray. Now if you want to visit the photo gallery, also in the Portfolio section, the menu no longer highlights as you mouse over it; its just dark gray.

    How can I have the section you are currenty in, be marked by turning background gray and still have the menu highlight when you mouse over the menu items?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The submenu items have the same class as the main item (in this case .port) which is picking up the #port .port style. Giving the sub menu items a different class should fix it.

  5. #5
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css sub-menu class

    Quote Originally Posted by Tyssen
    The submenu items have the same class as the main item (in this case .port) which is picking up the #port .port style. Giving the sub menu items a different class should fix it.
    But if the sub-menu has a different class would it still mark what section your in on the nav menu? (by turning the top level menu items background a different color, in this case dark gray)

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no point in marking what page you're on in the submenu because you can't see it until you rollover it anyway but if you really wanted to go to the trouble, then you'd need to add your new submenu class to the #port .port rule too.
    Actually, in your case, you'd be much better off just adding an 'active' or 'curren't class or ID to the relevant link and styling it that way.

  7. #7
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    top level css menu nav

    Quote Originally Posted by Tyssen
    There's no point in marking what page you're on in the submenu because you can't see it until you rollover it anyway but if you really wanted to go to the trouble, then you'd need to add your new submenu class to the #port .port rule too.
    Actually, in your case, you'd be much better off just adding an 'active' or 'curren't class or ID to the relevant link and styling it that way.
    I don't want the sub-menu to be marked, just the top level so people can see what section they are in. Im really confused now... how do I do this?

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're the one confusing me. Doing what I originally suggested, changing your submenu links to a different class, won't affect the highlighting of the top level links.

  9. #9
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    removing the classes from the sub-menu links made it work perfectly!


Bookmarks

Posting Permissions

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