slidedown fixed menu

In this example below you will see how to do a slidedown fixed menu with some HTML / CSS and Javascript

Forked from michelle currier's Pen zxaRJM.

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
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>slidedown fixed menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

      <nav>
            <ul id="sub_nav">
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
            </ul>
            <ul id="main_nav">
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">text</a></li>
              <li class="menu_icon">=</li>
            </ul>
    </nav>
    <div id="wrap">
      
      stuff
      <br>
      stuffity stuff
      
    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/slidedown-fixed-menu-VYdQgY */
body {
  margin: 0;
  padding: 0;
}
nav {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: -100px;
  color: #fff;
  background-color: brown;
  transition: top 1s ease;
}
nav.down {
  top: 0;
  transition: top 2s ease;
}
nav a {
  color: #fff;
  text-decoration: none;
}
nav li.menu_icon {
  float: right;
  margin-right: 30px;
  font-size: 40px;
  font-weight: bold;
}
#main_nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 40px;
  display: inline-block;
  background-color: green;
}
#main_nav li {
  display: inline-block;
}
#sub_nav {
  margin: 0;
  height: 100px;
  background-color: purple;
  list-style: none;
}
#wrap {
  padding-top: 40px;
  height: 1000px;
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #7db9e8 100%);
}
#wrap .isOpen {
  top: 100px;
  transition: top 2s ease;
}


/*Downloaded from https://www.codeseek.co/mush_el/slidedown-fixed-menu-VYdQgY */
$('.menu_icon').on('click', function() {
  $('nav').toggleClass('down');
});
$('.menu_icon').on('click', function() {
  $('#wrap').toggleClass('isOpen');
});

Comments