How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed

  • Tags: javascript,jquery,html,css,css3

    Problem :

    I am working on a mobile responsive website. It has a nav menu button that opens .list div up - when clicking the menu button. I inserted the div of the .list right after the nav bar.

    When the menu opens it doesn't show all list items in my tag. I have to give my main div .list different height sizes and I find it not so efficient.

    I will paste my relevant code part of the nav bar, and the relevant CSS parts.

    HTML:

    <div class="list">
                <h2 id="cat-header"> ALL CATEGORIES</h2>
                    <ul class="sports">
    
                            <li class="mainli">
                            </li>
    
                            <li class="mainli">
                            </li>
    
                            <li class="mainli"> 
                            </li>
                    </ul>
    
                </div>
    

    CSS:

    .sports{
        /*display: none;*/
        padding: 0 ;
        background-color: #fff;
        margin: 0;
        width:100%;
        /*height: 210%*/
        -webkit-overflow-scrolling: touch;
    }
    
    .list{
        width: 99.9%;
        /* overflow: hidden; */
        /* overflow-y: scroll; */
        /* top: 65%; */
        overflow-x: hidden;
        /*overflow-y: scroll;*/
        height: 75%;
        display: none;
        -webkit-overflow-scrolling: touch;
    }
    

    I created different width sizes that change the

    .list{
        height: 75%;
    }
    

    in a way that it will fit, but I got to a point where a lot of small mobiles have the same width but different heights. I need something automatic with a 100% height.

    This is a visual example of my problem:

    enter image description here

    and here is an good example of how it should look like. This is customized to a specific mobile.

    enter image description here

    as far as I understand I need to change my height to auto and that should do the trick. Something like this:

    .list{
        width: 99.9%;
        /* top: 65%; */
        overflow-y: scroll;
        height: auto;
        display: none;
    }
    

    And then I found out that I have a fixed position on the body when opening the menu! that prevents the height to be scrollable more than the screens height.

    $('#mob-menu-btn').click(function(){
    
    var isHidden = $('.sports').is(':visible');
    
        if (isHidden){
            $( "body" ).removeClass( "makeFixed" );
        } else {
            $( "body" ).addClass( "makeFixed" );
        }
        $('.list').slideToggle("fast");
    
    })
    

    Does anyone have a solution for this?



    Solution :

    100% height will fill a container with a predetermined height, so 100% height on the body will surely handle this?

    I tend to stick an overflow: auto on mobile menus as a failsafe - preventing scrolling can be hindering to a front-end user


      CSS Howto..

      How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

      How to align to the center a div with position absolute within a div with position relative?

      CSS How to make image fluid extending only to one side of browser, aligned with centered content?

      How do I style forms using CSS

      how to dynamically remove css in Angular?

      How to strike through obliquely with css showing the text on top of the strike through

      How to find address of css and js files?

      How can I target and except for the first and last ?

      HTML / CSS: How to make the content follow the footer?

      How proper add 2 CSS file in a WordPress theme?

      How can I apply my CSS stylesheet to an RSS feed

      CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

      How to Include Multiple Javascript Files in .NET (Like they do in rails)

      How to make a horizontal expandable menu fluid

      how to increase border line from the center using css animation

      How to pre-complie css style sheets in rails 2.3?

      How to change image size when nested in

      tag

      How to add / remove html elements and content based on the browsing device?

      Styling Tables - How to use column groups to modify TH tag located in that column

      How do I make an erasing animation in CSS? [closed]

      How do I make part of a style element a function? (IE: color:$random instead of color:red)

      How to make div expandable with content while setting min height property as well in CSS

      css how to get rounded corners on button.

      “ul li a:link, a:visited” and “ul li a, visited” how they different?

      How can I flip multiple div at same time?

      How to show blocks for progressbar using CSS

      CSS - How to overlap elements over everything but each other? (No margin/padding etc)

      How do I wrap and set CSS properties to achieve the depicted results?

      how to solve css check box checking issue

      How to override styles between parent - child elements using css selector?