How to Create Scrollable Horizontal Menu using CSS ?
In this article, we are going to implement a Scrollable Horizontal Menu using CSS.
Approach: Scrollable Horizontal Menu is used to scroll the horizontal navbar using CSS “overflow:auto” and “white-space: nowrap”. These two attributes are used to scroll the horizontal menu.
To implement the scrollable horizontal menu
- You have to add HTML.
- You have to add CSS to the code.
Example: In the below example, we have used CSS properties “overflow : auto” and “white-space : nowrap”.
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 > < center > < h1 style = "color:green" >w3wiki</ h1 > </ center > < h2 >Horizontal Scrollable Menu</ h2 > < 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 > |
Output: