jQuery:プラグイン：FlexSlider2：SVG：枝豆隊長
枝豆隊長：完成版にリンク
★以前の枝豆隊長に手を加える
・ハンバーガーメニューを作ってみる
- 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる
- 幅指定、ボーダーの指定を修正する
・ハンバーガーメニューで推奨されるサイズは44px以上
★FlexSliderを適応させる
ulはサイトに複数でてくるので、必ずクラス名をつける
FlexSlider用のulには、クラス名をつける
FlexSlider 2
cssとjsをリンクさせたあと、ホームページにあるscript
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
の挿入をわすれない。
PCサイト版
スマホサイズ版
<!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_mame.css"> <link rel="stylesheet" href="FlexSlider/flexslider.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="FlexSlider/jquery.flexslider.js"></script> <script> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> <script> $(function(){ $('.box').on('click',function(){ //div.boxをクリックしたら $('.menu').slideToggle(200); //div.boxにクラス名redが追加される //display: block; と display: none; が切り替わっている }); }); </script> </head> <body> <header> <h1>枝豆隊ロゴ</h1> <p id="p_header">豆はカラダにイイ</p> <div class="box"></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> <div id="container"> <div class="flexslider"> <ul class="slides"> <li><img src="img/mame01.png" alt="#"></li> <li><img src="img/mame02.png" alt="#"></li> <li><img src="img/mame03.png" alt="#"></li> </ul> </div><!--.slides--> <div id="wrapper"> <section id="vitamin"> <h2>枝豆の栄養素はスゴい</h2> <p>枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p> </section> <section id="reciept"> <h2>代表的な豆料理</h2> <h3>枝豆</h3> <img class="img_shadow" src="img/mame01.jpg" alt="枝豆"> <p class="reciept_mame">枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p> <h3>ずんだ</h3> <img class="img_shadow" src="img/mame02.jpg" alt="ずんだ"> <p class="reciept_mame">ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p> </section> </div> <div id="sub"> <aside> <h3>枝豆隊隊長</h3> <img class="taicho" src="img/mame03.jpg" alt="肖像 枝豆隊長"> <p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p> </aside> </div> </div> <footer><p><small>2004-2012©枝豆隊</small></p></footer> </body> </html>
自分でかいたものだけ、他にFlexSlider2のcssもリンクさせている
@charset "utf-8"; /* CSS Document */ /*reset*/ html,body,h1,h2,h3,h4,ul,li,p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo,; } ul { list-style: none; } a { text-decoration: none; } body { font-size: 16px; } img { border: none; vertical-align: bottom; margin-bottom: 20px; } p { line-height: 1.5em } /*----------------------------------*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } h4 { font-size: 18px; font-size: 1.8rem; } p { font-size: 16px; font-size: 1.6rem } /*layout*/ header { padding-top: 20px; } #container { width: 960px; margin: 0 auto; background: #FFF; overflow: hidden; } #wrapper { width: 600px; padding: 10px; float: left; } #sub { width: 300px; float: right; } header { margin-bottom: 40px; } h1 { margin: 0 auto; width: 71px; height: 72px; background: url(../img/mame.svg) no-repeat; white-space: nowrap; text-indent: 100%; overflow: hidden; } #p_header { text-align: center; font-size: 36px; font-weight: bold; margin-bottom: 10px; } nav { width: 100%; height: 48px; background: -webkit-linear-gradient(#754435,#5D1C05); background: linear-gradient(#754435,#5D1C05); } .menu ul { width: 960px; margin: 0 auto; overflow: hidden; } .menu li { width: 25%; box-sizing: border-box; text-align: center; font-weight: bold; letter-spacing: 2px; background: -webkit-linear-gradient(#754435,#5D1C05); background: linear-gradient(#754435,#5D1C05); float: left; border-right: 1px solid #FFF; } .menu li:first-child { border-left: 1px solid #FFF; } .menu li a{ display: block; color: #FFF; line-height: 48px; } .menu li a:hover{ color: #6F3; background: -webkit-linear-gradient(#5D1C05,#754435); background: linear-gradient(#5D1C05,#754435); } #vitamin { margin-bottom: 30px; } #reciept { margin-bottom: 30px; } .img_shadow { max-width: 580px; box-shadow: 5px 5px 5px #999; } .taicho { max-width: 300px; } #sub { margin-bottom: 30px; } h2,h3 { margin-bottom: 20px; } .reciept_mame { margin-bottom: 30px; } footer { width: 100%; letter-spacing: 3px; background: #629E3C; } footer p { color: #FFF; line-height: 3em; text-align: center; } @media screen and (max-width: 999px) { .menu ul { width: 100%; } .menu li { border-right: 1px solid #FFF; } .menu li:first-child { border-left: none; } #container { width: 96%; } #wrapper { width: 98%; padding: 1%; } #sub { width: 98%; padding: 1%; float: none; } nav { margin-bottom: 30px; } .menu li { width: 25%; } .taicho { max-width: 580px; box-shadow: 5px 5px 5px #999; } } @media screen and (max-width: 767px) { nav { clear: both; } img { width: 98%; } #wrapper { text-align: center; width: 98% } #sub { text-align: center; } /*スマホ用ナビボタン*/ .box { cursor: pointer; width: 44px; height: 44px; background: url(../img/humburger.svg) no-repeat; float: right; margin-right: 10px; } /*--------------------------*/ /*jQueryで変化するもの１*/ .menu { display: none; /*はじめは隠しておいて、クリックすると出てくる*/ cursor: pointer; width: 100%; height: 200px; clear: both; } .menu li { width: 100%; float: none; font-weight: bold; text-align: center; border: none; } .menu li a { display: block; line-height: 50px; color: #FFF; } .menu li a:hover { color: #FFF; background: #98CC23; } .menu li a:nth-child(-n+3) { /*3番目まで全部*/ border-bottom: 2px solid #FFF; } }
