0
私はcssとjQueryだけを使用してドロップダウンを使ってレスポンシブなメニューを構築しています。 フレックスボックスを使い、ドロップダウンを正しく調整するのに苦労します。以下のコードは、ドロップダウンのものを除き、位置がずれています：position：relativeのような標準的なもので試してみましょう。css flexboxとjqueryを使用しないレスポンシブなナビゲーション
ハンバーガーを表示/非表示するためにチェックボックス（.toggle）を使用しています。 いくつかのポインタのために願っています。 （またJSFiddle here）
nav {
margin:0 auto;
max-width:700px;
width:100%;
}
.menu {background:#28303a;padding:0;margin:0;max-width:700px;height:50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style-type: none;
}
.menu li a {padding:10px;border-radius:5px;align-self:center;}
.menu li a:hover { background: #0093bb;}
#checkbox1,.toggle { display: none;}
/* handle smaller screens here */
@media screen and (max-width: 550px) {
.menu {
flex-direction: column;
height: 0px;
}
.menu li {
display: flex;
align-self: center;
width:100%;
/* hide until user clicks on hamburger */
opacity: 0;
visibility: hidden;
}
.menu li a {
width: 100%;
text-align: center;
align-self: center;
align-content: center;
}
.toggle {
color:#fff;
clear: both;
display: block;
text-align: center;
line-height: 40px;
cursor: pointer;
width: 100%;
height: 40px;
}
.toggle:hover {
background: #0093bb;
}
#checkbox1:checked + label .menu li {
/* show menu - user clicked on hamburger */
opacity: 1;
visibility: visible;
}
#checkbox1:checked + label .menu {
height: 200px;
}
}
/* standard */
body {font-family: 'Open Sans';font-size:15px}
a{text-decoration:none;color:#fff}
.container {background:#28303a;}<div class="container">
<nav>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub items 1</a>
<!-- sub items below/this won't work:
<ul class="menu">
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
</ul>
-->
<li><a href="#">Sub items 2</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>
</div>UPDATE：
は、ここに私のコードです。これは私が最終的に働いてしまったコードです。 Edge、Chrome（pc/mobile）、Firefox、IE 10-11（IE10 - >幸運:)の下でテストされています。 最新のCSSに加えて、<ul class="menu">の内容は<label for...>の外に移動しました。古いコードはW3Cに準拠していなかったからです。
/* standard */
body {font-family: 'Open Sans';font-size:15px}
a {text-decoration:none;color:#fff}
/* code for responsive css dropdown starts here: */
.container {
background: #28303a;
padding-bottom: 10px;
display: flex;
justify-content: center;
}
nav {
box-sizing: border-box;
background: #28303a;
margin: 0;
padding: 0;
}
nav label {
padding: 0;
margin: 0
}
nav ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
}
nav li {
list-style-type: none;
padding:0 10px;
margin:0;
font-size:16px;
line-height:16px;
}
nav a, #checkbox1, .toggle {
font-size: 16px;
color: #fff;
width: 100%;
display: block;
line-height: 16px;
}
/* hide sub menu initially */
nav > ul > li ul {
display: none;
}
/* show sub menu on parent hover */
nav > ul > li:hover ul {
display: block;
background: #28303a
}
/* position sub menu */
ul ul {
position: absolute;
}
ul ul > li {
padding: 5px 8px;
}
/* toggle button hidden initially */
#checkbox1, .toggle {
display:none;
}
@media screen and (max-width:768px) {
nav {
width: 100%
}
nav ul {
flex-direction: column;
}
nav > ul > li {
justify-content: center;
text-align: center;
align-items: center;
align-content: center;
width: 100%;
padding:0;
height:0; /* set height to 0 so the menu won't take up space, until toggle=open*/
opacity:0;
visibility: hidden;
}
/* position sub menu */
ul ul {
position: relative
}
/* remove padding from sub menu items */
ul ul > li {
padding:0;
}
/* set padding for all a elements */
nav a {
padding: 3px 0;
}
nav a:hover {
background: #0093bb;
}
.toggle {
color: #fff;
clear: both;
display: block;
text-align: center;
cursor: pointer;
width: 100%;
padding: 0;
margin: 0;
}
.toggle:hover {
background: #0093bb;
}
/* show menu - user clicked on hamburger */
#checkbox1:checked + label + ul.menu > li {
opacity: 1;
visibility: visible;
height: auto;
}
}<div class="container">
<nav>
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"><span class="toggle">≡</span></label>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub items 1</a>
<ul>
<li><a href="#">Sub 1a</a></li>
<li><a href="#">Sub 1b</a></li>
</ul>
<li><a href="#">Sub items 2</a>
<ul>
<li><a href="#">Sub 2a</a></li>
<li><a href="#">Sub 2b</a></li>
<li><a href="#">Sub 3c</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
ありがとうございます。しかし、あなたが書いたように、それは反応的ではありません（私が必要でした）。非反応的なマナーのサブメニューを作成する私はすでに考えているが、あなたの入力のためにどんな場合にも感謝:) – Sha