Horizontal Tab based menu with scrolling tabs
<p>I have a simple Horizontal Menu more like tabs..  I want it to work like a BBC app tab menu, So that when menu has more items it will allow horizontal scrolling in both directions.</p>

<p>Same of my code is here <a href="http://codepen.io/anon/pen/GZRaee" rel="noreferrer">http://codepen.io/anon/pen/GZRaee</a></p>

<p><a href="https://i.stack.imgur.com/TNTJX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TNTJX.png" alt="enter image description here"></a></p>

<p>I tried it few thing but nothing seems to work Like i wrapped the menu in div with fixed width and tried to make it scroll-able but that didn't work as it always adds scroll-bar. I tried to make it carousel which didn't work for me either.</p>

<p>Is there any similar plug for HTML based website. Nav bar used by BBC app is quite common in app, I wish i can have something similar for HTML based webpage for mobile version.</p>

<pre><code>&lt;div class="tab-nav-wrapper"&gt;
  &lt;ul&gt;
    &lt;li class="one"&gt;&lt;a href="#"&gt;MenuONE&lt;/a&gt;&lt;/li&gt;
    &lt;li class="two"&gt;&lt;a href="#"&gt;MTWO&lt;/a&gt;&lt;/li&gt;
    &lt;li class="three"&gt;&lt;a href="#"&gt;THREE&lt;/a&gt;&lt;/li&gt;
    &lt;li class="four"&gt;&lt;a href="#"&gt;FOUR&lt;/a&gt;&lt;/li&gt;
    &lt;li class="five"&gt;&lt;a href="#"&gt;MenuFIVE&lt;/a&gt;&lt;/li&gt;
    &lt;hr /&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;div class="tab-content-wrapper"&gt;
  &lt;div class="tab1-c"&gt;
    &lt;p&gt;This is ONE.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab2-c"&gt;
    &lt;p&gt;This is TWO&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab3-c"&gt;
    &lt;p&gt;This is THREE&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="tab4-c"&gt;
    &lt;p&gt;This is FOUR&lt;/p&gt;
  &lt;/div&gt;

  &lt;div&gt;
</code></pre>