In this tutorial we will learn to create CSS horizontal drop down menu.
Don't forget to check out our site http://howtech.tv/ for more free how-to videos!
http://youtube.com/ithowtovids - our feed
http://www.facebook.com/howtechtv - join us on facebook
https://plus.google.com/103440382717658277879 - our group in Google+
Drop down menu is a part of almost every web page today. These menus give a nice solution of choosing from the list of items to website visitors as well to Web Developers, so that they don't have to worry about the presentation, as it can be now combined with appealing effects through CSS styling.
Follow this step by step easy tutorial to learn to create Horizontal drop down menu through CSS and see how to give different effects on it.
Step 1 - Main Div of the Menu
First of all, open up the div tag , just after the body tag, and give it an id. This is our main div which will contain all the elements.
After that, open up an unordered list tag and then open up the list tag to define its members. We will insert the hyperlink tag which is called an anchor tag.
Then after this, we will write the heading for the first list. As this would act as the parent category, define it as "Main Category One".
After that, open up an unordered list tag again and then define the child members for the
Main category, in the same manner as we did earlier. This list will be considered as the sub categories of our main menu.
'li''a href="#One"'Main Category 1'/a'
'li''a href="#A"'Sub Category '/a''/li'
'li''a href="#B"'Sub Category '/a''/li'
'li''a href="#C"'Sub Category '/a''/li'
'li''a href="#D"'Sub Category '/a''/li'
Step 2 - Second Main Category
With that done, we will follow the same pattern to make another category in our drop down menu.
We will start with the (li) tag and follow exactly the same pattern as before.
The Code for that would be:
(li)(a href="#Two")Main Category 2(/a)
(li)(a href="#1")Sub Category (/a)(/li)
(li)(a href="#2")Sub Category (/a)(/li)
(li)(a href="#3")Sub Category (/a)(/li)
(li)(a href="#4")Sub Category (/a)(/li)
Step 3 - Global- Navigation Class Explained
Now add the CSS Styling on the drop down menu.
For that, open up the style tag beneath the HTML header and assign "text/ css" in style type.
Then describe the working of the classes, starting with the very first class we used, the global- nav class. This class is responsible for the Main look of the Menu. We have set its width to 135 pixels with left as its default position along with a background color.
Code for that would be:
Step 4 - Anchor Class
After that, define the effects of the anchor tag. In this class, we are actually describing the effect of all the anchor tags inside the "global-nav " class and specifying it a particular color, with a cursor type as pointer and setting its alignment as well.
The Code is:
Step 5 - Contents of Main Menu
With that done, the effect of the Main Menu's contents is described in the global-nav ul class. The background color is specified as white smoke along with zero in padding and margins.
The code for this class would be:
Step 6 - Sub Navigation Class
Next, we have defined the sub navigation menu class. This class will be responsible for the effect of the sub menu. We are using Grey as a background color and aligning it, with 80 pixels for the left side and minus 20 pixels for the top.
Code would be:
Step 7 - Global --Nav Li class
After that, the borders of the list elements are defined in the global --nav li class.
We are setting a solid color effect of border at bottom having a width of 3 pixels.
Its code would be:
border-bottom: #5C87B2 solid;