Simple Responsive nav

In this example below you will see how to do a Simple Responsive nav with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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');
  })
   
});

Comments