Skip to main content

How to create a dropdown menu using CSS3 and HTML5

In this tutorial i am gonna teach you how to create a dropdown navigation menu using css3 and HTML5. Yes, with the help of the advanced selectors of HTML5 we can create a simple navigation menu and then we can throw in some of the amazing effects using CSS3. By using your own creativity in CSS3 you can design your navigation menu however you want. And these things are possible without any javascript and background images.Download source code.



In my this example i am going to create a navigation menu as it can be seen in the Image. with two level of submenu. So we first write the simple HTML5 code so that we can create the basic structure of the navigation menu.

<nav>

   <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Tutorials</a>

     <ul>

      <li><a href="#">Web Designing</a>

       

      </li> 

      <li><a href="#">Web Development</a>

      <ul>

        <li><a href="#">PHP</a></li>

        <li><a href="#">.NET</a></li>

       </ul>

      </li>

     </ul>

    </li> 

    <li><a href="#">PHP</a></li>

    <li><a href="#">CSS</a></li>

   </ul>

  </nav>

After this code your webpage will be looking like.




Now we have to throw in some CSS so let's go ahead and see. so Now we have to hide all the child and let them look like the Navigation menu so

                  nav ul ul {

     display: none;

    }

  nav ul li:hover > ul {

     display: block;

    }
So this will hide its child menus and there will only be list which will be vertically. And on hover the parent menu it will show the Child submenu.We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.
                    nav ul li {

     float: left;

     color:#fff;

    }

  nav ul li:hover {

     background: #eee;

    }

  nav ul li:hover a {

     color: #444;

    }

 

  nav ul li a {

     display: block;

     padding: 10px 40px;

     color: #eee;

     text-decoration: none;

    }


Now we are going to add css to each List item(<li>) of the sub-menus like their positioning,their padding and their ankor color,background color.

nav ul ul {

     background: #eee;

     border-radius: 0px;

     padding: 0;

     position: absolute;

     top: 100%;

    }

  nav ul ul li {

     float: none;

     border-top: 1px solid #444;

     border-bottom: 1px solid #444;

     position: relative;

    }

  nav ul ul li a {

     padding: 8px 40px;

     color: #fff;

    } 

  nav ul ul li a:hover {

     background: #888;

     color:#fff;

    }
Now we have styled the Menus and the Sub-menus, Now we have to design the Sub-sub-menus. Actually they will be inheriting each and every property from their parents we just have to position them  Absolutely to the right(left 100%).

               nav ul ul ul {

     position: absolute; left: 100%; top:0;

    }





Now we are done.
DownLoad This Navigation Menu.
 You just created a Navigation menu by your self. With only CSS3 and HTML5.Now you can put your own creativity like color and anything else you want.Hope you like this post.


Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...
2 comments
Read more