Create a Drop Down List For any Horizontal Menu
A
website's Header section which includes mainly the logo and navigation
menu, is the region that attracts a visitor the most. It's the first
section of your entire layout that catches reader attention. Therefore
with time designers introduced non-traditional versions of drop down menus using Jquery
and CSS3. Most of you probably know how to customize a menu but you
often find it difficult to add Jquery effects to an existing menu, add
CSS3 transitions for rollover effects and especially to turn a simple
horizontal menu into a multi-level drop down menu.
In order to understand the core basics of a Menu's HTML and CSS
structure we will be publishing series of tutorials on this topic to
make it extremely easy for most of you to create and design Menus by
your own. What's different about this Series?
In
this series we will release some of our project codes for the first
time. You wont find simple HTML menus here. You will learn how to create
a fancy drop down menu, convert a horizontal menu into drop down, add
jquery smooth sliding effect, add CSS3 animation effects and much more.
If you were able to understand how a menu is structured and designed
then you will surely become a better Web designer. These tutorials are
not limited to Blogger and Wordpress users but can be implemented in any
platform.
Navigation Menu Tutorials
2. Convert any Horizontal Menu into a Drop Down Menu
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
6. Surprise...
Finding the Menu Class and ID
In CSS every HTML tag is styled using either a class that starts with a dot(.) or an ID that starts with a hash (#). The only difference between a class and ID is that a class can be used multiple times but an ID can be used only once.Note: You don't need to learn Code structure just give it a quick view to understand the basics. Your job is to look at your Menu code inside your blog or website and find out its class name. This is all you need to do.
Your Menu will consist of two parts i.e CSS (stylesheet) and HTML. Since we are designing a Menu so its structure would look slightly similar to this one:
CSS Part:
.navigation {In the above code the Menu has a class name called: .navigation . So in the HTML code which will cause the menu to appear the class will be called using the attribute class="navigation"
width:1000px;
margin:0 auto;
height:34px;
}
.navigation ul {
list-style:none;
margin:0;
padding:8px 0 0 0;
}
.navigation ul li {
float:left;
color:#FFFFFF;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
}
.navigation ul li a {
color:#FFFFFF;
padding:8px 30px 10px 30px;
border-right:1px solid #ffffff;
}
.navigation ul li a:hover {
background:#060505;
color:#ffffff;
}
HTML Part:
<div class="navigation">This exact same concept is applied to all menus, only the class names and the code structure differs.
<ul>
<li ><a href="#">home</a></li>
<li><a href="#">about us</a>
<ul>
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li><a href="#">services</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#"> Sitemap</a></li>
</ul>
</div>
Adding the Drop Down Container
We Assume that your menu contains simple horizontally aligned links list and you do not have a Colum that drops vertically downwards on mouse hover. In order to create this column all you need to do is insert the following code inside the CSS part of your menu and it will play wonders!.navigation li ul {Make these changes:
position: absolute;
left: -999em;
width: 160px;
margin: 19px 0 0 0;
padding: 0;
}
.navigation li:hover ul {
left: auto;
}
.navigation li li a {
background: #C70D0D;
width: 120px;
color: #FFFFFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
.navigation li li a:hover {
background: #060505;
color: #FFFFFF;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
border-bottom: 1px dotted #060505;
}
.navigation li ul ul {
margin: -35px 0 0 145px;
}
.navigation li:hover ul ul {
left: -999em;
}
.navigation li ul li:hover ul {
left: auto;
}
- Replace navigation with your Menu Class name
- To change drop down container colour in active mode edit #C70D0D for background and #FFFFFF for font colour
- To change drop down container colour on mouse hover edit #060505for background and #FFFFFF for font colour
Creating Multi Level Drop Down List
You are all done with the design work. Now you just need to create the list in HTML part. Any tab or link in your menu will have this structure:<li><a href="#">LINK TEXT</a> </li>To add a drop down list to this tab all you need to do is to paste the following code just before the closing li tag. See below:
<li><a href="#">LINK TEXT</a>To add a second drop down list within this vertical list, simply use the same concept. I will add the second vertical list after the tab: "FIRST LIST 2"
<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a></li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>
</li>
<li><a href="#">LINK TEXT</a>Rest follows the same pattern.
<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a>
<ul>
<li><a href="#">SECOND LIST 1</a></li>
<li><a href="#">SECOND LIST 2</a></li>
<li><a href="#">SECOND LIST 3</a></li>
</ul>
</li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>
</li>
No comments:
Post a Comment