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

1. How To Create a Drop Down Menu?

2. Convert any Horizontal Menu into a Drop Down Menu

3. Add CSS3 Transitions To a Drop Down Menu - Coming Soon..

4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..

5. Add Jquery Slide Toggle Effect To a Drop Down Menu - Coming Soon..

6. Surprise...

 

Play with our HTML Editor

 

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 {
    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;
}

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"

HTML Part:

<div class="navigation">
            <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>

 

This exact same concept is applied to all menus, only the class names and the code structure differs.

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 {
    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;
}

Make these changes:

• 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>

<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>

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"

<li><a href="#">LINK TEXT</a>

<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>

 

Rest follows the same pattern.

Practice Now

You can use the following simple horizontal menus that we designed two years back. You need to add the effect precisely using our HTML editor for interesting practice:

• 30 Horizontal Menus Collection

Need help?

The above tutorial may seem a lot techy for those who just gave it a quick view but didn't try understanding it. This tutorial is extremely useful in clarifying several design concepts. A little careful read could turn you into a next passionate Web designer. If you needed any help please let me know. The objective behind this post was to enable you to customize your existing menus without discarding them. We hope this proves helpful for a great majority of new comers. Peace and blessings pals.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 5/29/2012