How to make horizontal scrollable menu bar in html with css
Hi friends, welcome to eelfi.com . is you want to make an awesome horizontal scrollable menu for you website. so today we will talk about how to make horizontal scrollable menu by using css.
So please read that post completely and carefully for creating horizontal menu bar in css without javascript.
many peoples wants to make horizontal scrollable navigation menu using css and also they wants to make horizontal scrollable navigation menu without javascript , so we bring this article for those student or coder or programmer whos want to make horizontal scrollable menu bar in html.
So lets start making horizontal scrollable menu bar in html by using css.
Steps for creating horizontal menu in html
For make horizontal scrollable menu in html you need to follow some steps for know that how to make horizontal scrollable navigation menu in html using css.
Step 1
Firstly you need to write html code for making horizontal scrollable navigation bar for website.
Step 2
So Copy or write the following html code of horizontal navigation menu.
Horizontal Scrollable Menu code in html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
</style>
</head>
<body>
<p>Resize the web browser screen to see the effects of horizontal scrollable menu.</p>
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
</body>
</html>
Step 3
Now you have write the html code of horizontal scrollable menu bar.
Step 4
After writing code of horizontal navigation menu in html you need to add CSS (also known as cascading stylesheets) for designing your horizontal scrollable navigation menu.
Step 5
Now publish your horizontal scrollable menu code to your website. it will looks like next steps:
Output of horizontal scrollable navigation menu in html.
Resize the web browser screen to see the effects of horizontal scrollable menu.
Conclusion:
In this article you had learn how to make horizontal scrollable navigation menu in html. and you have see and follow the steps for creating horizontal scrollable menu bar in css without using javascript.
0 Reviews:
Post Your Review