javascript - Create an Accordion Menu for Mobile Site Jquery and CSS -
i have started designing mobile website using media queries , browsing few websites see they've done seems accordion navigation menus way go, scaling normal horizontal navigation bar. have browsed , browsed internet looking accordion walkthrough can not seem find 1 explains enough.
a example 1 microsoft on website. here code far:
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> body { padding: 0; margin: 0; } #topmenu { height: 50px; width: 100%; background-color: #cde; display: block; } nav { width: 100%; height: auto; display: block; margin: 0; padding: 0; } nav { text-decoration: none; padding-left: 40px; } nav ul { list-style: none; display: block; margin: 0; padding: 0; background-color: #ccc; } nav ul li { display: block; width: 100%; padding: 20px 0px 20px 0px; border-top: 2px solid #abc; } nav ul ul { height: 0; overflow: hidden; padding-top: 0px; } nav ul ul li { padding-left: 100px; } </style> </head> <body> <div id="topmenu"></div> <nav> <ul> <li><a href="">link</a></li> <li><a href="">link</a> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> <li><a href="">link 4</a></li> <li><a href="">link 5</a></li> <li><a href="">link 6</a></li> <li><a href="">link 7</a></li> </ul> </li> <li><a href="">link</a> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> <li><a href="">link 4</a></li> <li><a href="">link 5</a></li> <li><a href="">link 6</a></li> <li><a href="">link 7</a></li> </ul> </li> <li><a href="">link</a> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> </ul> </li> <li><a href="">link</a></li> <li><a href="">link</a></li> <li><a href="">link</a></li> </ul> </nav> </html>these navigation bars have submenus [nav ul ul] slide out when nav ul li clicked. hoping point me in right direction how go making slide down sub menu on click, or me code.
thought there may have been basic 1 people start using , edit customise themselves.
thanks help.
there no need javascript - may use checkbox instead. check out: http://codepen.io/timpietrusky/pen/clisl
if still want javascript go this:
// asuming, nav-items should trigger slidedown have "#" href // while actual nav-items have urls $('nav li a[href="#"]').on('click', function (e) { // prevent click redirecting e.preventdefault(); // next ul after li clicked if ($(this).hasclass('visible')) { $(this).next('ul').slideup(200).removeclass("visible"); } $(this).next('ul').slidedown(200).addclass("visible"); }); css animation height form 0 auto wont work. see: how can transition height: 0; height: auto; using css?
Comments
Post a Comment