How can I add another level to this responsive horizontal nav?
Question
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>
1 answers
solution1
1 ACCPTED 2016-06-30 10:21:04
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.