1
私は応答性の高いナビゲーションバーを作っています。小さなデバイスで表示する場合は、チェックボックス入力を使用してメニューをドロップダウンしました。ページが正しく表示されているにもかかわらず、チェックボックスはドロップダウンメニューをトリガーしません。私はまだ初心者なので、間違いを間違えたかもしれませんが、実際には解決策はありません。レスポンシブnavbar - チェックボックスは起動しません（html、css）
ありがとうございました！あなたはulを隠し
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
}
h2 {
margin-left: 150px;
margin-right: 150px;
}
p {
text-align: justify;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
img.center {
display: block;
margin: auto;
}
ul.recipe {
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
}
nav ul {
/* removing bullets, margins and padding for navigation bar */
list-style-type: none;
margin: 0;
padding: 0;
/*background color of navigaton bar */
overflow: hidden;
background-color: #333333;
/* fixed top, also when user scrolls the page */
position: fixed;
top: 0;
width: 100%;
}
nav li {
float: left;
}
nav li a {
/* formatting links in the navigation bar*/
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
nav li a:hover:not(.active) {
/*changing the link color on non active links on hover*/
background-color: black;
}
.active {
/*showing to user which link is active*/
background-color: #6600cc;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
margin: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
/*Hide checkbox*/
input[type=checkbox] {
/*display: none;*/
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
p {
text-align: justify;
margin-top: 100px;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
/*Make dropdown links appear inline*/
nav ul {
position: fixed;
display: none;
margin-top: 37px;
}
/*Create vertical spacing*/
nav li {
margin-bottom: 1px;
width: 100%;
margin: 0;
}
/*Make all menu links full width*/
nav ul li,
nav li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
<ul id="menu">
<li><a class="active" href="index.html">Home</a>
</li>
<li><a href="world.html">Food around the globe</a>
</li>
<li><a href="where.html">Where to eat?</a>
</li>
<li><a href="recipes.html">Recipes</a>
</li>
<li><a href="about.html">About me</a>
</li>
</ul>
</nav>
</body>
</html>
私はjsのフィドルを持っていないあなたのコード –
のJSフィドルを提供してください。それはこのウェブサイトのように動作するはずですが、私のカスタマイズしたものです：http://medialoot.com/preview/css-only-navigation-menu/index.html –
_ "私はjsフィドルがありません" _ - そして一つ作る。 – CBroe