HTML Course | Creating Navigation Menu

Course Navigation

In the last article, we created the entire structure of our website using HTML elements and Tags. Let’s now start building the website in parts.

The first part of the website is the header. So the first thing we will create is the navigation menu in Header of the webpage.

The navigation bar contains:

  • A logo aligned to the left.
  • A menu of five items aligned to the right.

Let’s look at the part of the code of the header menu from our index.html file. Below is the portion of code of the Header menu where the highlighted part is the top navigation bar:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Header Menu of the Page -->
<header>
    <!-- Top header menu containing
       logo and Navigation bar -->
    <div id="top-header">
                  
        <!-- Logo -->
        <div id="logo">
   
        </div>    
          
        <!-- Navigation Menu -->
        <nav>
                       
        </nav>
    </div>    
   
    <!-- Image menu in Header to contain an Image and 
         a sample text over that image -->
    <div id="header-image-menu">
   
    </div>
</header>

chevron_right


The first task is to add the image for the logo. Steps to include image and create logo:

  • Download image by clicking here.
  • Copy and Paste the image to the directory: root/images. Where root is the top directory of our project. In our case it is named as “sample project”.
  • Include the image in the code using img tag.

The second task is to create an unordered-list in HTML inside the nav section of the header menu:

  • Add an unordered list in the navigation menu section with 5 list-items named “Home”, “About Us”, “Our Products”, “Careers”, and “Contact Us”.

The code of the Header section after adding the above two things will look like as shown below:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Header Menu of the Page -->
<header>
          
    <!-- Top header menu containing
         logo and Navigation bar -->
    <div id="top-header">
              
        <!-- Logo -->
        <div id="logo">
            <img src="images/logo.png" />
        </div>    
                  
        <!-- Navigation Menu -->
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>    
  
    <!-- Image menu in Header to contain an Image and 
         a sample text over that image -->
    <div id="header-image-menu">
  
    </div>
</header>

chevron_right


If you now open the index.html file in a browser, you will see the below output:

This looks very different than what we saw in the screenshots of the final project. This is because our website is missing CSS for now. That is we have just created the structure of the navigation bar, to make it look beautiful, we will have to add styles using CSS.

We will design the navigation bar later but first create a file named “style.css” and add it to the folder “sample project/css“. Also include the CSS file created to the “index.html” file by adding the below line in between head tags.

filter_none

edit
close

play_arrow

link
brightness_4
code

<link rel="stylesheet" href="css/style.css">

chevron_right


Before we begin styling the navigation menu, the first thing needed to do is to set the default CSS values for the HTML elements. Copy and Paste the below code in your “style.css” file:

filter_none

edit
close

play_arrow

link
brightness_4
code

html, body{
    height: 100%;
}
      
body{
    margin: 0px;
    padding: 0px;
    background: #64ABD1;
    font-family: 'Roboto';
    font-size: 12pt;
}
          
h1, h2, h3{
    margin: 0;
    padding: 0;
    color: #404040;
}
      
p, ol, ul{
    margin-top: 0;
}
  
p {
    line-height: 180%;
}
  
ol, ul{
    padding: 0;
    list-style: none;
}
      
.container{    
    /* Set width of container to 
        1200px and align center */
    margin: 0px auto;
    width: 1200px;
}

chevron_right


As you can see in the above CSS that we have set the default values for almost every useful HTML element required for the project. Also we have created a CSS class named “container“. This basically defines a container with a width of 1200px and all of the text within it aligned to center. Add this class named container to the <header> tag.

The next step is to assign some id’s to our HTML elements and then use those id’s in the CSS file to style them. Here, we already have assigned id’s to the HTML elements as you can see in the above code. Let’s just begin adding styles to them.

Below is the step by step guide to style the navigation bar:

  • Styling overall Header: There isn’t much styling needed for the header tag. The header tag is just needed to be set to “overflow: hidden” to prevent window from overflowing on browser resize.
    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    header{
          
        overflow: hidden;
    }

    chevron_right

    
    

  • Styling Navigation Bar(#top-header): Set a fixed height of 60px for the navigation bar and align the texts to center.
    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #top-header{
              
        text-align: center;
        height: 60px;
    }

    chevron_right

    
    

  • Styling Logo(#logo): Remove padding from the parent div of logo. Make both parent and image floated towards left and assign widths to them.
    Add the below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #logo{
        float: left;
        padding: none;
        margin: none;
        height: 60px;
        width: 30%;
    }
      
    #logo img{
        width: 60%;
        float: left;
        padding: 10px 0px;
    }    

    chevron_right

    
    

  • Styling Navigation Menu(#menu):
    Add below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #menu{
        float: right;
        width: 70%;
        height: 100%;
        margin: none;
    }
          
    #menu ul{
        text-align: center;
        float: right;
        margin: none;
        background: #0074D9;
    }
          
    #menu li{
        display: inline-block;
        padding: none;
        margin: none;
    }
          
    #menu li a, #menu li span{
        display: inline-block;
        padding: 0em 1.5em;
        text-decoration: none;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 60px;
    }
          
    #menu li a{
              
        color: #FFF;
    }
          
    #menu li:hover a, #menu li span{
        background: #FFF;
        color: #0074D9;
        border-left: 1px solid #0074D9;
        text-decoration: none;
    }

    chevron_right

    
    

The overall CSS code combining all of the above class and id’s for the navigation bar is shown below:

filter_none

edit
close

play_arrow

link
brightness_4
code

/*************************/
/*    Styling  Header    */
/*************************/
header{
      
    overflow: hidden;
}
  
#top-header{
          
    text-align: center;
    height: 60px;
}
  
/****************/    
/* Styling Logo */
/****************/
#logo{
    float: left;
    padding: none;
    margin: none;
    height: 60px;
    width: 30%;
}
  
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}    
  
/***************************/
/* Styling Navigation Menu */
/***************************/
#menu{
    float: right;
    width: 70%;
    height: 100%;
    margin: none;
}
      
#menu ul{
    text-align: center;
    float: right;
    margin: none;
    background: #0074D9;
}
      
#menu li{
    display: inline-block;
    padding: none;
    margin: none;
}
      
#menu li a, #menu li span{
    display: inline-block;
    padding: 0em 1.5em;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
}
      
#menu li a{
          
    color: #FFF;
}
      
#menu li:hover a, #menu li span{
    background: #FFF;
    color: #0074D9;
    border-left: 1px solid #0074D9;
    text-decoration: none;
}

chevron_right


Open the index.html file in browser now, can you see something as shown in the below image. If not, please tally and recheck your code with ours, you must have missed something:

So, we have successfully created the navigation bar for the header of our Website. The next thing is to insert the image and a text over the image just below the navigation bar in the header.



My Personal Notes arrow_drop_up


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.