I'm using CSS3/SASS and I wouldn't like to use any Javascript if possible. I'm trying to make a horizontal menu where overflow-x would make nice fade effect on the right side, so the user on mobile devices would know that he can move it left-right.
Here is what I'm trying to accomplish:
... as you can see on the picture the text on the right side is being faded out a bit and there, of course, is an OPTION3 menu item (so it's overflowed).
So far I got the menu, but I really have no idea about the overflows and the tricks with them.
HTML:
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item"><a href="#">about</a></li>
<li class="navbar-item"><a href="#">settings</a></li>
<li class="navbar-item"><a href="#">option1</a></li>
<li class="navbar-item"><a href="#">option2</a></li>
<li class="navbar-item"><a href="#">option3</a></li>
</ul>
</nav>
SASS:
.navbar
float: left
height: 40px
min-width: 100%
display: flex
flex-wrap: wrap
.navbar-item
padding: 13px 0px
font-size: 12px
line-height: 14px
text-transform: uppercase
display: inline-block
float: left
margin: 0px 10px
&.active
padding: 13px 0px 11px 0px
border-bottom: 2px solid $light-blue
&:hover
cursor: pointer
a
color: $dark-grey
font-weight: 600
text-decoration: none
For a linear fade, drag perfectly horizontally. For a logarithmic fade, drag up or down. For a cosine (S-curve) fade, hold down Ctrl (Windows) or Command (Mac OS).
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Add overflow: hidden; to hide both the horizontal and vertical scrollbar.
You can use the :before
and :after
elements. (on a div with width:100vh
for example)
You display one gradient on the left of your screen, and one on the right.
content:'';
height: 100%;
width: 15%;
display:block;
position: absolute;
left: 0;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
This way, you will have a gradient hovering the edges of your menu.
To precise a bit more,
.navbar
should have overflow-x: auto; white-space: nowrap;
and navbar-list
should be 100% wide.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With