0
おはよう、私は、しかし、私は2つの問題に遭遇してきたHTMLとCSSを使用して、ドロップダウンメニューを実装しているHTML5とCSS3ドロップダウンメニュー表示エラー
。
最初のことは、メニューの後ろのデータがまだ表示されていて、メニューから「見る」ことができるということです。私はz-indexなどいくつかのことを試してみましたが、 ？
第二の問題は、画面を拡大し、正常に表示されている場合、メニューバーにあるリンクをクリックすると、しかし、彼らは動作しない動作しないということです。
私は問題を説明するためplunkを作成しました：index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="menuButton.css">
</head>
<body>
<nav id="mainNavigation">
<img src="example.png" alt="Logo">
<div>
<button id="expandMenuButton">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
<ul>
<li><a href="TEST">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
<div class="pageContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
app.css
body {
background: #666;
margin: 0;
padding: 0;
}
.pageContent {
background: #fff;
margin: 0 20px;
padding: 20px;
}
#mainNavigation {
background: #999;
width: 100%;
height: 60px;
display: flex;
}
#mainNavigation > img {
height: 60px;
width: 80px;
}
#mainNavigation > div {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: stretch;
margin-left: auto;
justify-content: flex-end;
}
#mainNavigation > div > ul {
padding: 0;
margin: 0;
display: flex;
visibility: visible;
}
#mainNavigation > div > ul > li {
display: flex;
align-items: center;
padding: 10px 15px;
list-style-type: none;
}
#mainNavigation > div > ul > li > a {
text-decoration: none;
color: #fff;
}
@media screen and (min-width:600px) {
#mainNavigation > div {
flex-direction: row;
}
#mainNavigation > div > ul {
flex-direction: row;
align-items: stretch;
}
#mainNavigation > div > button {
display: none;
}
}
@media screen and (max-width:600px) {
#mainNavigation > div {
flex-direction: column;
justify-content: flex-end;
}
#mainNavigation > div > ul {
visibility: hidden;
display: flex;
flex-direction: column;
}
#mainNavigation > div > button:focus ~ ul {
visibility: visible;
}
#mainNavigation > div > ul > li {
background: #888;
display: flex;
align-items: center;
padding: 30px 15px;
list-style-type: none;
}
}
menuBar.css
#expandMenuButton {
background: inherit;
padding: 5px;
margin: 0;
border: none;
min-height: 60px;
}
#expandMenuButton:focus {
outline: none;
}
#expandMenuButton > .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
margin-left: auto;
transition: 1s;
}
/* Rotate bars on click */
#expandMenuButton:focus > .bar1 {
transform: rotate(360deg);
}
#expandMenuButton:focus > .bar2 {
transform: rotate(360deg);
}
#expandMenuButton:focus > .bar3 {
transform: rotate(360deg);
}
https://plnkr.co/edit/yiFvqED51uhqpFTaQsc8?p=info
主な質問は、1つの要素の背後にあるすべての要素を非表示にする方法と、兄弟：focus cssを使用して要素が表示されるときにリンクをクリックするようにする方法です。
詳細情報が必要な場合はお知らせください。ただ、ノート、一部の人々はplunkrで何をすべきかわからなかった
：メニューが非表示になるまで
は、ウィンドウのサイズを小さくし、その後、これが表示されるはずですメニューを開くには三行をクリックしてくださいこのように：
Iドンを表示理解していない。あなたのplnkrは働いていますか？ –
3つのdivのボタンがありますが、そこには何もありません。それはあなたが欲しいものですか？ – moffeltje
ボタンをクリックするとドロップダウンメニューが開くはずですが、複数のブラウザとの互換性がなくなってしまったため、問題が発生する可能性があります。 – JackFrost