CSS Drop Down Menu Tutorial
This week I wanted to intergrate a tutorial in my blog. My tutorial will be on HTML5 and CSS Drop Down Menu. I will be throwing CSS3 properties and you can create a design.. Follow this tutorial to see the step by step process of building your own dropdown menu.
First, after starting your HTML document ( I usually start mine in Dreamweaver CS4 ).
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
I am going to use HTML5 for the navigation menu in a <nav> tag, then add the primary navigation links in a simple unordered list.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Week One</a></li>
<li><a href="#">Week Two</a></li>
<li><a href="#">Week Three</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
The first sets of sub-menus can then be added under the “Tutorials” and "Blog” links, each one being a complete unordered list inserted within the <li> of its parent menu option.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Week One</a></li>
<li><a href="#">Week Two</a></li>
<li><a href="#">Week Three</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.
So far this leaves us with a nice layout of links with the sub-menus having a clear relation to their parents.
/>
The CSS Styling
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
Next, we are going to have to style our newly developed drop down menu. Let’s get started with the CSS stylesheet by getting the basic dropdown functionality working. With CSS style we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any <ul>’s within a <ul> with the display:block; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the <li>. The > child selector makes sure only the child <ul> of the ,li> being hovered is targeted, rather than all sub menus appearing at once.
nav ul {
background:#F6A4D5;
background: linear-gradient(top, #F6A4D5 0%,#A46582 100%);
background: -moz-linear-gradient(top, #F6A4D5 0%, #A46582 100%);
background: -webkit-linear-gradient(top, #F6A4D5 0%,#A46582 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 3px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
We can then start to style up the main navigation menu with the help of CSS3 properties as using gradients, border radius and a box shadow. Adding position:relative; will allow us to absolutely position the sub menus according to this main navigation, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.
nav ul li {
float: left;
}
nav ul li:hover {
background: #F6A4D5;
background: linear-gradient(top, #D02090 0%, #FF34B3 50%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 50%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 50%);
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
The main navigation bar now has all of it's styles, but the sub menus still need some work.
They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the <ul>.
The <li>’s of each <ul> in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling, so all they need is to be positioned absolutely to the right (left:100%(percent)) of the relative position of the parent <li>.
The Completed Pure CSS Dropdown Menu
Here you can view the finished product in the browser:
No comments:
Post a Comment