www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Drop Down Menu ?

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    CSS Drop Down Menu ?

    CSS Drop Down Menu ?

    Hi all

    http://www.ttmt.org.uk/menu/

    I'm doing a CSS drop down menu but I think I might have done it wrong.
    The menu works but when I roll over the button with the drop down underneath it(Two in the exmaple) and move on to the drop down menu the button (Two) loses it's background color.

    How can I keep the nav button (Two in the example) selected with the background color when I have rolled on to the drop down menu.

    Also is this the best way to do this? Can I do it better?

    Any help would be greatly appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        ul{
          list-style:none;
        }
        #wrap{
        	width:500px;
        	float:right;
        	margin:50px;
        }
        #nav{
        	border-top:1px solid #999;
        	border-bottom:1px dashed #999;
        	overflow:auto;
        }
    
        #nav #topNav{
        	float:right;
        }
    
        #nav #topNav li{
        	float:left;
        }
        #nav #topNav li a.btn{
        	display:block;
        	text-decoration:none;
        	padding:15px;
        }
        #nav #topNav .btn:hover{
        	background:#eee;
        }
        #nav #topNav li ul{
        	background:#eee;
        	width:180px;
        	position:absolute;
        	left:-999em;
        	z-index:10;
        }
        #nav #topNav li:hover ul{
        	left:auto;
        }
        #nav #topNav li ul li{
        	border-bottom:1px dashed #fff;
        	margin-left:5px;
        	padding:.2em 0em;
        }
        #nav #topNav li ul li a{
        	color:#888;
        	display:block;
        	font:bold 85% "Helvetica Neue", Helvetica, Arial, sans-serif;
        	padding:10px;
        	text-decoration:none;
        	width:180px;
        }
        #nav #topNav li ul li a:hover{
        	color:red;
        }
        #nav #topNav ul li.bottomSub{
        	border:0;
        }
    
      </style>
    </head>
    
    <body>
      
      <div id="wrap">
        <div id="nav">
          <ul id="topNav">
            <li id="homeSelected" ><a href="#" class="btn">One</a></li>
            <li id="Two" ><a href="#" class="btn">Two</a>
              <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
              </ul>
            </li>
            <li id="tester" ><a href="#" class="btn">Three</a></li>
            <li id="support" ><a href="#" class="btn">Four</a></li>
          </ul><!--topNav-->
        </div><!--nav-->
      </div><!--wrap-->
      
    </body>
    </html>

  2. #2
    Join Date
    Dec 2011
    Posts
    32
    You will love jQuery after this

    Here we go, after your META tag, add the following code:

    Code:
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("ul ul li").hover(
                function () { $(this).parent().parent().css('background', '#eee'); }, 
                function () { $(this).parent().parent().css('background', '#ffffff'); } ); });
        </script>
    That's it.

    Basically, you first add jQuery hosted on Google.
    Then, inside "on document ready" (after site has loaded)
    You say:
    go into every "ul ul li" on the page,
    and highlight 2nd parent of it on mouse over
    and unhighlight 2nd parent of it on mouse out

    $("ul ul li") is the jQuery selector that selects your sub menu
    hover() is the jQuery function that works with mouse over and mouse out events on the selected element. So you get

    Code:
    $("ul ul li").hover(...
    Then you provide 2 javascript functions for mouse in and mouse out,
    inside those functions put what you want to do each time.

    jQuery, yet again to the rescue.

    Inside those two functions I use the following code:

    Code:
     $(this).parent().parent().css('background', '#eee');
    $(this) is just another way of saying "work with what you just selected", hence, it is the "li" in the "ul ul li" sequence from $("ul ul li").

    parent() means you basically go up one element.

    Because we selected LI, and we go up one time, we get UL (the first parent).

    Now we want to grab the parent of THAT parent and we do parent() again!

    now.. we are at parent of parent -- which is THE TAB.

    Apply css to it using the css() function.

    'background' is the style, '#eee' is the highlighted tab color.

    Is this the best solution? Christ, I don't know, but it sure is elegant.



    Last edited by html-tutorials; 12-16-2011 at 04:57 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles