-1
ハンバーガーからXへのトグルを使用して単純な折りたたみメニューを得るのに、this code from Codepenを使用しようとしていますが、ハンバーガーもXも表示されていません。私が得るのは、メニュー自体が折り畳まれていない形式です。私はFirefox 50とIE 11の両方でこれを試しました。何が間違っていますか？問題はCSSでコメントアウトされている可能性があります。 css/style.cssでindex.htmlでHTMLとCSS：：ここで このCSSのバグはどこにありますか？ハンバーガーからXへのトグルで簡単なメニューを折りたたむことができますか？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hello</p>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<nav id="navigation1" class="navigation">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>
</body>
</html>
CSS
// Burger menu button
$burger--thickness: 4px;
.burger {
$width: 28px;
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: $burger--thickness solid currentColor;
width: $width;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
// Fix for extra space in Firefox
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:before {
content: "";
display: block;
border-bottom: $burger--thickness solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
&:after {
content: "";
display: block;
border-bottom: $burger--thickness solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-bottom: $burger--thickness solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
&:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
&:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
}
// * * * Navigation * * *
$navigation__transition: max-height 0.5s ease-in-out;
.navigation {
overflow: hidden;
max-height: 0;
transition: $navigation__transition;
}
.burger-check:checked ~ .navigation {
max-height: 500px;
transition: $navigation__transition;
}
// * * * Demo * * *
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-style: italic;
font-size: 30px;
text-align: centeR;
}
a {
color: inherit;
}
small {
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
CSSにコメントにthisを読んだ後、私は/*と*/ペアと//のインスタンスを置換、両方の開口/*同じ行の末尾*/の閉鎖インスタンスを置くとの終わりにそれらを置く試みました次のCSSの構築は、役に立たない。コードはCodepenで正常に動作しています。
ですか？そのCSSは[SASS]（http://sass-lang.com/）によってコンパイルされるように設計されています。 – Scott
ああ、ありがとう。いいえ、私はSASSを使用しておらず、経験はありません。 SASSが必要であることをどのように知っているか尋ねて、今後他のコードについて知ることができますか？ – ruffle
さて、1）CSSの変数（＆と$）と2）コードペンは、CSSペインの上に「CSS（SCSS）」と明記されています。 – Scott