title: CSS: Making Horizontal scrollable Menu
body: <p>I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the menu should be scrolled to that menu icon for that menu screen.</p>
  
  <p>Ex.:</p>
  
  <hr>
  
  <pre><code> &lt;   menu1     |  menu2  |   menu3   &gt;
  </code></pre>
  
  <hr>
  
  <p>Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time.</p>
  
  <p>and if my screen is related to menu 4, the menu4 has to be positioned.</p>
  
  <hr>
  
  <pre><code> &lt;   menu4     |  menu5  |   menu6   &gt;
  </code></pre>
  
  <hr>
  
  <p>And also each menu item should be clickable.</p>
  
  <p>Please let me know, How I can achieve this.</p>
  
  <p><strong>Update</strong>
  Have js for MouseOver</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               ulPadding = 15;
          var divWidth = div.width();
          div.css({ overflow: 'hidden' });
          var lastLi = ul.find('li:last-child');
          div.mousemove(function (e) {
              var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
  
              var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
              div.scrollLeft(left);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JSFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/QdJvb/" rel="noreferrer">Check here</a></p>
  
  <p><strong>Update3</strong></p>
  
  <p><img src="https://i.stack.imgur.com/VEjiC.png" alt="Yahoo&#39;s Navigation"></p>
  
  <p><strong>Update 4</strong></p>
  
  <p><em>This is dynamic menu retreived from db build with ul &amp; li's. If there is more Li than screen width, I simply want an arrow to left &amp; right side to scroll extra li's, if any.</em></p>