Connect with us

How To Create Simple Menu With Horizontal Scrollbar

How To Create Simple Menu With Horizontal Scrollbar

How To

How To Create Simple Menu With Horizontal Scrollbar

Sometimes we want to show lot of menu items horizontally, but because of the space limitation we reduce our menu items.

If you want to show all your menu items horizontally at any cost, there is a very simple solution, put a horizontal scrollbar, so that one can easily move the bar left and right to see all the menu items.

The horizontal bar will appear only when your menu items will exceed the maximum width of menu. This is how the menu will look like with horizontal scrollbar.

How To Create Simple Menu With Horizontal Scrollbar 1

Put this code on your website, by updating the links.
——————————————————-

<style>
div.menu {
background-color: brown;
overflow: auto;
white-space: nowrap;
}

div.menu a {
display: inline-block;
padding: 14px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
font-weight: bold;
}

div.menu a:hover {
background-color: crimson;
color: white;
}
</style>

<!– Menu Starts Here –>

<div class=”menu”>
<a href=”https://www.meersworld.net/”>Home</a>
<a href=”https://www.meersworld.net/search/label/How%20To”>How To</a>
<a href=”https://www.meersworld.net/p/about.html”>About</a>
<a href=”https://www.meersworld.net/search/label/Blogger”>Blogger Tutorials</a>
<a href=”https://www.meersworld.net/search/label/Windows”>Windows Tutorials</a>
<a href=”https://www.meersworld.net/search/label/Entertainment”>Entertainment</a>
<a href=”https://www.meersworld.net/search/label/Tech”>Technology</a>
<a href=”https://www.meersworld.net/search/label/Sports”>Sports</a>
<a href=”https://www.meersworld.net/search/label/Travel”>Travel</a>
<a href=”https://www.meersworld.net/search/label/Earn%20Online”>Earn Online</a>
<a href=”https://www.meersworld.net/search/label/Ideas”>Ideas</a>
<a href=”https://www.meersworld.net/search/label/Opinion”>Opinions</a>

</div>

<!– Menu Ends Here –>
———————————————————–

 

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

 

 

Click to comment

Leave a Reply

Your email address will not be published.

More in How To

Advertisement
Advertisement
Free Guide to start a blog and make passive income
Download Cheap Website Themes
Get Namecheap Shared Hosting With Free Domain
To Top