<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Simple Responsive nav</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<button class="fa fa-bars"></button>
<ul id="main-nav">
<li>item 1</li>
<li>item 2<i class="fa fa-caret-down"></i>
<ul id="second-nav">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-J0hn-/simple-responsive-nav-WRdKeB */
body{
font-family:sans-serif;
text-transform:capitalize;
}
button:focus{
outline:0;
}
ul{
list-style:none;
padding:0;
margin:0;
color:white;
}
li{
cursor:pointer;
margin:0;
}
li:hover{
background:gray;
}
#main-nav{
text-align:center;
display:flex;
}
#main-nav li{
flex:1;
padding:.70em 4em;
}
i{
margin-left:1em;
}
nav {
position:relative;
background:black;
padding:0;
margin:0;
}
.fa-bars{
color:white;
background:none;
border:0;
padding:1em;
margin:0 auto;
display:none;
}
#second-nav{
position:absolute;
top:100%;
left:25%;
right:50%;
display:none;
background:black;
}
#second-nav.open{
display:block;
}
#second-nav li{
padding:.70em 4em;
display:block;
text-align:center;
}
@media(max-width:768px){
nav{
position:relative;
width:50px;
}
.fa-bars{
cursor:pointer;
text-align:center;
display:block;
}
#main-nav{
position:absolute;
display:none;
text-align:left;
width:200px;
background:black;
}
#main-nav.show{
display:block;
}
#second-nav{
position:absolute;
right:0;
left:100%;
top:25%;
z-index:100;
width:200px;
}
.fa-caret-down{
transform:rotate(-90deg);
}
.fa-caret-up{
transform:rotate(-90deg);
}
}
/*Downloaded from https://www.codeseek.co/-J0hn-/simple-responsive-nav-WRdKeB */
$(document).ready(function(){
$('#main-nav li:nth-child(2)').on('click',function(){
var arrow =$(this).children().first();
$('#second-nav').toggleClass('open');
if($(arrow).hasClass('fa-caret-down')){
$(arrow).removeClass('fa-caret-down').addClass('fa-caret-up');
} else if($(arrow).hasClass('fa-caret-up')){
$(arrow).removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
$('button').on('click',function(){
$('#main-nav').toggleClass('show');
})
});