It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 17 May 2020
Don't deal with complicated mega menus when they are not necessary! You can use the code below, to easily add a beautiful and simple menu to your pages top. Only adjust the styles to fit your needs!
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Lexend+Exa&display=swap" rel="stylesheet">
<style>
body {
background: #F9F8FD;
font-family: 'Lexend Exa', sans-serif;
}
nav {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
border: 2px solid #EBECF1;
border-radius: 30px;
animation: slide-in 1s ease-out;
}
ul {
position: relative;
display: flex;
flex: 1 1 auto;
margin: 0;
padding: 0 30px;
list-style-type: none;
}
ul li:not(:last-child) {
margin-right: 0px;
}
ul li {
border: 2px solid transparent;
border-radius: 5px;
padding: 10px;
transition: background 0.2s;
}
ul li a {
color: #2375D8;
text-decoration: none;
text-transform: uppercase;
transition: color 0.2s;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
display: block;
margin: 12px -12px;
padding: 0;
background: #FFA91B;
border: 2px solid #F7C833;
border-right: 2px solid #F89329;
border-bottom: 2px solid #F89329;
border-radius: 5px;
transition: opacity 0.2s, visibility 0.2s;
}
ul li ul li {
margin: -2px 0 0 -2px;
width: calc(100% - 20px);
line-height: 1.7;
}
ul li ul li a {
color: #2375D8;
}
ul li:hover {
background: #EC4138;
border: 2px solid #F05749;
border-right: 2px solid #E02A21;
border-bottom: 2px solid #E02A21;
}
ul li:hover a {
color: #F9F8FD;
}
ul li:hover ul {
visibility: visible;
opacity: 1;
box-shadow: 0px 3px 5px 2px #EBECF1;
}
ul li:hover ul li a {
color: #F9F8FD;
}
@keyframes slide-in {
0% {
top: -50px;
}
40% {
top: 20px;
}
70% {
top: 10px;
}
100% {
top: 15px;
}
}
</style>
<nav>
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li>
<a href="#0">Clients</a>
<ul>
<li><a href="#0">Burger King</a></li>
<li><a href="#0">Southwest Airlines</a></li>
<li><a href="#0">Levi Strauss</a></li>
</ul>
</li>
<li>
<a href="#0">Services</a>
<ul>
<li><a href="#0">Print Design</a></li>
<li><a href="#0">Web Design</a></li>
<li><a href="#0">Mobile App Development</a></li>
</ul>
</li>
<li><a href="#0">Contact</a></li>
</ul>
</nav><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!