Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create drop down menu with CSS3

Lets learn today the process to create a drop down menu in CSS3 and with the help of HTML5 as well.

Making use of the CSS3 features, we will try to come with animating the hover states and drop-downs. We are commonly using javascript these days and CSS3 features effects act exactly much on the similar lines where we have a file whose structure is very simple. You just need an index.html and a style.css file where in the css styles will be stored.

The below figure displays the preview of what we`ll build today:

Result of article code

Figure 1: Result of article code

It begins with the HTML structure. That`s the head part:

Listing 1: Code displaying the head part in HTML

<!doctype html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <title>HTML5 / CSS3 Drop-Down Menu</title>
    <meta name="description" content="">
     
    <link rel="stylesheet" href="style.css">
     
    <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
     
</head>

As far as the body part is concerned, we'll add the html code for the nav menu. Each and every ul list that is present inside a li is a drop-down menu. We have added added “>>” to each parent li so as to display the hierarchy. The code creates right double angle quotes to element.

Listing 2: Code displaying the Body Part in HTML

<body>
<nav id="nav">
    <ul id="navigation">
        <li><a href="#" class="first">Home</a></li>
        <li><a href="#">Services »</a>
            <ul>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Logo Design</a></li>
                <li><a href="#">Identity & Branding »</a>
                    <ul>
                        <li><a href="#">Business Cards</a></li>
                        <li><a href="#">Brochures</a></li>
                        <li><a href="#">Envelopes</a></li>
                        <li><a href="#">Flyers</a></li>
                    </ul>                 
        <li><a href="#">Portfolio »</a>
            <ul>
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Photography</a></li>
                <li><a href="#">Architecture</a></li>
                <li><a href="#">Calligraphy</a></li>
                <li><a href="#">Film »</a>
                    <ul>
                        <li><a href="#">John Carter</a></li>
                        <li><a href="#">The Avengers</a></li>
                        <li><a href="#">The Amazing SpiderMan</a></li>
                        <li><a href="#">Madagascar 3</a></li>
                    </ul>                     
                </li>
                <li><a href="#">Graffity </a></li>
            </ul>             
        </li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>
 
</body>
</html>

It’s time now to stylize the navigation where in we`ll start with the styles for the main nav. Depending on the need, the styles for #nav id can be removed which is just used so as to centre the menu. You can alter them to fit your design.

Listing 3: Code displaying the stylization of the menu navigation

/* Main Navigation */
#nav {
    position:relative;
    width:620px;
    margin:0 auto; 
    margin-top:50px;
    padding:10px;
}
 
ul#navigation {
    margin:0px auto;
    position:relative;
    float:left;
    border-left:1px solid #c4dbe7;
    border-right:1px solid #c4dbe7;
}
 
ul#navigation li {
    display:inline;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid #c4dbe7;
    border-bottom:2px solid #c4dbe7;
}
 
ul#navigation li a {
    padding:10px 25px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border-right:1px solid #fff;
    border-left:1px solid #C2C2C2;
    border-top:1px solid #fff;
    background: #f5f5f5;
     
    -webkit-transition:color 0.2s linear, background 0.2s linear;   
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;    
    transition:color 0.2s linear, background 0.2s linear;   
}
 
ul#navigation li a:hover {
    background:#f8f8f8;
    color:#282828;
}
 
ul#navigation li a.first {
    border-left: 0 none;
}
 
ul#navigation li a.last {
    border-right: 0 none;
}
 
ul#navigation li:hover > a {
    background:#fff;
}

It can be clearly noticed that ul#navigation li has some transition styles that are used to create a nice fading effect on hover.

Listing 4: Code displaying the stylization of the drop-down menus:

	/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important, 
being the ones which make the drop-down just to appear on hover */
    visibility:visible;
    opacity:1;
}
 
ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
/*the next 2 styles are very critical and important, 
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
/* css3 transitions displaying for smooth hover effect */
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}
 
ul#navigation ul {
    top: 43px;
    left: 1px;
}
 
ul#navigation ul li ul {
    top: 0;
    left: 181px; /* strong related to width:180px; from above */
}
 
ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}
 
ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

We now have the menu stylized and the developing process if finished and the menu can now be used in your own projects. You will be coming across some of the compatibility issues related to IE browser making use of CSS3. However we still have the menu that is functional and is proved to be a reliable substitute to the menus built in javascript thereby making IE functional as well.

Conclusion

This brings us to the end of this article where we made use of CSS3 along with HTML to come up with attractive dropdown menus explaining on how to create header, body, styling the menu bars and finally the dropdown menu.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login