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; } }
