jQueryのハンバーガーメニュー

Question

ちょうどjQueryを使い始め、ハンバーガーメニューを作ろうとしました。右上の小さな四角形のメニューと、左上のロゴだけを持つことは可能ですか？

現在、メニューの黒いバーはナビゲーションバーのように塗りつぶされています。

$(".cross").hide(); 
 
$(".menu").hide(); 
 
$(".hamburger").click(function() { 
 
    $(".menu").slideToggle("slow", function() { 
 
    $(".hamburger").hide(); 
 
    $(".cross").show(); 
 
    }); 
 
}); 
 

 
$(".cross").click(function() { 
 
    $(".menu").slideToggle("slow", function() { 
 
    $(".cross").hide(); 
 
    $(".hamburger").show(); 
 
    }); 
 
});

body { 
 
    font-family: 'Noto Sans', sans-serif; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
header { 
 
    width: 100%; 
 
    background: #1d1f20; 
 
    height: 60px; 
 
    line-height: 60px; 
 
} 
 
.hamburger { 
 
    background: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    line-height: 45px; 
 
    padding: 5px 15px 0px 15px; 
 
    color: #fff; 
 
    border: 0; 
 
    font-size: 1.4em; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
    z-index: 10000000000000; 
 
} 
 
.cross { 
 
    background: none; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0; 
 
    padding: 13px 15px 0px 15px; 
 
    color: #fff; 
 
    border: 0; 
 
    font-size: 3em; 
 
    line-height: 65px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
    z-index: 10000000000000; 
 
} 
 
.menu { 
 
    z-index: 1000000; 
 
    font-weight: bold; 
 
    font-size: 0.8em; 
 
    width: 100%; 
 
    background: #131313; 
 
    position: absolute; 
 
    text-align: center; 
 
} 
 
.menu ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    list-style-image: none; 
 
} 
 
.menu li { 
 
    display: block; 
 
    padding: 15px 0 15px 0; 
 
    border-bottom: #1d1f20 1px solid; 
 
} 
 
.menu li:hover { 
 
    display: block; 
 
    background: #181818; 
 
    padding: 15px 0 15px 0; 
 
    border-bottom: #1d1f20 1px solid; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
    margin: 0px; 
 
    color: #fff; 
 
} 
 
.menu ul li a:hover { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.menu a:hover { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.glyphicon-home { 
 
    color: white; 
 
    font-size: 1.5em; 
 
    margin-top: 5px; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <button class="hamburger">&#9776;</button> 
 
    <button class="cross">&#735;</button> 
 
</header> 
 

 
<div class="menu"> 
 
    <ul> 
 
    <a href="#"> 
 
     <li>Forside</li> 
 
    </a> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Møbler</a> 
 
     <div class="dropdown-content"> 
 
     <a href="http://facebook.com">Stole</a> 
 
     <a href="#">Border</a> 
 
     <a href="#">Sofaer</a> 
 
     </div> 
 
    </li> 
 
    <a href="#"> 
 
     <li>Blog</li> 
 
    </a> 
 
    <a href="#"> 
 
     <li>Leverandøre</li> 
 
    </a> 
 
    <a href="#"> 
 
     <li>Om Os</li> 
 
    </a> 
 
    </ul> 
 
</div>

Answer 1

、このいずれかを試してみてください。 Jqueryを使用します。

$(".hamburger").click(function() { 
 
    $(this).hide(); 
 
    $('.cross').show(); 
 
    $(".menu").slideToggle(); 
 
}); 
 
$(".cross").click(function() { 
 
    $(this).hide(); 
 
    $('.hamburger').show(); 
 
    $(".menu").slideToggle(); 
 
});

body{ 
 
\t font-family: 'Noto Sans', sans-serif; 
 
\t margin:0; 
 
\t width:100%; 
 
\t height:100vh; 
 
} 
 
header{ 
 
\t width:100%; 
 
\t background:#1d1f20; 
 
\t height:60px; 
 
\t line-height:60px; 
 
} 
 

 
.hamburger{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    line-height:45px; 
 
    padding:5px 15px 0px 15px; 
 
    color:#fff; 
 
    border:0; 
 
    font-size:1.4em; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
} 
 
.cross{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0; 
 
    padding:13px 15px 0px 15px; 
 
    color:#fff; 
 
    border:0; 
 
    font-size:3em; 
 
    line-height:65px; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
    display:none; 
 
} 
 
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313; position:absolute; text-align:center;display:none;} 
 
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;} 
 
.menu li {display: block; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} 
 
.menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} 
 
.menu ul li a { text-decoration:none; margin: 0px; color:#fff;} 
 
.menu ul li a:hover { color: #fff; text-decoration:none;} 
 
.menu a{text-decoration:none; color:white;} 
 
.menu a:hover{text-decoration:none; color:white;} 
 

 
.glyphicon-home{ 
 
    color:white; 
 
    font-size:1.5em; 
 
    margin-top:5px; 
 
    margin:0 auto; 
 
} 
 
.active{ 
 
    display:block; 
 
    transition:all ease 0.3s; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
\t <header> 
 
    <button class="hamburger">&#9776;</button> 
 
    <button class="cross">&#735;</button> 
 
</header> 
 

 
<div class="menu"> 
 
    <ul> 
 
    <a href="#"><li>Forside</li></a> 
 
\t <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Møbler</a> 
 
    <div class="dropdown-content"> 
 
     <a href="http://facebook.com">Stole</a> 
 
     <a href="#">Border</a> 
 
     <a href="#">Sofaer</a> 
 
    </div> 
 
    </li> 
 
    <a href="#"><li>Blog</li></a> 
 
    <a href="#"><li>Leverandøre</li></a> 
 
    <a href="#"><li>Om Os</li></a> 
 
    </ul> 
 
</div> 
 
<script> 
 

 

 
</script> 
 
    
 
</body>

Answer 2

あなたのコードは次のようになめらかになります。 も/他

場合は、いくつかを追加する必要がありますが、ここでそれについての詳細を読むことができます：http://www.w3schools.com/js/js_if_else.asp

は自分のローカルプロジェクトにこのコードを試してみてください！それでも同じ形式

body{ 
 
\t font-family: 'Noto Sans', sans-serif; 
 
\t margin:0; 
 
\t width:100%; 
 
\t height:100vh; 
 
} 
 
header{ 
 
\t width:100%; 
 
\t background:#1d1f20; 
 
\t height:60px; 
 
\t line-height:60px; 
 
} 
 
.hamburger{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    line-height:45px; 
 
    padding:5px 15px 0px 15px; 
 
    color:#fff; 
 
    border:0; 
 
    font-size:1.4em; 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
} 
 
.cross{ 
 
    background:none; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0; 
 
    padding:13px 15px 0px 15px; 
 
    color:#fff; 
 
    border:0; 
 
    font-size:3em; 
 
    line-height:65px; 
 
    display:none 
 
    font-weight:bold; 
 
    cursor:pointer; 
 
    outline:none; 
 
    z-index:10000000000000; 
 
} 
 
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#131313; position:absolute; text-align:center;} 
 
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;} 
 
.menu li {display: block; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} 
 
.menu li:hover{display: block; background:#181818; padding:15px 0 15px 0; border-bottom:#1d1f20 1px solid;} 
 
.menu ul li a { text-decoration:none; margin: 0px; color:#fff;} 
 
.menu ul li a:hover { color: #fff; text-decoration:none;} 
 
.menu a{text-decoration:none; color:white;} 
 
.menu a:hover{text-decoration:none; color:white;} 
 

 
.glyphicon-home{ 
 
    color:white; 
 
    font-size:1.5em; 
 
    margin-top:5px; 
 
    margin:0 auto; 
 
} 
 

 
.menu { 
 
    height: 0px; 
 
    overflow: hidden; 
 
    transition-duration .3s; 
 
} 
 
.OpenMenu .menu { 
 
    height: auto; 
 
} 
 
.OpenMenu .cross { 
 
    display: block; 
 
    } 
 
.OpenMenu .hamburger { 
 
    display: none; 
 
}

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<header> 
 
    <button class="hamburger">&#9776;</button> 
 
    <button class="cross">&#735;</button> 
 

 

 
<div class="menu"> 
 
    <ul> 
 
    <a href="#"><li>Forside</li></a> 
 
\t <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Møbler</a> 
 
    <div class="dropdown-content"> 
 
     <a href="http://facebook.com">Stole</a> 
 
     <a href="#">Border</a> 
 
     <a href="#">Sofaer</a> 
 
    </div> 
 
    </li> 
 
    <a href="#"><li>Blog</li></a> 
 
    <a href="#"><li>Leverandøre</li></a> 
 
    <a href="#"><li>Om Os</li></a> 
 
    </ul> 
 
</div> 
 
    </header> 
 
    
 
    <script> 
 
    $(".hamburger").click(function() { 
 
    $("header").addClass("OpenMenu"); 
 
}); 
 
         
 
$(".cross").click(function() { 
 
    $("header").removeClass("OpenMenu); 
 
}); 
 
    </script> 
 
</body>