レスポンスナビゲーションの作成
HTMLコード:
cssコード:
jsコード:
<body>
<div>
<ul class="menu">
<div id="topLogo">
<a href="#"> </a>
<a href="#" class="ham"><img src="images/ham.png"></a>
</div>
<li><a href="#"> </a><br> </li>
<li><a href="#"> </a><br> </li>
<li id="logo"><a href="#"> </a></li>
<li><a href="#"> </a><br> </li>
<li><a href="#"> </a><br> </li>
</ul>
</div>
</body>
cssコード:
*{
padding:0;
margin:0;
}
div{
margin:0 auto;
}
a{
text-decoration: none;
color: white;
font-size: 20px;
padding:0 3px;
display: block;
}
.menu li{
display: block;
float: left;
margin:3px;
background: grey;
width:140px;
text-align: center;
color: white;
}
#logo{
background-color: white;
width: 230px;
}
#logo a{
color: gray;
font-size: 30px;
background-color: white;
}
#topLogo{
display: none;
margin:0 auto;
text-align: center;
}
#topLogo a{
color: #000;
font-size: 30px;
}
.ham{
display: none;
}
@media only screen and (min-width: 585px) and (max-width: 823px) {
#logo{
display: none;
}
#topLogo{
display:block;
width: 100%;
}
.menu{
width: 585px;
}
}
@media only screen and (max-width: 585px) {
#logo{
display: none;
}
#topLogo{
display:block;
width: 100%;
}
.menu{
width: 100%;
}
.menu li{
width: 100%;
visibility: hidden;
}
.ham{
display: block;
text-align: right;
}
}
jsコード:
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".ham").on("click",function(){
if($(".menu li").hasClass("active")){
$(".menu li").css("visibility","hidden").removeClass("active");
}
else{
$(".menu li").css("visibility","visible").addClass("active");
}
})
})
</script>