Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Thanked 0 Times in 0 Posts

    Question Jquery mouse out still show sub nav if over

    I'm trying to create a menu system with jQuery and i am stuck. any help would be appreciated. I have one main navigation and each item in it has a submenu to be displayed... I'm trying to make it so if you move the mouse over one of the items in the main menu, the sub menu for that item is shown so you can move your mouse over to the submenu and keep the styling "hovered" for the main menu item, allowing you to select a submenu item. If your mouse move off from all menu items, the complete menu is shown as what has a class of "active". I hope that makes sense. LOL

    <!DOCTYPE html>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 2</title>
    <style type="text/css">
    body { margin:0; padding:0; }
    #nav-main-wrap { position:relative; height:40px; background:url('images/main-nav-bg.png') repeat-x; }
    #nav-submain-wrap { position:relative; height:32px; background:#336699; }
    ul.nav { position:absolute; top:0; left:0px; width:100%; list-style: none; list-style-type: none; display: block; margin:0; padding:0; height:inherit; }
    ul.nav li { float:left; display:block; height:inherit; }
    ul.nav li a { text-decoration:none; color:#fff; display:block; padding:0px 20px 0px 20px; outline:0; }
    ul.nav li img { border:0; padding:4px 3px 4px 3px; vertical-align:bottom; }
    #nav-submain-wrap ul,#nav-submain-wrap ul.hidden { visibility:hidden; }
    #nav-submain-wrap .active,#nav-submain-wrap .hover { visibility:visible; }
    ul#nav-main.nav li a.hover { background:url('images/main-nav-hover.png') repeat-x; }
    ul#nav-main.nav li a.active { background:url('images/main-nav-active.png') repeat-x; }
    <script type="text/javascript" src="jquery.min.js"></script>
    	$("#nav-main li a").mouseenter(function(){
    		var itemid = "#" + $(this).attr("id") + "-group";
      		if(!$(this).hasClass('active')) {
    			var itemid = "#" + $(this).attr("id") + "-group";
    	$("#nav-main li a").click(function(){
    	//set as active, get parent id, add "-group" and set that id as active
    	//then use jquery ajax to grab and display content
        $("#nav-submain-wrap ul li a").click(function(){
    	//get grandparent id, set as active, trim "-group" from id and set as active
    	//then use jquery ajax to grab and display content
    	<div id="nav-main-wrap">
    		<ul id="nav-main" class="nav">
    			<li><a href="#" title="Main 1" id="nav-main1" class="active"><img alt="" src="images/main1.png">Main 1</a></li>
    			<li><a href="#" title="Main 2" id="nav-main2"><img alt="" src="images/main2.png">Main 2</a></li>
    			<li><a href="#" title="Main 3" id="nav-main3"><img alt="" src="images/main3.png">Main 3</a></li>
    	<div id="nav-submain-wrap">
    		<ul id="nav-main1-group" class="nav active">
    			<li><a href="#" title="Sub Main 1-1"><img alt="" src="images/submain11.png">Sub Main 1-1</a></li>
    			<li><a href="#" title="Sub Main 1-2"><img alt="" src="images/submain12.png">Sub Main 1-2</a></li>
    			<li><a href="#" title="Sub Main 1-3"><img alt="" src="images/submain13.png">Sub Main 1-3</a></li>
    		<ul id="nav-main2-group" class="nav">
    			<li><a href="#" title="Sub Main 2-1"><img alt="" src="images/submain21.png">Sub Main 2-1</a></li>
    			<li><a href="#" title="Sub Main 2-2"><img alt="" src="images/submain22.png">Sub Main 2-2</a></li>
    			<li><a href="#" title="Sub Main 2-3"><img alt="" src="images/submain23.png">Sub Main 2-3</a></li>
    		<ul id="nav-main3-group" class="nav">
    			<li><a href="#" title="Sub Main 3-1"><img alt="" src="images/submain31.png">Sub Main 3-1</a></li>
    			<li><a href="#" title="Sub Main 3-2"><img alt="" src="images/submain32.png">Sub Main 3-2</a></li>
    			<li><a href="#" title="Sub Main 3-3"><img alt="" src="images/submain33.png">Sub Main 3-3</a></li>

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,008 Times in 1,005 Posts
    I have always found it a boon in learning to study others code. Here are a bunch of jquery menus.
    While jMenu seems to be the easiest and fastest, I find it jerky. good luck.

  3. #3
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    Thanked 727 Times in 721 Posts
    Two suggestions for your existing code:

    - structure your htthml so that the sub menus are nested within the top level menu lis - you can then use jQuery's DOM traversal - eg. .child() to find the sub menu
    - for the same reason, set your mouseover code to fire on the li, not the a element

    You can of course do this just with css, and then enhance it with some javascript animation if needed.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


Posting Permissions

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