今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に３本線が✕印に変わるエフェクトを追加します。
CSS3の「 transform: rotate」を使って線を動かします。
３本線の１番上の線と１番下の線を反時計周りに回転させ、✕印にします。真ん中の線は邪魔になるので、クリックしたら透明になるように指定します。
{ transform: rotate(〇〇○deg); }
デモ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>クリックで開閉するボタン｜ハンバーガー編</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $(".btn").click(function() { $("#menu").slideToggle(200); $(".btn-icon").toggleClass("close"); return false; }); }); </script> <style> html, body, h1, p { margin: 0; padding: 0; line-height: 1.0; } #header { height: 280px; background: #049DCD; text-align: center; padding-top: 20px; } h1 { text-align: center; font-size: 24px; margin-bottom: 20px; color: #FFF; } /* 3本線の描画 */ .btn { width:200px; height: 200px; margin: 0 auto; border-radius: 20px; background: #fff; position: relative; } .btn a { display: block; width: 200px; height: 200px; } .btn-icon { display: block; position: absolute; top: 50%; left: 50%; width: 100px; height: 4px; margin: -2px 0 0 -50px; background: #2196F3; transition: .2s; } .btn-icon:before, .btn-icon:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 100px; height: 4px; margin-left: -50px; background: #2196F3; transition: .3s; } .btn-icon:before { margin-top: -24px; } .btn-icon:after { margin-top: 20px; } /*クリックしたら追加されるスタイル*/ span.close { background: transparent; } span.close:before, span.close:after { margin-top: 0; } span.close:before { transform: rotate(-45deg); } span.close:after { transform: rotate(-135deg); } /*スライドで出てくるメニュー*/ #menu { background: #333; width: 100%; height: 300px; display: none; } </style> </head> <body> <div id="header"> <h1>クリックで開閉するボタン</h1> <div class="btn"><a href="#"><span class="btn-icon"></span></a></div> </div> <div id="menu"></div> </body>
制作したハンバーガーメニューを以前制作したレスポンシブデザインサイトに入れましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>枝豆隊長</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="FlexSlider/flexslider.css"> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="FlexSlider/jquery.flexslider.js"></script> <script> $(function() { $('.btn').on('click', function() { //div.boxをクリックしたら $('.menu').slideToggle(200); $('.btn-icon').toggleClass('close'); return false; }); }); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> <style> article, aside, dialog, figure, footer, header, menu, main, nav, section { display: block; } </style> </head> <body> <div id="container"> <header> <h1><img src="img/logo.svg" alt="枝豆隊ロゴ"></h1> <h2>豆はカラダにイイ</h2> <div class="btn"> <a href="#"><span class="btn-icon"></span></a> </div> <nav class="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">枝豆一覧</a></li> <li><a href="#">枝豆隊</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header><!-- /header --> <div id="wrapper"> <div class="flexslider"> <ul class="slides"> <li><img src="img/slide01.png" alt="#"></li> <li><img src="img/slide02.png" alt="#"></li> <li><img src="img/slide03.png" alt="#"></li> </ul> </div> <div id="main"> <section id="vitamin"> <h3>枝豆の栄養素はスゴい</h3> <p>枝豆は大豆が未成熟で収穫したものですが、<a href="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p> </section> <section id="reciept"> <h3>代表的な豆料理</h3> <h4>枝豆</h4> <img src="img/01.jpg" alt="イラスト 枝豆"> <p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p> <h4>ずんだ</h4> <img src="img/02.jpg" alt="イラスト ずんだ"> <p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p> </section> </div><!--/#main--> <div id="sub"> <aside> <h4>枝豆隊隊長</h4> <img src="img/03.jpg" alt="肖像 枝豆隊長"> <p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p> </aside> </div><!--/#sub--> </div><!--/#contents--> </div> <footer> <p><small>2004-2012©枝豆隊</small></p> </footer><!-- /footer --> </body> </html>
@charset "utf-8"; /* Reset */ html, body, div, h1, h2, h3, h4, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif; } a { text-decoration : none; } ul { list-style : none; } img { border: none; vertical-align: bottom; } /* Fluid-img */ img { max-width : 100%; } /* Body */ body { line-height : 1.5; } h1 { font-size : 48px; margin-bottom: 16px; } h2 { font-size : 36px; margin-bottom: 16px; } h3 { font-size : 24px; margin-bottom: 16px; } h4 { font-size : 16px; margin-bottom: 16px; } /*Headerレイアウト*/ header { text-align: center; padding-top: 16px; } /* Nav */ nav { margin-bottom : 24px; background: #b7715d; /* Old browsers */ background: -webkit-linear-gradient(top, #b7715d 0%,#b53613 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b7715d 0%,#b53613 100%); /*W3C用*/ } nav ul { overflow: hidden; width :960px; margin : 0 auto; } nav ul li { width : 25%; float : left; border-right: 1px solid #FFF; box-sizing: border-box; } nav ul li:first-child { border-left: 1px solid #FFF; } nav ul li a { display : block; color : #D8C2A4; line-height: 50px; } nav ul li a:hover { color : #FFFFFF; background-color : #7D4934; } #wrapper { overflow : hidden; width : 960px; margin: 0 auto; } #main { float : left; width : 600px; padding: 10px; } #sub { width : 300px;/*300/960*/ float: right; } #main p, #sub p { margin-bottom : 24px; line-height: 1.5; } #main img { margin-bottom : 24px; box-shadow : 0 0 10px #000; } #sub img { margin-bottom: 24px; } /* Footer */ footer { padding : 24px 0; color : white; text-align : center; background : #629E3C; } /*スライダー*/ .flexslider { margin-bottom: 20px; } /*タブレット用*/ @media screen and (max-width : 959px){ nav ul { width :100%; } #wrapper { width: 100%; } #main, #sub { width : 98%; padding: 0 1%; float: none; } #sub img { box-shadow : 0 0 12px #000; } } /*スマホ用*/ @media screen and (max-width : 767px) { header { padding: 0 15px; } #wrapper { text-align: center; width: 96%; } nav { clear: both; background:#b53613; } nav ul li { width : 100%; float: none; border-right: none; } nav ul li:first-child { border-left: none; } nav ul li:nth-child(-n+3) { border-bottom: 1px solid #FFF; } /*スマホ用ハンバーガーボタン*/ .btn { width:44px; height: 44px; margin: 0 auto 10px; border-radius: 4px; background: #fff; position: relative; float: right; border: 1px solid #049DCD; } .btn a { display: block; width: 44px; height: 44px; } .btn-icon { display: block; width: 24px; height: 2px; background: #049DCD; position: absolute; top: 0; right: 0; bottom:0; left: 0; margin: auto; transition: 0.2s; } .btn-icon:before { display: block; content: ""; width: 24px; height: 2px; position: absolute; top: -14px; right: 0; bottom:0; left: 0; margin: auto; background: #049DCD; transition: 0.3s; } .btn-icon:after { display: block; content: ""; width: 24px; height: 2px; position: absolute; top: 0; right: 0; bottom:-14px; left: 0; margin: auto; background: #049DCD; transition: 0.3s; } .btn-icon.close { background: transparent; } .btn-icon.close:before { top:0; transform: rotate(-45deg); } .btn-icon.close:after { bottom:0; transform: rotate(-135deg); } /*スライドで出てくるメニュー*/ .menu { background: #333; width: 100%; height: 200px; display: none; /* position: absolute; top: 200px; left: 0; z-index: 9999;*/ } }
