In this tutorial we will show you how to make a navigation bar in HTML, most of times, the HTML coders or webpage designer gets a problem to how we make a navigation bar in a website that’s present on top of the website.
In general, it’s just a row having links as text on it and by clicking on these links we gets more information what we want.
Also, it is a method used by programmers to combine many webpages in a website to provide proper information to users and all the information is related to each other.
In this session, we will show you that how you are able to make a navigation bar in html.
Step By Step Guide On How To Make A Navigation Bar In HTML :-
As, navigation bar has many types, we want to say here that there are many ways to make a navigation bar.
But here we use the simplest method that is with the help of list tags, as this is the base method and mostly used by HTML designer.
We hope that it may help you that how navigation bar is created and about it’s working. With the help of the list method, you will also understand how the next methods work and in which way all these are related.
Here we give an example of creating a navigation bar in html with the help of some HTML codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ul{
list-style-type: none;
height: 100px;
width: 1000px;
margin: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.ul li{
float: left;
}
.ul li a{
background-color: black;
color: white;
text-decoration: none;
padding: 10px;
border: 1px solid white;
display: block;
}
.ul li a:hover{
background-color: lightgrey;
color: black;
}
.ul li ul{
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
.ul li ul li{
float: none;
}
.ul li:hover >ul{
display: block;
}
.ul li ul li ul{
position: absolute;
top: 95px;
left: 200px;
}
</style>
</head>
<body>
<ul class="ul">
<li>
<a href="">
Menu 1
</a>
<ul>
<li>
<a href="">
Menu 1.1
</a>
<ul>
<li>
<a href="">
Menu 1.11
</a>
</li>
<li>
<a href="">
Menu 1.12
</a>
</li>
<li>
<a href="">
Menu 1.13
</a>
</li>
<li>
<a href="">
Menu 1.14
</a>
</li>
<li>
<a href="">
Menu 1.15
</a>
</li>
</ul>
</li>
<li>
<a href="">
Menu 1.2
</a>
</li>
<li>
<a href="">
Menu 1.3
</a>
</li>
<li>
<a href="">
Menu 1.4
</a>
</li>
<li>
<a href="">
Menu 1.5
</a>
</li>
<li>
<a href="">
Menu 1.6
</a>
</li>
<li>
<a href="">
Menu 1.7
</a>
</li>
</ul>
</li>
<li>
<a href="">
Menu 2
</a>
<ul>
<li>
<a href="">
Menu 2.1
</a>
</li>
<li>
<a href="">
Menu 2.1
</a>
</li>
<li>
<a href="">
Menu 2.3
</a>
</li>
<li>
<a href="">
Menu 2.4
</a>
</li>
<li>
<a href="">
Menu 2.5
</a>
</li>
<li>
</ul>
</li>
<li>
<a href="">
Menu 3
</a>
</li>
<li>
<a href="">
Menu 4
</a>
</li>
<li>
<a href="">
Menu 5
</a>
</li>
<li>
<a href="">
Menu 6
</a>
</li>
<li>
<a href="">
Menu 7
</a>
</li>
</ul>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Before, closing the head tag, we use style tag as internal CSS and the code used inside this is CSS code.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we first create ul tag and in this we use list tags. The CSS given to this is already shown in code. Under ul to create many columns, we create lists and under some list tags we use ul and lists.
- This is done if you want to show the navigation bar first and after clicking on first option more rows are opens and under this more. This all can be done by repeating the ul and li under required li. I hope the above code may help you to understand navigation bar.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, there are many ways to create a navigation bar, but the codes above is simplest and helps you to understand that how navigation bar works.
In further session, we will also teach you that how you are able to create nav-bar only with the help of CSS properties. I hope this tutorial on how to make a navigation bar in HTML helps you
