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.

 

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in How To

To Top