Magearlik 0 Posted July 1, 2016 Report Share Posted July 1, 2016 I was reading the tutorial for creating an accordion here: http://www.w3schools.com/howto/howto_js_accordion.asp Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive Multi Level Horizontal Nav?</title> <!--nav styles--> <style> .show { display: block; } nav { width: 100%; float: left; font-family: 'Oswald', sans-serif; font-size: 100%; color: #252525; border-bottom: 4px solid #0069d4; border-top: 4px solid #0069d4; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; position: relative; } a { text-decoration: none; color: #fff; } li a { height: 60px; line-height: 60px; background-color: #fff; width: 120px; text-align: center; color: #252525; display: block; } li a:hover { background-color: #0069d4; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } /* submenu desktop */ ul.submenu { position:absolute; top:100%; display:none; } ul.submenu li { display:block; } ul.submenu li a { display:block; float:none; font-size: 100%; line-height:40px; height:auto; } ul li:hover ul.submenu { display:block; } /* open close mobile nav*/ #i-nav { display: none; float: right; padding: 20px 20px; } .expand_sub { display: none; float: right; } @media (max-width: 1024px) { nav { width: 100%; padding: 0; margin: 0; } ul li { display:block; } ul { width: 100%; display: none; } li a { width: 100%; text-align: center; float: left; } #i-nav { display: block; } .expand_sub { display: block; } ul.submenu { position:relative; top:0%; display:block; } ul.submenu li { display:block; } ul.submenu li a { width: 100%; float: left; } } </style> <!--google fonts--> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <!--font awesome--> <link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div> <ul id="menu"> <li><a href="#">HOMEPAGE</a><li> <li><a href="#">PROGRAMS</a> <ul class="submenu"> <li><a href="#">Program 1</a></li> <li><a href="#">Program 2</a></li> <li><a href="#">Program 3</a></li> </ul> </li> <li><a href="#">MEMBERSHIP</a><li> <li><a href="#">NEWS</a><li> <li><a href="#">GALLERY</a><li> <li><a href="#">CONTACT</a><li> </ul> </nav> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- script to toggle mobile menu --> <script> $(document).ready(function(){ $('#i-nav').click(function(){ $('#menu').toggleClass('show'); }); }); </script> </body> </html> Quote Link to post Share on other sites
Chikwado 3 Posted July 4, 2016 Report Share Posted July 4, 2016 In the session, if html5. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.