CODEWITHSUNDEEP
jquerycssmenusubmenuresponsive
AleRef
AleRef

Reputation: 47

css hamburger menu doesn't fit the page neither scroll

I'm trying to develop a css menu for mobile. I want a menu that covers all the page when opened. When needed it can also has the scroll bar inside it. My model is something like the cnn.com hamburger menu.

I tried to change to header{position: fixed} and change .menu-btn:checked ~ .menu height, but no results, even if I think it's the right way to change the code....

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    </head>
        <body>
            <header class="header">
                <nav>
                    <input class="menu-btn" type="checkbox" id="menu-btn">
                    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
                    <ul class="menu">
                        <li><a href="#">Company</a></li>
                        <li><a class="open-submenu" href="#">Services   +</a>           
                            <ul class="submenu">
                                <li><a href="#">Serv1</a></li>
                                <li><a href="#">Serv2</a></li>
                                <li><a href="#">Serv3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About</a></li>
                        <li><a class="open-submenu" href="#">Contacts   +</a>
                            <ul class="submenu">
                                <li><a href="#">Cont1</a></li>
                                <li><a href="#">Cont2</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header>

    <script type="text/javascript">
            $(document).ready(function() {                  

            $('.open-submenu').click(function(e){                   
                var childMenu = e.target.parentNode.children[1];
                var nodes = e.target.parentNode.parentNode.childNodes;

                if($(childMenu).hasClass('visible')){
                    $(childMenu).removeClass('visible');
                } else {
                    $(childMenu).addClass('visible');
                }   
            }); 

        });
    </script>

                    <main>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>


</main> 

</body>
</html>

The mystyle.css is:

.header {
  background-color: #333;
  position: absolute;  
  width: 100%;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #333;
}

.header li a {
  display: block;
  padding: 20px 20px;
  color: white;
}

.menu {
  clear: both;
  max-height: 0;
}

/* Next we need to style the menu icon for the dropdown. */

.menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

/* The graphics of the menu button */ 

.navicon {   
  background: #fff;
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
}


/* Now we can add the icon when the checkbox is clicked */


.menu-btn {
  display: none;
}

.menu-btn:checked ~ .menu {
  max-height: 100%;
}


/* submenu */

.submenu{
 display: none;
}

.visible {
 display: block;
}

Upvotes: 1

Views: 88

Answers (1)

Varin
Varin

Reputation: 2443

add height: 100vh; to .header ul. jsfiddle here:

https://jsfiddle.net/r7yeeyeL/

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #333;
  height: 100vh;
}

EDIT:

Or, (maybe better), JQuery solution:

https://jsfiddle.net/r7yeeyeL/1/

CSS

html {
  max-height: 100%;
  height:100%;
}
body {
  height: 100%;
}

.blabla {
  height:100%;
  max-height:100%;
}

JQuery

$(".menu-btn").click(function(){

    if(!$(".header").hasClass("blabla"))
    {
        $(".header").addClass("blabla");
    } else {
    $(".header").removeClass("blabla");
    }
});

Upvotes: 2

Related Questions