nice menu

In this example below you will see how to do a nice 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>nice menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Contacts</li>
		<li>Magic</li>
		<li>Settings</li>
	</ul>
</nav><div class="bodyContainer">
	<h1>Navigation.</h1>
	<h4>By <a href="https://www.linkedin.com/in/giorgioacquati/">Giorgio Acquati.</a></h4>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio modi eligendi eveniet ullam maiores esse dolor illo voluptatum placeat doloribus obcaecati ab cum, magnam officia quis explicabo vel mollitia enim.</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, nam quas? In sint enim libero repellendus? Quis dicta, repellendus consequatur ratione, asperiores ut incidunt aperiam voluptates tempora cum sunt ex!</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam cupiditate, libero odio quam deserunt expedita excepturi aliquid odit, error a quas. Ullam inventore earum sed eaque natus sequi, distinctio minus?</p>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis voluptatem delectus harum quis minus sed optio, laudantium, qui quo incidunt vitae, doloremque nostrum quidem magnam facilis explicabo impedit nemo. Dolore.</p>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet possimus incidunt laboriosam nostrum officiis quaerat deleniti quisquam neque? Similique, assumenda saepe. Consequatur reiciendis atque eligendi quia veniam iusto minus praesentium!</p>
</div>
	<div class="hamburger">
		<span></span>
		<span></span>
		<span></span>
	</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/nice-menu-ZoBbNY */
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 24px;
  font-family: sans-serif;
}

body {
  background-color: #00c7be;
}

nav {
  position: fixed;
  height: 100%;
  width: 65%;
}
nav::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
nav > ul {
  width: 80%;
  display: inline-block;
  vertical-align: middle;
}
nav > ul > li {
  display: block;
  text-transform: uppercase;
  line-height: 2;
  font-size: .8rem;
  padding-left: 30%;
}

.hamburger {
  left: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: .7rem;
  position: fixed;
  z-index: 2;
  cursor: pointer;
}
.hamburger > span {
  display: block;
  background-color: #262626;
  height: 20%;
  margin-bottom: 20%;
}

.bodyContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fafafa;
  color: #262626;
  padding: 4rem;
  overflow: auto;
  transition: .2s ease;
}
@media screen and (orientation: portrait) {
  .bodyContainer {
    padding: 4rem 1rem;
  }
}
.bodyContainer a {
  color: #00c7be;
}
.bodyContainer > p {
  padding-bottom: 1em;
}
.bodyContainer > h4 {
  margin: 1em 0;
}

@media screen and (orientation: portrait) {
  nav.active + .bodyContainer {
    transform: translateX(55%) scale(0.8);
    box-shadow: 0 0 30px 5px rgba(38, 38, 38, 0.3);
  }
}
@media screen and (orientation: landscape) {
  nav.active + .bodyContainer {
    transform: translateX(35%) scale(0.8);
    box-shadow: 0 0 30px 5px rgba(38, 38, 38, 0.3);
  }
}


/*Downloaded from https://www.codeseek.co/DM_Daria/nice-menu-ZoBbNY */
$(".hamburger").click(function() {
	$("nav").toggleClass("active");
})

Comments