Updated April 11, 2023
Introduction to Horizontal Menu Bar in HTML
In Html, we have a different set of features for using highlighted and more attractive for the user end. We have already discussed in the previous article regarding scroll bars, like the same thing in menu bars also have some more facilities given to user end. Generally, a menu bar helps to categorize the contents and increases the web page readability. To get more interactive in the user end menu bar helps you for the simplest way. Scroll bars have both horizontal and vertical types like the same in menu bars also both the things which have to be used for developers end. We will see some more details in the below concepts.
Syntax:
While using horizontal/vertical menu bars we have to use CSS to reflect the styles in all parts of the HTML pages. Generally, a navigation bars need some standard HTML as a base for implementing the child or sub-derived documents. Navigation bars or Horizontal bars have basically a list of links, so using the <li> and <ul> elements are the syntax for the below basics.
<style>
ul{
}
li variablename:hover{
}
</style>
<body>
<ul>
<li>
</li>
</ul>
</body>The above code is the basic syntax for the horizontal menu bar.
Examples of Horizontal Menu Bar in HTML
We have seen a few examples for understanding the concepts more.
Example #1
Code:
<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: green;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover {
background-color: #111;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>Sample Output:
In the above example, we will show the menu items in horizontal view when we create the web page generally we will see only menu items are in the horizontal panel because the user-customized view here is row-wise so we will use horizontal wise. The same CSS style class is available for all the HTML documents.
Example #2
Code:
<html>
<body>
<p style="font-family:Comic Sans MS">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</p>
</body>
</html>Sample Output:
The second example same as the first example but here we won’t use any CSS styles in the HTML documents.<p> tag we will use some CSS styles like font families, width, height, etc
Example #3
Code:
<html>
<head>
<style>
ul {
margin: 5;
padding: 5;
background-color: #333;
}
li {
float: left;
}
li v {
color: white;
text-align: center;
padding: 5;
}
li v:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>Sample Output:
Some Free Horizontal Menu Types:
Every feature was some collections for the different scenarios. Something in Horizontal menus was some pure CSS and also additionally they will use javascript for making sure they are responsive and work on Mobile.
Some Horizontal navigations are working perfectly and some of the features are not supported in the scripts and also browser compatibility issues. In Website design horizontal bar is great for a minimalistic look and also works well to give the user a simple navigation interface space.
Responsive Horizontal Navigation Menu in Orange:
It is one of the types in the horizontal menu, it’s a light-weight, minimalistic menu with fully pure CSS styles. The menu also responsive and transforming into a vertical menu type on the mobile device supports for viewing the small screens to use mobiles. In desktop, they won’t change anything it will work just on the web browser screens as well it same on the mobile phones.
Example:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>Output:
Green Tabbed Horizontal Menu Types:
This Menu is one of the design patterns for the horizontal panel in a tabbed interface. It will use vast and expensive applications like Purchase/Sales Products goods applications it will helpful for the end-user to click the different menu items very fast and easily to get the results from the db to a user. In the above type we will use some scripts like jquery but here we will use only HTML and CSS so it will loads the data quickly to the user screens. Let us take the same example in the previous topic
Example:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>Output:
The same example we have taken but some CSS styles we have modified and updated the HTML file. Whenever we place the mouse cursor in the tab it automatically highlighted the text for the mentioned green color so it will change when the mouse cursor moves through another tab based on the user choice.
Bubble Wrap in Horizontal Bar:
In this menu bar same as the previous types we will use fully CSS styles on the HTML. Additionally, we will add the border-radius property should enable then it will look like bubble types. We will see the same example with different CSS styles and the output shown like the below code with results.
Example:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>Output:
We have taken sample examples as we discussed in the previous horizontal types but additionally, we add the border-radius in the style sheet.
Conclusion
Finally, we have concluded the session, like we have discussed in previous topics each and every HTML concepts have some more additional features that will depend on the versions. And also browser compatibility issue when comes to one version into another version. In the above horizontal menu bar not only the above concepts it will have further concepts also the same horizontal menu with textured tabs, and we have also used jquery plugins for further user attractive features if we need. If we won’t use the chrome browser in the web page output so we can add the tabbed and additionally blue screen type in CSS styles. When compare to HTML we have some additional features in jquery plugins.
Recommended Articles
This is a guide to Horizontal Menu Bar in HTML. Here we discuss the introduction, syntax, examples with code implementation. You may also have a look at the following articles to learn more –
