I'm wanting to create a simple mobile menu that will toggle on and off when clicked. I also want it to only display the parents and not the child cat's until the parent is clicked.I researched around and found good answers to both of these. However, when combined I'm not getting the desired result.Specifically, the jquery toggle I'm using relies on the nav ul set to "display:none" as their starting state, but this is somehow interfering with my other jquery function to hide elements whose parents are of the top level ul class.Everything works as expected, except the part of not having any children display upon initial load of the menu. However, as soon as I remove my css line that initially hides my nav ul entirely, then the children are hidden (but of course, my nav is then expanded upon load, when I want it hidden.page I'm trying to work it out on: [http://saks-jewelers.com/mobile-nav/mobile_nav.html#]Here's my html code and jquery: \[code\] <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Responsive Header Nav</title> <meta name="description" content="Responsive Header Nav"> <meta name="author" content="Treehouse"> <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> <link rel="stylesheet" href="http://stackoverflow.com/questions/15536885/styles.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#menu-icon").click(function(){ $("nav ul").toggle(200); }); $('#nav>li>ul').each(function(){ if($(this).parent().hasClass("level0")) { $(this).hide(); } else { $(this).show(); } }); $('#nav>li').click(function(){ // check that the menu is not currently animated if ($('#nav ul:animated').size() == 0) { // create a reference to the active element (this) // so we don't have to keep creating a jQuery object $heading = $(this); // create a reference to visible sibling elements // so we don't have to keep creating a jQuery object $expandedSiblings = $heading.siblings().find('ul:visible'); if ($expandedSiblings.size() > 0) { $expandedSiblings.slideUp(200, function(){ $heading.find('ul').slideDown(200); }); } else { $heading.find('ul').slideDown(200); } } }); }); </script> <body> <header> <a href="http://stackoverflow.com/questions/15536885/#" id="logo"></a> <nav> <a href="http://stackoverflow.com/questions/15536885/#" id="menu-icon"></a> <ul id="nav"> <li class="level0 nav-1 first level-top parent"> <a href="http://stackoverflow.com/questions/15536885/#" class="level-top"><span>Rings</span></a> <ul class="level0"> <li class="level1 nav-1-1 first"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>CZ Fashion</span></a></li> <li class="level1 nav-1-2"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Gemstone Fashion</span></a></li> <li class="level1 nav-1-3"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Silver & Gold Fashion</span></a></li> <li class="level1 nav-1-4"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Pearl</span></a></li> <li class="level1 nav-1-5"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Moissanite?</span></a></li> <li class="level1 nav-1-6"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Religious & Symbolic</span></a></li> <li class="level1 nav-1-7"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Youth</span></a></li> <li class="level1 nav-1-8"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Promise Rings</span></a></li> <li class="level1 nav-1-9 last"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Wedding</span></a></li> </ul> </li> <li class="level0 nav-2 level-top parent"><a href="http://stackoverflow.com/questions/15536885/#" class="level-top"><span>Earrings</span></a> <ul class="level0"> <li class="level1 nav-2-1 first"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>CZ Fashion</span></a></li> <li class="level1 nav-2-2"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Gemstone Fashion</span></a></li> <li class="level1 nav-2-3"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Silver & Gold Fashion</span></a></li> <li class="level1 nav-2-4"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Pearl</span></a></li> <li class="level1 nav-2-5"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Moissanite?</span></a></li> <li class="level1 nav-2-6"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Religious & Symbolic</span></a></li> <li class="level1 nav-2-7 last"><a href="http://stackoverflow.com/questions/15536885/#" class=""><span>Youth</span></a></li> </ul> </li> </ul> </nav> </header> <section> <img src="http://stackoverflow.com/questions/15536885/featured.png" alt="Respond" /> <h1>Respond to Your Surroundings</h1> <p>...Filler Text</p> <p>...Filler Text</p> <p>Filler Text</p> </section> </body> </html>\[/code\]and here's my css:\[code\] /*RESET*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;} /*MAIN*/ body { font-size: 1.05em; line-height: 1.25em; font-family: Helvetica Neue, Helvetica, Arial; background: #f9f9f9; color: #555; } a { color: #4C9CF1; text-decoration: none; font-weight: bold; } a:hover { color: #444; } img { width: 100%; } header { background: #fff; width: 100%; height: 76px; position: fixed; top: 0; left: 0; border-bottom: 4px solid #4C9CF1; z-index: 100; } #logo{ margin: 20px; float: left; width: 200px; height: 40px; background: url(nav-logo.png) no-repeat center; display: block; } nav { float: right; padding: 20px; } #menu-icon { display: hidden; width: 40px; height: 40px; background: #4C8FEC url(nav-menu-icon.png) center; } a:hover#menu-icon {background-color: #444; border-radius: 4px 4px 0 0; } ul { list-style: none; } li { display: inline-block; float: left; padding: 10px } .current {color: #2262AD;} section { margin: 80px auto 40px; max-width: 980px; position: relative; padding: 20px } h1 { font-size: 2em; color: #2262AD; line-height: 1.15em; margin: 20px 0 ; } p {line-height: 1.45em; margin-bottom: 20px;} /*MEDIA QUERY*/ @media only screen and (max-width : 640px) { header {position: absolute; } #menu-icon { display:inline-block; } nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #fff; right: 20px; top: 60px; width: 50%; } nav li { text-align: left; width: 100%; padding: 10px 0; margin: 0; }\[/code\]And if this is just a dumb way to do what I'm trying to do, I'm open to alternatives that are simpler.
css display property interfering with my jquery toggle
- Thread starter hamh
- Start date