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

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.

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

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.

• javascript
• html
• css

Share Improve this question Follow edited Nov 7, 2016 at 1:41 Whymarrh 13.6k1515 gold badges6161 silver badges110110 bronze badges asked Nov 7, 2016 at 0:40 Joshua KissoonJoshua Kissoon 3,32966 gold badges3333 silver badges6060 bronze badges 4

• "I've been trying to figure out how to get this done for quite a while now and have tried a few things." What doesn't work? – Whymarrh Commented Nov 7, 2016 at 0:59
• can you edit your question and hit CTRL + M and paste what code you have tried in the box? – mlegg Commented Nov 7, 2016 at 1:06
• @Whymarrh I've tried setting a max width to the <ul> and putting overflow: scroll; while hiding the scroll bars - problem with this is that the overflowed element doesn't stay in the same line. – Joshua Kissoon Commented Nov 7, 2016 at 1:28
• better to include what you've done so far. :) – claudios Commented Nov 7, 2016 at 1:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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/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>