Create custom Navigation Bar using HTML5 and CSS3

Web Project

In this project we wil create a navigation bar using HTML5 and CSS3.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

Files

For this project we will need two files namely

  • index.html
  • style.css

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>MenuBar</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <!-- create an unordered list for menu bar-->
        <!-- create list item for different links -->
        <!-- you can replace # with the required links-->
        <!-- to create submenu we will create another ul-->
        <!-- then we will create li for submenu links-->
        <ul id="menubar">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Links</a>
                <ul id="linklist">
                    <li><a href="#">youtube.com/yusufshakeel</a></li>
                    <li><a href="#">facebook.com/yusufshakeel</a></li>
                    <li><a href="#">plus.google.com/+YusufShakeel</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
        </ul>
    </body>
</html>

style.css


*{
    margin: 0;
    padding: 0;
    font-family: arial;
    font-size: 16px;
}

/*for all ul in #menubar*/
#menubar,
#menubar ul{
    list-style: none;
}

/*float all li in #menubar to left*/
#menubar>li{
    float: left;
}

/*for all a */
#menubar li a{
    display: block;
    height: 20px;
    width: 110px;
    padding: 10px;
    text-decoration: none;
}

/*only for those a that are in #menubar*/
#menubar>li>a{
    background-color: #6494ed;
    color: #fff;
}

/*submenu - #linklist
to be displayed on top of all
initially hidden
*/
#linklist{
    position: absolute;
    background-color: #efefef;
    z-index: 9999;
    display: none;
}

/*only for those a that are in #linklist*/
#linklist>li>a{
    color: #121;
    width: auto;
}

/*for all a*/
#menubar li a:hover{
    background-color: #5884d6;
    color: #fff;
}

/*for #linklist submenu*/
#menubar li:hover #linklist{
    display: block;
}