So im curretnly working on this project. http://robertoallana.com/clients/absolute_storage/ver4.5/index.html On the product list menu, I like how it swiftly shows and hides subcategories. The problem is...the when you click a link frm main category without a subcategory, it wont go to the link being called. I guess this is explained best here: http://i.imgur.com/6NehfYW.jpg I dunno what to edit here. help pls!
the problem is that your jquery code is preventing the default browser action for all of the items in your menu. but what you really want is to prevent the default browser action only on menu items that expand. Solution: modify the jquery selector. Use the following code in place of the javascript you have in the footer. <script type="text/javascript"> $(function() { var menu_ul = $('.menu > li > ul'), menu_a = $('.menu > li.item1 > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); Code (markup): I haven't tested it but that code should work for you.
worked well. thank you very much!! wonder if that code affected my mobile menu as well.. it wont pull down once browser are small.
Pulldown menus for mobile are inaccessible trash -- just like hover menus it's a 'how not to develop a website' --- though to be fair, all that jquery crap on the page is similarly afflicted. With the 'slideup' part really having no business being scripted (CSS3 transforms, no animation old browsers, oh well) or targeting something that would/should/could return more than one element with adding a function. Though across the board that page is a laundry list of how not to build a website -- and I'm not just talking the jQuery for nothing. Inaccessible absurdly undersized fixed metric fonts, broken attempt at responsive design, design elemenets like the massive space wasting banner image garbage, pointless HTML 5 bloat, multiple copies of the same data and navigation for nothing (one of which isn't even in the stupid 5 NAV tag), gibberish use of numbered heading tags, clearfix like it's still 2001, etc, etc, etc... First thing I'd do is abandon the HTML 5 asshattery and framework for nothing garbage... and drag it kicking and screaming into SEMANTIC markup BEFORE you start worrying about appearance, something that obviously was NOT done here. Just to show you what I mean, if I was writing the same page, keeping the stuff I'd not put on a page in the first place like that space wasting image banner, the markup would go something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link rel="shortcut icon" href="favicon.ico" /> <title> Absolute Storage </title> </head><body> <div id="pageWrapper"> <h1> <a href="/"> Absolute <span>Storage Systems</span> <b><!-- image replacement --></b> </a> </h1> <div id="topCall"> Contact our sales hotline at <strong>(+613) 9799 2291</strong> </div> <form id="search" action="#" method="get"> <fieldset> <label for="seartText">Search:</label> <input type="text" id="searchText" name="text" /> <input type="submit" value="search" /> </fieldset> </form> <ul id="mainMenu"> <li><a href="index.html">HOME</a></li> <li><a href="about_absolute_storage.html">ABOUT US</a></li> <li><a href="services_absolute_storage.html">SERVICES</a></li> <li><a href="used_products_absolute_storage.html">USED PRODUCTS</a></li> <li><a href="case_studies_absolute_storage.html">CASE STUDIES</a></li> <li><a href="contact_absolute_storage.html">CONTACT</a></li> </ul> <div id="homeBanner"> <img src="assets/images/slide1.jpg" alt="describe this!!!" /> <img src="assets/images/slide2.jpg" alt="seriously, DESCRIBE!!!" /> <img src="assets/images/slide3.jpg" alt="What part of" /> <img src="assets/images/slide4.jpg" alt="ALT is manditory" /> <img src="assets/images/slide5.jpg" alt="Did you fail to grasp?" /> <!-- #homeBanner --></div> <div id="contentWrapper"><div id="content"> <h2>Welcome to Absolute Storage</h2> <p> <b>Absolute Storage Systems Pty Ltd</b> is a leading supplier of innovative storage systems for industrial and commercial businesses. From small office storage cabinets to huge computer-controlled storage and retrieval systems, Absolute Storage Systems has a solution for every business need. </p><p> <b>Absolute Storage Systems</b> is a partner of the giant German storage-solutions company SSI Schaefer. SSI Schaefer is the world's largest supplier of industrial storage systems, dominating the market in all forms of high-quality manual and automated storage solutions internationally. </p><p> Through its relationship with SSI Schaefer, Absolute Storage Systems is able to take advantage of the company's longstanding expertise and quality-mindedness. Our ties with SSI Schaefer mean that our own customers can be confidant that the storage solutions we offer are built on the very same tried-and-true technologies that have made SSI Schaefer the pre-eminent world leader in the storage-solutions field. </p> <!-- #content, #contentWrapper --></div></div> <hr /> <div id="extras"> <div class="firstSection"> <a href="#" class="shopButton"> Available on our <span>Online Store</span> </a> <ul id="accordionMenu"> <li> <span>PALLET RACKING</span> <ul> <li><a href="pallet_racking.html">PALLET RACKING</a></li> <li><a href="selective_pallet_racking.html">SELECTIVE RACKING</a></li> <li><a href="double_deep_pallet_racking.html">DOUBLE DEEP RACKING</a></li> <li><a href="drive-in_pallet_racking.html">DRIVE-IN RACKING</a></li> <li><a href="push-back_pallet_racking.html">PUSH BACK RACKING</a></li> <li><a href="pallet-live-storage_pallet_racking.html">PALLET LIVE STORAGE</a></li> <li><a href="satellite_channel_pallet_racking.html">SATELLITE / CHANNEL RACKING</a></li> <li><a href="mobile_pallet_racking.html">MOBILE PALLET RACKING</a></li> <li><a href="carton-live_pallet_racking.html">CARTON LIVE STORAGE</a></li> <li><a href="accessories_pallet_racking.html">ACCESSORIES</a></li> </ul> </li> <li><a href="cantilever_racking.html">CANTILEVER RACKING</a></li> <li><a href="raised_storage_area.html">RAISED STORAGE AREA</a></li> <li> <span>SHELVING SYSTEMS</span> <ul> <li><a href="shelving_systems.html">SHELVING SYSTEMs</a> <li><a href="static_systems.html">Static Systems</a> <li><a href="mobile_systems.html"> Mobile Systems</a> </ul> </li> <li><a href="vertical_shelving_systems.html">VERTICAL SHELVING SYSTEMS</a></li> <li><a href="automated_storage_systems.html">AUTOMATED STORAGE SYSTEMS</a></li> <li><a href="conveyors.html">CONVEYORS</a></li> <li><a href="cabinets_cupboards.html">CABINETS & CUPBOARDS</a></li> <li><a href="containers.html">CONTAINERS</a></li> <li><a href="used_racking.html"> USED RACKING</a></li> <li><a href="load_safety_signs.html">LOAD SAFETY SIGNS</a></li> </ul> <!-- .firstSection --></div> <div class="secondSection"> <ul id="extraMenu"> <li><a href="index_home_products.html">OUR PRODUCTS</a></li> <li><a href="index_home_glance.html">AT A GLANCE</a></li> <li><a href="index_home_services.html">OUR SERVICES</a></li> </ul> <!-- .secondSection --></div> <!-- #extras --></div> <hr /> <img src="assets/images/horizontal_ad_footer.jpg" alt="advert" class="bottomAd" /> <div id="footer"> <a href="index.html" class="footerLogo"> Absolute <span>Storage Systems</span> <b><!-- image replacement --></b> </a> <ul> <li><a href="privacy_absolute_storage.html">Privacy</a></li> <li><a href="termsconditions_absolute_storage.html">Terms and Conditions</a></li> <li><a href="sitemap_absolute_storage.html">Site Map</a></li> </ul> © Absolute Storage Systems Pty Ltd, All Rights Reserved. <!-- #footer --></div> <!-- #pageWrapper --></div> <script type="text/javascript" src="library.js"></script> <script type="text/javascript"><!-- accordion('accordionMenu'); slide('homeBanner'); --></script> </body></html> Code (markup): Everything else would either be in the CSS, or in a script that I very much doubt would be larger than 4k. Though again, the layout concept itself isn't entirely what I'd call viable for web deployment.