PART 1: How to make responsive menus with drop downs using HTML and CSS only. No Javascript.
Saturday, 7 November 2015
Hello fam? in this post, which happens to be the first post of a two part series, we will be talking about responsive menus. Normally when making responsive and drop down menus, a lot of the functionality is usually handled by JavaScript. Not to say that JavaScript is an overkill, but some browsers might have JavaScript turned off, and if that's the case, then your menu will break apart.
In this first post, we will create the menu and implement the drop-down. The second post will concentrate on making the menu responsive i.e to make it take a different appearance on mobile devices.
I am going to assume that you already know CSS and HTML and more importantly, you know how to link the CSS with the HTML.
Intro to the > CSS selector.
In this tutorial, I will make use of the > css selector. This selector is used to select the direct children of a given parent.
Example.
.div-one > ul{
background-color:red;
}
The above code will select all the ul(unordered lists) that are direct children of the element with a class of .div-one and set their background color to red.
Lets get started.
So basically the menu in an unordered list with the drop-down menus being nested unordered lists. The HTML is fairly simple as you can see below.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Hosting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Your resulting markup should look similar to the image below on a browser.
 |
| Basic HTML Menu. |
CSS.
The first thing we will have to do is remove all the default padding and margins that the html and body elements posses so that the menu occupies all the space it needs. We will also set the default font to sans serif
html, body{
padding: 0;
margin: 0;
font-family: sans-serif;
nav ul ul{
display: none;
}
nav ul li:hover > ul{
display: block;
}
Add the above to your css. If you reload the page on your browser, you should now have the drop-down functionality implemented. The nested unordered list should not be visible but when you hover the mouse cursor over "Services", the nested unordered list appears.
That is actually the trickiest part, the rest is just styling the markup to get a decent look. Now just to get it out of the way, we will have to set the anchor tag's color to inherit from it's parent element and set it's text-decoration to none, this removes the default underline on the anchor tag. So add this to your css.
a{
color: inherit;
text-decoration: none;
}
nav ul{
padding: 0;
margin: 0;
background-color: #232323;
min-height: 50px;
position: relative; }
Next we will target the li items and their corresponding anchor tags.
Starting with the list items, we will give them a display of inline-block. This will simply allow the list items to show horizontally next to each other rather than stay stacked on top of each other.
We then finish off by giving the li items a padding and margin of 0 and a nice background of #232323; and a color od #fff;(white) which the achor tag will now inherit.
nav ul li{
display: inline-block;
padding: 0;
margin: 0;
background-color: #232323;
color: #fff;
}
We then style the anchor tags by giving a margin 0f 0 on top and bottom, then 20px on the left and right sides. This simply ensures that the anchor tags are well spaced. We will set the line-height to 50px so that the anchor tag is horizontally centered within the ul which has a min-height of 50px. The display simply needs to be set to "block" so that the whole area occupied by the anchor tag is clickable.
we then have to set the background color of the anchor tag to #82b541; when it's hovered to give it a nice hover effect. So without further ado, add the following code to your css.
nav ul li a{
padding: 0 20px;
line-height: 50px;
display: block;
}
nav ul li a:hover{
background-color: #82b541;
}
You should now have something similar to the picture below.
So we are now left with the nested ul, which if you try to hover the services link as of now, it will mess the menus design. So to make it appear right below the services link we have to give it (the nested ul) a position of relative and that's all. Add the following to your CSS.
nav ul ul{
position: absolute;
}
Your menu should now have the nested ul appear as shown in the pic below.
All seems well but as you can see, the list items containing anchor tags Web Design, Web Development and Web Hosting are inheriting the display of inline-block and showing next to each other horizontally. So we will have to target the li items inside the nested ul and set their display to block so that they show up stacked on top of each other. Add the following to your CSS to achieve this.
nav ul ul li{
display: block;
}
Your menu should now have a superb drop-down as the one shown in the image below.
You can see the demo here.
In part two of this tutorial we will see how to turn this menu into a responsive one for display on mobile devices. The Project files will be available for download at the end of part two.
By: Unknown | On: Saturday, 7 November 2015 | At: 05:16 |
IN:
