I am trying to build a responsive navigation for a website with an extra level. How would I update the following html/css/javascript to achieve this? I know this is a big ask but I am hoping someone out there knows the answer. Here is my code:
<!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;
}
a
{
text-decoration: none;
color: #fff;
}
li a
{
height: 60px;
line-height: 60px;
float: left;
display: block;
background-color: #fff;
padding: 0 20px;
color: #252525;
}
li a:hover
{
background-color: #0069d4;
color: #fff;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#i-nav
{
display: none;
float: right;
padding: 20px 20px;
}
@media (max-width: 1024px)
{
nav
{
width: 100%;
padding: 0;
margin: 0;
}
ul
{
width: 100%;
display: none;
}
li a
{
width: 100%;
padding: 0;
margin: 0;
text-align: center;
}
#i-nav
{
display: block;
}
}
</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>
<li><a href="#">HOMEPAGE</a><li>
<li><a href="#">PROGRAMS</a>
<!-- add extra level here
<ul>
<li><a href="#">Program 1</a></li>
<li><a href="#">Program 2</a></li>
<li><a href="#">Program 3</a></li>
<li><a href="#">Program 4</a></li>
<li><a href="#">Program 5</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(){
$('ul').toggleClass('show');
});
});
</script>
</body>
</html>
i am feeling charitable today ...but in the future please try making a code by yourself and then post here if it doesn't work after a few attempts
check here jsfiddle
gave a class .submenu to the second level ul
in the future i suggest not using float:left on li a , but use inline-block on top level li and block on submenu li
css code added :
ul.submenu {
position:absolute;
top:100%;
display:none
}
ul.submenu li a {
display:block;
float:none
}
nav li {
display:inline-block;
}
ul.submenu li {
display:block;
}
ul li:hover ul.submenu {
display:block
}
nav li {
position:relative
}
also for mobile menu : jsfiddle
code added to media query :
ul.submenu {
position:relative;
top:0%;
display:block;
}
ul.submenu li {
display:block;
}
ul.submenu li a{
float:left;
width:100%;
}
in the future don't use line-height and also height on li a ;
and plus. in the future . PROVIDE AN EXAMPLE OF WHAT YOU HAVE TRIED FOR YOUR SPECIFIC PROBLEM !
otherwise you will get comments like the one from Paulie. and you won't get answers.
let me know if this code did the trick