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>
