自動的に表示されない水平方向のナビゲーションを作成します。画像(?)をクリック可能にして、メニューを開いたり閉じたりできるようにします。クリック可能なメニューと水平方向のナビゲーション用のJavaScriptまたはCSS
これは私が現時点で持っているコードです。私はli
のimgをレイアウトのために置いた、これが正しい方法であるかどうかわからない。メニューあなたがそれに応じてCSSにそれを適用&いくつかのクラスを切り替えるにはJavascriptを使用することができます
自動的に表示されない水平方向のナビゲーションを作成します。画像(?)をクリック可能にして、メニューを開いたり閉じたりできるようにします。クリック可能なメニューと水平方向のナビゲーション用のJavaScriptまたはCSS
これは私が現時点で持っているコードです。私はli
のimgをレイアウトのために置いた、これが正しい方法であるかどうかわからない。メニューあなたがそれに応じてCSSにそれを適用&いくつかのクラスを切り替えるにはJavascriptを使用することができます
あなたはJSあなたがしようとしているjavascriptやCSS
document.getElementById("btn").addEventListener("click",function(){
var k = document.getElementsByClassName("menu");
for(i=0;i<k.length;i++){
if(k[i].style.display == "none"){
k[i].style.display = "inline-block";
}
else{
k[i].style.display = "none";
}
}
});
ul,li{
list-style:none;
margin-left:5px;
margin-right:5px;
}
li{
display:inline-block;
}
img{
width:20px;
height:20px;
}
ul{
background:green;
border:2px solid #000;
padding:10px;
}
a {
color: yellow;
text-decoration: none;
}
a:hover
{
color:yellow;
text-decoration:none;
cursor:pointer;
}
#btn{
cursor:pointer;
}
<header>
<nav id="hoofdnavigatie">
<ul>
<li id="btn"><a href="#"><img src="https://i.stack.imgur.com/EIYr8.jpg" alt="menu"/></a></li>
<li class="menu"><a class="active" href="index.html">Home</a></li>
<li class="menu"><a href="recept.html">Recept</a></li>
<li class="menu"><a href="bestel.html">Bestel</a></li>
<li class="menu"><a href="kok.html">Kok</a></li>
<li class="menu"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
をクリックした後
<header>
<nav id="hoofdnavigatie">
<ul>
<li><a href="#"><img src="images/mobilebutton.png" alt="menu"/></a></li>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="recept.html">Recept</a></li>
<li><a href="bestel.html">Bestel</a></li>
<li><a href="kok.html">Kok</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
。
$('.nav-opener').on('click', function() {
$($(this)).toggleClass('open');
$('nav').toggleClass('open');
});
.content-holder {
display: flex;
align-items: center;
}
nav {
display: none;
}
nav.open {
display: block;
}
.nav-opener {
cursor: pointer;
display: inline-block;
border: 1px solid #777;
padding: 8px;
}
.nav-opener.open {
transform: rotate(90deg);
}
.nav-opener .bar {
display: block;
width: 15px;
height: 2px;
background: #777;
margin-bottom: 4px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
padding: 0 10px;
}
.nav-opener .bar:last-child {
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-holder">
<div class="nav-opener">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav id="hoofdnavigatie">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="recept.html">Recept</a></li>
<li><a href="bestel.html">Bestel</a></li>
<li><a href="kok.html">Kok</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
・ホープ、このことができます:
は、以下のスニペットを見てください!
_whatを使用していることを行うことができますか?_ – Jhecht
私は実際にどのように起動するには考えていると私はどのように知りません。私はそれを呼び出す方法がわからないので、インターネット上でそれを検索します。私が検索しようとすると、私はJavaScriptのドロップダウンメニューのようなものしか見つけられませんが、私が探しているものではありません。 –
@LottePothé私は以下の回答を追加しました。 。 –