www.webdeveloper.com
Results 1 to 4 of 4

Thread: jquery menu with subnav

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    jquery menu with subnav

    Hi all,

    I have a menu with sub nav items. I have some jquery so that when you are on a page with subnav the subnav is showing. However I want to adapt it so that if you also hover over the menu item which has a subnav then you can choose one of the options. At the moment the subnav disappears once you roll off the parent. Any ideas?

    Any questions give me a shout....thank you

    HTML Code:
    <nav>
    	<ul class="topnav">
            <li><a href="index.php">Home</a></li>
            <li>
                <a href="about-us.php">About Us</a>
                <ul>
                	   <li><a href="a1.php">Sub one</a></li>
                       <li><a href="a2.php">Sub two</a></li>
                       <li><a href="a3.php">Sub three</a></li>
                  </ul>
            </li>
            <li>
            	<a href="our-services.php">Our Services</a>
            	<ul>
                	   <li><a href="our-services.php">Sub one</a></li>
                       <li><a href="our-services.php">Sub two</a></li>
                       <li><a href="our-services.php">Sub three</a></li>
                   </ul>
            </li>
            <li><a href="contact-us.php">Contact Us</a></li>
        </ul>
    </nav>
    Code:
    header nav ul.topnav
    {
    	float: left;
    	height: 35px;
    	margin: 5px 0 0 25px;
    }
    header nav ul.topnav li
    {
    	float: left;
    	height: 35px;
    	background: url(../img/global/nav/separator.gif) no-repeat 0 0;
    	padding-left: 5px;
    	margin-right: 5px;
    }
    
    header nav ul.topnav li:first-child
    {
    	padding: 0;
    	background-image: none;
    }
    header nav ul.topnav li a
    {
    	display: block;
    	height: 25px;
    	line-height: 17px;
    	padding: 0 9px;
    	font-family: 'DINMedium';
    	font-size: 16px;
    	color: #fff;
    	text-transform: uppercase;
    	text-decoration: none;
    	text-shadow: 0 -1px 0 #7DA13A;
    	margin-top: 5px;
    }
    header nav ul.topnav li:hover a,
    header nav ul.topnav li a.active
    {
    	color: #575759;
    	text-shadow: none;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-moz-box-shadow: 0px -1px 0px #78983D;
    	-webkit-box-shadow: 0px -1px 0px #78983D;
    	box-shadow: 0px -1px 0px #78983D;
    	background: #fefffe; /* Old browsers */
    	background: -moz-linear-gradient(top, #fefffe 0%, #ededee 100%);  /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefffe), color-stop(90%,#ededee)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #fefffe 0%,#ededee 90%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #fefffe 0%,#ededee 190%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #fefffe 0%,#ededee 90%); /* IE10+ */
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fefffe', endColorstr='#ededee'); /* IE-8 */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefffe', endColorstr='#ededee',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #fefffe 0%,#ededee 190%); /* W3C */ 
    }
    
    header nav ul.topnav li ul
    {
    	position: absolute;
    	top:48px;
    	left: 35px;
    	width: 940px;
    	height: 28px;
    	padding: 0;
    	display:none;
    }
    header nav ul.topnav li ul.active
    {
    	display: block;
    }
    header nav ul.topnav li ul li
    {
    	background:none; /* removes separator from subnav */
    	height: 28px;
    	line-height: 24px;
    	margin: 0;
    	padding: 0;
    }
    header nav ul.topnav li ul li:hover
    {
    	line-height: 24px;
    	margin: 0;
    	padding: 0;
    }
    header nav ul.topnav li ul li:hover a,
    header nav ul.topnav li ul li a
    {
    	float: left;
    	display: block;
    	height: 28px;
    	line-height: 15px;
    	font-size:12px;
    	color: #575759;
    	text-shadow: none;
    	margin:3px 0 0 0;
    	padding: 0 15px;
    }
    header nav ul.topnav li ul li:first-child a
    {
    	padding-left: 0;
    }
    header nav ul.topnav li ul li a:hover
    {
    	color: #52AA26;
    }
    header nav ul.topnav li:hover ul li a
    {
    	-moz-box-shadow:none;
    	-webkit-box-shadow:none;
    	box-shadow:none;
    	background:none;
    }
    Code:
    // Subnav
    	$("ul.topnav li").hover(function(){
        
            $(this).addClass("hover");
            $('ul:first', this).css('display', 'block');
        
        }, function(){
        
            $(this).removeClass("hover");
            $('ul:first:not(.active)', this).css('display', 'none');
        
    });

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,129
    You're code seems to be working fine here in Chrome:
    http://jsfiddle.net/dfreema1/98XrV/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jul 2010
    Posts
    50
    hi, thank you for taking the time to look at the code.

    The main issue is that when I click on a subnav item and the parent is active. So I am on the page subnav one and about us is highlighted. Then I hover over our services - the subnav shows but over the top of the current active subnav. Not sure how to make it work best I think. Think I need to hide the current active subnav when I hover over the new parent with subnav.

    Any ideas?

  4. #4
    Join Date
    Jun 2012
    Posts
    1
    I know this is old but it's the reason i registered

    You have space between the topnav and subnav. I am guessing because you wanted to separate the a elements more or what not.

    Simple solution, always make sure you have no space between the topnav and subnav. If you need to create separation, use padding not margin or positioning.


    Code:
    header nav ul.topnav li ul {
        display: none;
        height: 2px;
        left: 35px;
        padding: 0;
        position: absolute;
        /*top: 48px;*/ //change this
        top: 40px;
        padding-top:8px;
        width: 940px;
    }

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles