Question

我正在尝试开发移动设备的CSS菜单。我想要一个在打开时覆盖所有页面的菜单。如果需要，它也可以在里面有滚动条。我的模型类似于cnn.com汉堡包菜单。

我尝试更改为header{position: fixed}并更改.menu-btn:checked ~ .menu高度，但没有结果，即使我认为这是更改代码的正确方法....

<!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>

mystyle.css是：

.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;
}

Answer 1

将height: 100vh;添加到.header ul。 jsfiddle在这里：

https://jsfiddle.net/r7yeeyeL/

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

编辑：

或者，（可能更好），JQuery解决方案：

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");
    }
});

css汉堡包菜单不适合页面也不滚动

1 个答案: