In this tutorial we will show you the solution of horizontal menu bar in HTML, in html, today our topic is about how to make a horizontal menu bar in html there are many ways to do make a horizontal bar.
This can be done with methods like navigation bar, unordered list, divisions and other. Hence, there are many ways.
And we will show you to make a horizontal bar with the help of unordered list.
We also cover another methods, but not in this session. They are explained in our next sessions.
Step By Step Guide On Horizontal Menu Bar In HTML :-
As, we choose the method of unordered list, so we here make the menu bar in ul. For an overview, under ul we have to make lists, that is li tags.
After this we have to customize only li and ul tags with the help of CSS. After this we can also made a drop down menu on hover.
This seems to like a new topic and will be discussed in further sessions.
<!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;
}
</style>
</head>
<body>
<ul class="ul">
<li>
<a href="">
Menu 1
</a>
</li>
<li>
<a href="">
Menu 2
</a>
</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>
</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 create an unordered list, after this we create list tags under li. The class given to only ul and after this we apply CSS only to give it looks which we want. We hope that you will understand the article properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, there are many methods, and we choose the base method which is suitable for every other method. Please, don’t take this method as easy, but this is base method.
In next sessions, we will show that how to make menu bar using other methods and complex ways. I hope this tutorial on horizontal menu bar in HTML helps you.
About Ashish
