INTRODUCTION
THE MECHANICS BEHIND
Welcome to a tutorial on how to create a simple CSS drop down menu. Yep, there are a ton of these “menu plugins” that you can download and use… But just what is happening behind it? Do you really need to load an entire 3rd party library and complicated Javascript to create a menu?
Well, the truth is, you can actually build a simple Drop-down menu with just pure CSS – This guide will walk you through the steps on how to create one yourself, so you don’t have to “trial-and-error” a hundred different plugins to get a good one. Read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Step 1 | Step 2 | Step 3 |
Extra | Extra | Closing |
THE HTML
Yep, the so-called “menu” actually starts from an unordered list – Which we will transform into a menu with CSS.
THE CSS
/* [LIST TO MENU] */
#page-nav ul {
list-style: none;
padding: 0;
margin: 0;
background: #555;
}
#page-nav ul li {
position: relative;
display: inline-block;
}
#page-nav ul li:hover {
background: #af3523;
}
#page-nav a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
THE RESULT
What kind of magic is this?
- We simply remove the
list-styleand set the list items to display ininline-block– That will pretty much transform the list into a horizontal bar. - The rest is pretty much just some cosmetics to make it look more like a legit menu – Padding and background color change on hover.
- The
position: relativeon the list item will be used to “guide” the position of the drop down menu later.
STEP 2
ADDING THE DROP DOWN
Well, we have a horizontal menu bar after the first step. So now, let us add a drop-down sub-menu to it.
THE HTML
To add a sub-menu, we simply put another unordered list into the list item itself.
THE CSS
/* [DROP DOWN] */
#page-nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #444;
}
#page-nav ul ul li {
display: block;
width: 100%;
}
#page-nav ul li:hover > ul,
#page-nav ul li ul:hover {
z-index: 99;
display: block;
}THE RESULT
That’s it. All we have to do is to:
- Hide the sub-menu by default with
display: none. - Show the sub-menu when the mouse hovers over either the main menu item, or sub-menu itself –
display: block. - A
position: absoluteandtop: 100%on the sub-menu will position it nicely under the main list item.
STEP 3
ANIMATION
Actually, we already have a complete drop-down menu at this point. But for the perfectionist code ninjas who want more, here is how we add a little animation magic to it.
THE CSS
/* [DROP DOWN] */
#page-nav ul li:hover > ul,
#page-nav ul li ul:hover {
z-index: 99;
display: block;
animation: appear 0.3s; /* attach animation */
animation-timing-function: ease;
}
/* [ANIMATION] */
@keyframes appear {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}THE RESULT
With modern CSS, adding animations is actually a breeze:
- Start by defining your
keyframes. I have create one that does 2 effects – Fade in withopacity, and slide in withtranslateX. - Attach the animation effect to the hover.
It’s that simple. Feel free to play around with the animation.
EXTRA
RESPONSIVE MENU
Before we end this guide, this is a small but very important extra section – We live in an age of mobile devices, and it will be wise to add some responsive design elements to support the smaller screen sizes.
THE CSS
/* [RESPONSIVE] */
@media only screen and (max-width: 768px) {
/* Break into vertical menu */
#page-nav ul li {
display: block;
}
/* Slow down animation */
#page-nav ul li:hover > ul,
#page-nav ul li ul:hover {
animation: appear 0.7s;
}
}THE RESULT
This is a rough, but clever little way to turn it into a responsive menu – All we have done here is to break the menu into a vertical one with display: block, and the rest remains the same.
EXTRA
DOWNLOAD & MORE
That’s it for the code and examples, here is the download link as promised – Plus a small extra that may be useful to you.
HAMBURGER MENU
Need a hamburger button to go along with your menu? Here is another guide that I have written:
2 Steps Simple Responsive Pure CSS Hamburger Menu
DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that this has helped you to build a better website, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!
The post 3 Steps Simple CSS Drop Down Menu appeared first on Code Boxx.
