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 MenuIn 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 MenuThis 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 MenuSo, 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.
Similar Reads
Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week
Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De
4 min read
HTML Course | Structure of an HTML Document
HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step. Structure of an HTML DocumentWhat is an HTML Document?HTML is a ma
4 min read
HTML Course | First Web Page Printing Hello World
So far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you un
2 min read
HTML Course | Basics of HTML
Now that you've created your first "Hello World" webpage, it's time to learn some important concepts of HTML. In this chapter, we’ll cover basic elements that add content and structure, including paragraphs, images, lists, attributes, comments, and more. Table of ContentHTML Paragraph HTML Horizonta
6 min read
HTML Course | Starting the Project - Creating Directories
Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your
3 min read
HTML Course | Understanding and Building Project Structure
Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code
3 min read
CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
HTML Course | Creating Navigation Menu
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 MenuIn the last chapter, we have created the entire
6 min read
HTML Course | Building Header of the Website
The header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th
4 min read
HTML Course | Building Main Content - Section 1
The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head
4 min read