Responsive Horizontal Scrolling Menu

http://healthunit.com has a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. I’m trying to mimic that same exact functionality thanks to a site I’m redesigning with a huge level of navigation elements.

Requirements:

  • Fade in a div's background-image (not the body or fading out a background-color)
  • Convert CSS-Object to Style Tag
  • Disabling a JavaScript or Jquery full screen overlay event
  • How to make inner box-shadow transparent on hover
  • UI technologies for Java EE applications
  • Load a css class on hover
    1. Left and right scroll click options
    2. Centered list item option centered in the space
    3. Only one list item visible at a time
    4. Horizontal Scrolling & Responsive
    5. Clicking the last or first option in the list will take you to either the first option or last option in the list

    My current html for this section is:

    <nav id="sub" class="clearfix">
      <ul class="wrapper">
        <a href="#"><li>Estimate</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Customer Information</li></a>
        <a href="#"><li>Financing</li></a>
        <a href="#"><li>Careers</li></a>
        <a href="#"><li>Locate Us</li></a>
        <a href="#"><li>Inspiration</li></a>
      </ul>
    </nav>
    

    The CSS currently attached to it is:

    nav#sub {
      background: #004173;
      background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
      background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
      background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
      background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
      background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
      border-bottom: #00325a solid 3px;
      box-shadow: 0 4px 6px 0 #BFBFBF;
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004173', endColorstr='#014f8d',GradientType=0 );
      webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
    }
    
    #sub ul {
      text-align: center;
    }
    
    #sub ul li {
      padding: 10px 3.3%;
    }
    
    #sub a {
      color: #fff;
      font-size: 10pt;
      font-weight: 400;
      text-decoration: none;
    }
    
    #sub ul a:hover li {
      background: #007FEB;
    }
    

  • How do i make an area unclickable with CSS?
  • javascript hide toggle using a class, or direct hide?
  • On hover image enlarge and text display over it CSS3
  • css3 animation using html5 data attribute
  • is it possible to view one html element twice on the same page, or must I create a duplicate?
  • How to display: none between parent and sibling tags when using show more show less Jquery
  • 3 Solutions collect form web for “Responsive Horizontal Scrolling Menu”

    So, finally I think I have what you are looking for:

    Fiddle: http://jsfiddle.net/fzXMg/2/

    CSS and HTML is in the Fiddle…

    JS:

    $(function(){
        var state = 0;
        var maxState = 6;
        var winWidth = $(window).width();
        $(window).resize(function(){
            winWidth = $(window).width();
            $('.box,.container_element').width(winWidth-100);
        }).trigger('resize');
        $('#lefty').click(function(){
            if (state==0) {
               state = maxState;
            } else {
               state--;
            }
            $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
        });
        $('#righty').click(function(){
            if (state==maxState) {
               state = 0;
            } else {
               state++;
            }
            $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
        });
    });
    

    This uses jQuery again.

    Check out this jsfiddle: http://jsfiddle.net/7vvdB/

    Basically, create an outer container with a max-width of 100% and a overflow-x:scroll, then create an inner container with a fixed width large enough to fit all of your elements, then put all of your elements in the inner container.

    .container_element
    { white-space:nowrap
        min-width:100%;
        overflow-x:scroll;
        overflow-y:hide;
    
    }
    
    .inner_container
    {
        width:5000px;
    }
    }
    

    Check out that fiddle: http://jsfiddle.net/zEPQ5/15/

    It’s not perfect in meaning of design, but it shows off the concept.

    I used jQuery with that.

    $(function(){
        var state = 0;
        $('#up').click(function(){
            state += 1;
            $('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
        });
        $('#down').click(function(){
            state -= 1;
            $('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
        });
    });