Joshua Kissoon Joshua Kissoon - 1 month ago 8
CSS Question

CSS (Mobile version of site) Sliding Menu via swipe

I'm trying to create a mobile sliding (not slide-in) menu similar to how google.com menu is on mobile devices (as shown below).

Google.com menu items scrollable from left-to-right

Notice the menu there allows you to slide from left to right to show the hidden menu items (Books, etc. in this case). I would like to create this effect. Can it be done with pure CSS or is there a plugin for it?

I would like overflowing elements to be hidden at the left but a swipe should be able to bring them into focus.

My menu code looks like:



<div id="nav-wrapper">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#settings">Settings</a></li>
<li><a data-toggle="tab" href="#option1">Option1</a></li>
<li><a data-toggle="tab" href="#option2">Option2</a></li>
<li><a data-toggle="tab" href="#option3">Option3</a></li>
</ul>
</div>


I've tried



#nav-wrapper {/* max width and height set here to hide the scroll bars of the <ul> */}
.nav-tabs {width: 300px; overflow-x: scroll; white-space: nowrap;}


problem with the code is that the overflowed
<li>
elements go into a new line and are hidden.

I'm using bootstrap and AngularJS by the way.

Answer

Your li elements need to be displayed as inline-blocks. Use ::-webkit-scrollbar- to customise the scrollbar in Webkit/Blink browsers on desktop. Set a max-width on the wrapper, make sure the ul is set to display as a block element and has no width constraints.

In the demo below, the width of the container is arbitrary; I just chose 400px to demonstrate the overflowing.

Fiddle: https://jsfiddle.net/5guzupzd/

::-webkit-scrollbar { width:0; height:0 }
::-webkit-scrollbar-thumb { background: transparent}
::-webkit-scrollbar-track { background-color: transparent}
* {
  box-sizing: border-box
}
#nav-wrapper {
  border:3px solid #444;
  max-width: 400px;
  margin: 0 auto;
}
ul,li {
  list-style: none;
  padding: 0
}
.nav.nav-tabs {
  -webkit-overflow-scrolling: touch; /* apply iOS momentum scrolling effect to this element */
  display: block;
  overflow: auto;
  white-space: nowrap
}
.nav.nav-tabs li {
  display: inline-block
 }
.nav.nav-tabs li a {
  display: block;
  background: mediumblue;
  color: #fff;
  padding: 16px
}
<div id="nav-wrapper">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#about">About</a></li>
        <li><a data-toggle="tab" href="#settings">Settings</a></li>
        <li><a data-toggle="tab" href="#option1">Option1</a></li>
        <li><a data-toggle="tab" href="#option2">Option2</a></li>
        <li><a data-toggle="tab" href="#option3">Option3</a></li>
    </ul>
</div>