1
私はモバイル用のCSSメニューを開発しようとしています。開いたときにすべてのページをカバーするメニューが必要です。必要に応じて、内部にスクロールバーを表示することもできます。私のモデルは、cnn.comのハンバーガーメニューのようなものです。cssハンバーガーメニューがページに収まらない
私はmystyle.cssがある
<!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>
....私はそれがコードを変更するための正しい方法だと思う場合でも、header{position: fixed}に変更し、.menu-btn:checked ~ .menu高さを変更しようとしたが、ない結果：
.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;
}
正確に達成する必要があるものは？全画面メニュー？後ろのリンクを無効にするだけですか？ – Varin
あなたは正しい、フルスクリーンメニューです。投稿を修正しました – AleRef
私はちょうど答えを投稿しました。これはあなたが探していたものですか？ – Varin