I’m redesigning one of my websites that has a menu area that allows users to select the city closest to them. I want to modernize the design and my theory is that using a horizontal scrolling menu will make it easier for users to select their closest city.
I’ve seen this also used with breadcrumb trails and a way to showcase a list of brand logos and I’ll likely use this on this website, specifically on my homepage where I share the different companies I’ve worked with.
Before I implement the code, i’ll be mocking up the designs in Figma or Adobe XD then testing the design with some end users (a.k.a. colleagues and friends).
To make the horizontal scrolling menu work, I’m going to share the HTML and CSS below so you can test and try it out on one of your projects.
The key to make this work is using the overflow-x attribute, and setting the value as, “scroll”. Like this, “overflow-x: scroll”.
Example
HTML
<div class="col-md-10 parent">
<ul class="my-nav">
<li><a class="btn-nav tab-active" href="#">Item 1</a></li>
<li><a class="btn-nav" href="">Item 2</a></li>
<li><a class="btn-nav" href="">Item 3</a></li>
<li><a class="btn-nav" href="">Item 4</a></li>
</ul>
</div>CSS
.my-nav {
margin: 0;
padding: 0;
list-style: none;
}
.my-nav li {
float: left;
}
.my-nav li a, .my-nav li a:link, .my-nav li a:visited {
color: #000;
font-size: 15px;
}
.my-nav li a:hover {
border-bottom: 4px solid #CCC;
}
a.btn-nav.tab-active, a.btn-nav.tab-active:visited, a.btn-nav.tab-active:hover {
color: #27a020;
border-bottom: 4px solid #27a020;
}
.btn-nav {
display: block;
text-align: center;
padding:15px 25px;
}
@media (max-width: 640px){
.parent {
overflow-y:hidden;
overflow-x:scroll;
}
.my-nav {
height: 70px;
width: 600px;
}
.scroll::-webkit-scrollbar {
display: none;
}
.scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}Reference: https://jsfiddle.net/p8f0Lqp1/6/, https://iamsteve.me/blog/horizontal-scrolling-responsive-menu
Leave a Reply