HTML Course | Creating Navigation Menu

Last Updated : 24 Nov, 2024

A navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML.

Course Navigation

HTML Course : Creating Navigation Menu

In the last chapter, we have 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 the 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:

HTML

<!-- 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>

Steps To Create Navigation Menu

Step 1: The first task is to add the image for the logo.

Steps to include image and create logo:

Download image logo 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 “HTML Course”.
Include the image in the code using img tag.

<div id="logo">
    <img src="images/logo.png" />
</div>

Step 2: Create an unordered-list in HTML.

The second task is to create an unordered-list in HTML inside the navigation 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

HTML

<!DOCTYPE html>
<!-- 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>
            <div id="menu">
                <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>
            </div>
        </nav>
    </div>
    <!-- Image menu in Header to contain an Image and 
         a sample text over that image -->
    <div id="header-image-menu">

    </div>
</header>

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

HTML Course : Creating Navigation Menu

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 “HTML-Course/CSS“. Also include the CSS file created to the “index.html” file by adding the below line in between head tags.

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

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.

CSS

html, body{
    height: 100%;
}
    
body{
    margin: 0px;
    padding: 0px;
    background: #FFFFFF;
    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;
}

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.

Style the Navigation Bar

Step 1: 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.

CSS

/*Add the below code to style.css*/

header{
    overflow: hidden;
}

Step 2: Styling Navigation Bar(#top-header)

Set a fixed height of 60px for the navigation bar and align the texts to center.

CSS

/*Add the below code to style.css*/

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

Step 3: Styling Logo(#logo)

Remove padding from the parent div of logo. Make both parent and image floated towards left and assign widths to them.

CSS

/*Add the below code to style.css*/

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

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

Step 4: Styling Navigation Menu(#menu)

CSS

/*Add the below code to style.css*/

#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;
}

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

CSS

/*************************/
/*    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;
}

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:

HTML Course : Creating Navigation Menu

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.

HTML Course | Building Header of the Website

harsh.agarwal0

Improve

Article Tags :

HTML Course | Creating Navigation Menu

Steps To Create Navigation Menu

Step 1: The first task is to add the image for the logo.

Step 2: Create an unordered-list in HTML.

Style the Navigation Bar

Step 1: Styling overall Header

Step 2: Styling Navigation Bar(#top-header)

Step 3: Styling Logo(#logo)

Step 4: Styling Navigation Menu(#menu)

Similar Reads

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5

HTML 5 MathML

HTML Course

Thank You!

What kind of Experience do you want to share?