hover slide down nav

In this example below you will see how to do a hover slide down nav with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>hover slide down nav</title>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/65047fd1e4.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
  <ul id="sub_nav">
     <div>
     <li>1</li>
     <li> 2</li>
     <li><a href="#">3</a></li>
    </div>
    <div id="main_nav"> 
    <ul>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
    </div>
  </ul>
  
</nav>
<div id="wrap">
  <a class="show" href="#">hover to reveal
  
    <div class="actions">
      <i class="fa fa-bicycle"></i> 
      <i class="fa fa-envelope-o"></i>
      <i class="fa fa-paper-plane-o"></i>
    </div>
  </a>
  <br> stuff stuff
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/hover-slide-down-nav-gLyOVR */
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}
nav {
  width: 250px;
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  color: #fff;
}
nav li {
  padding: 20px 20px 24px 20px;
}
/*nav:hover {
    left: 0;
    transition: left 2s ease;
}*/
#sub_nav:hover div#main_nav {
  left: 70px;
  transition: left 2s ease;
}
nav a {
  color: #fff;
  text-decoration: none;
}
#main_nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 220px;
  height: 200px;
  display: block;
  background-color: green;
}
nav > ul > div#main_nav {
  z-index: 1;
  position: fixed;
  left: -220px;
  transition: left 2s ease;
  top: 0;
}
nav > ul > div {
  background-color: purple;
  z-index: 10;
  position: fixed;
  margin: 0;
  height: 100%;
  list-style: none;
  width: 50px;
  left: 0;
  padding: 10px;
}
#main_nav li {
  display: block;
}
#sub_nav {
  transition: left 2s ease;
}
#sub_nav li {
  display: block;
  vertical-align: top;
  font-size: 18px;
}
#sub_nav li a {
  border-bottom: 2px solid #fff;
  width: 100%;
}
#sub_nav li ul,
#sub_nav {
  margin: 0px;
  padding: 0px;
}
#wrap {
  padding: 100px;
  height: 1000px;
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #7db9e8 100%);
}
a {
  color: #fff;
  text-decoration: none;
  transition: all 2s;
}
i {
  padding: 3px 10px;
  font-size: 20px;
}
.actions {
  display: none;
  left: -999px;
  position: fixed;
}
.show:hover .actions {
  display: inline-block;
  left: 250px;
}
.show {
  position: fixed;
}

Comments