How Important is Drop down navigation?
If you surf regularly on web, you may have come across drop down navigation frequently. Drop down menu’s are great way to represent a website. If you have many categories in your website, drop down navigation is the best option to deal with. In this article we are going to learn how to create such navigation menu.
Creating the HTML part of Menu :
Drop down menus are created using lists. A list are wrapped under unordered list. Below is the code of HTML we are going to use.
<li><a href=”#”>Contact us</a></li>
<li><a href=”#”>About us</a></li>
This is our basic navigation menu. It consists of 3 items. You can add more items as per your need. Now if you try how it looks in a browser it will return a bullet list. To customize this you have to do some css.
CSS part of the Menu :
Li : Individual item in our menu such as home,contact etc.
Li: hover ,li: active : When our mouse is on particular menu item
Li: link,li:visited : Individual menu item which has link
- Ul is Basic horizontal box of our menu
- By doing margin and padding to zero we override if there are some default browser settings.
- List-style-type: none hides the bullets
- Li is Individual item in our menu such as home,contact etc.
- Float left places each item to left in the ul box
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
- a: link and a: visited means the css rule applies to the menu items which have links.
- Basically every menu item is linked to some page.
- Here all the rules are applied for single li.
- Border radius property makes the border corners circular.
- As we have set margin: 5 px there is a gap between two items
- A: hover means when a mouse pointer is present on that menu item.
- A:active means when a particular menu item is active or we are into it sub-menu.
- Background-color property changes the background-color when we hover on menu.
In next tutorial we will learn about drop down menu in detail. If you have some doubts you can ask them in comments section. Share this post with your friends if you find it useful.