menu

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>menu</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="hidden-menu" onclick="closeNav()">
<button><i class="fa fa-close"></i></button>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Blog</a></li>
</ul>
</div>
<div class="wrapper">
  <button class="btn-open" onclick="openNav()"><i class="fa fa-bars"></i></button>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/menu-aBoZoM */
body{
  margin:0;
  padding:0;
}
#hidden-menu {
  position: fixed;
  top:0;
  transition: 0.9s;
}
ul {
  width: 200px;
  background: #292929;
  margin:0;
  padding-left:0;
}
li {
  font: 16px Arial;
  padding: 10px 20px;
  list-style:none;
  border-bottom: 1px solid #777;
}
a {
  color: #fff;
  text-decoration:none;
}
a:hover, i:hover, i:active {
  color: #f7484e;
}
#hidden-menu button {
  background: none;
  border:none;
  position: absolute;
  top: 5px;
  left: 160px;
  font-size: 26px;
}
i {
  color: #fff;
}
.wrapper {
  width: 100%;
  height: 100vh;
  background: #ccc;
}
.wrapper button {
  background: none;
  border:none;
  font-size: 26px;
}

/*Downloaded from https://www.codeseek.co/DM_Daria/menu-aBoZoM */
function openNav() {
    document.getElementById("hidden-menu").style.left = "0px";
}
function closeNav() {
    document.getElementById("hidden-menu").style.left = "-200px";
}

Comments