bxsliderとハンバーガーメニューの実装

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bxsliderの導入</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});

$(function(){
 $('#gnav').hide();//まず隠す
 $(window).on('load resize', function(){
    if($(window).innerWidth() < 768 ){
      //スマホの時
     $('#gnav').hide();
    }else{
      //スマホ以外の時
      $('#gnav').show();
      $('#btn').removeClass('anime');
    }
 });
 $('#btn').on('click',function(){
    $(this).toggleClass('anime');
    $('#gnav').slideToggle(200);
   });
 });
</script>
</head>
<body>
<header>
<h1>タイトル</h1>
<p id="btn"><span></span></p>
<nav id="gnav">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
<li><a href="#">ボタン４</a></li>
</ul>
</nav>
</header>
<ul class="bxslider">
<li><img src="img/slide_01.jpg" alt=""></li>
<li><img src="img/slide_02.jpg" alt=""></li>
<li><img src="img/slide_03.jpg" alt=""></li>
</ul>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
h1 {
  text-align:center;
  padding:20px;
  font-size:40px;
}
#gnav {
  width:100%;
  background:#2749E4;
  margin-bottom:40px;
}
#gnav ul {
  display:flex;
  max-width:960px;
  margin:0 auto;
}
#gnav ul li {
  width:25%;
  height:50px;
  border-right:1px solid #FFF;
  box-sizing:border-box;
}
#gnav ul li a {
  display:block;
  text-align:center;
  background:#576FBC;
  line-height:50px;
  color:#FFF;
}
#gnav ul li:last-child {
    border-right:none;
}
#gnav ul li a:hover {
  background:#1D4196;
}
#btn {
  display:none;
}
@media screen and (max-width:767px){
 header {
   width:100%;
   height:70px;
 }
 h1 {
   text-align:left;
   font-size:30px;
 }
#btn {
  display:block;
  width:50px;
  height:50px;
  border-radius:4px;
  border:2px solid #2E74EF;
  position:absolute;
  right:20px;
  top:8px;
}
#btn>span {
  display:block;
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.1s linear;
}
#btn>span:before {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:-20px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  transition:0.2s  linear;
}
#btn>span:after {
  display:block;
  content:"";
  width:30px;
  height:2px;
  background:#2E74EF;
  position:absolute;
  top:0;
  right:0;
  bottom:-20px;
  left:0;
  margin:auto;
  transition:0.2s linear;
}
#btn.anime>span {
  background:transparent;
}
#btn.anime>span:before {
  transform:rotate(45deg);
  top:0;
}
#btn.anime>span:after {
  transform:rotate(135deg);
  bottom:0;
}
#gnav {
  position:relative;
  z-index:9999;
  width:100%;
  height:calc(100vh - 70px);
}
#gnav ul {
  display:block;
  max-width:960px;
  margin:0 auto;
}
#gnav ul li {
  width:100%;
  height:50px;
  border-right:none;
  border-bottom:1px solid #FFF;
  box-sizing:border-box;
}
#gnav ul li a {
  display:block;
  text-align:center;
  background:#576FBC;
  line-height:49px;
  color:#FFF;
}
#gnav ul li:last-child {
    border-bottom:none;
}
#gnav ul li a:hover {
  background:#1D4196;
}
}

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

bxsliderとハンバーガーメニューの実装