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.


Comments

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.

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

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1