HTML Course : Creating Navigation Menu
Last Updated :
10 Jul, 2023
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 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
<!DOCTYPE html>
<header>
<div id="top-header">
<div id="logo">
</div>
<nav>
</nav>
</div>
<div id="header-image-menu">
</div>
</header>
|
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 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>
<div id="top-header">
<div id="logo">
<img src="images/logo.png" />
</div>
<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>
<div id="header-image-menu">
</div>
</header>
|
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.
<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{
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.
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:
CSS
header{
overflow: hidden;
}
|
- 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:
CSS
#top-header{
text-align: center;
height: 60px;
}
|
- 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:
CSS
#logo{
float: left;
padding: none;
margin: none;
height: 60px;
width: 30%;
}
#logo img{
width: 60%;
float: left;
padding: 10px 0px;
}
|
- Styling Navigation Menu(#menu):
Add below code to style.css:
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
header{
overflow: hidden;
}
#top-header{
text-align: center;
height: 60px;
}
#logo{
float: left;
padding: none;
margin: none;
height: 60px;
width: 30%;
}
#logo img{
width: 60%;
float: left;
padding: 10px 0px;
}
#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:
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.
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...