ドロップダウンメニューの追加
「header」の中に検索バーとナビゲーションを加えます。
index.html
<header id="globalHeader"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"><img src="img/icon_search.png" alt="検索" width="20"></p> <div class="form"> <form action="#"> <span><input type="search" name="q" placeholder="サイト内検索"></span> <span><button>検索</button></span> </form> </div> </div> <nav class="menu"> <p id="menuToggle"><span>メニュー</span></p> <ul> <li><a href="#"><div>サービス紹介</div></a></li> <li><a href="#"><div>実績紹介</div></a></li> <li><a href="#"><div>会社概要</div></a></li> <li><a href="#"><div>採用情報</div></a></li> </ul> </nav> </header>
style.css
/* ドロップダウンメニュー ---------------------------------------------------------- */ body.removeHighlight { -webkit-tap-highlight-color: rgba(0,0,0,0); /*アンドロイド用の不具合調整*/ } #globalHeader nav, #globalHeader div.search { float: right; margin: 0 0 0 5px; } #globalHeader nav ul, #globalHeader div.search div.form { display: none; } #globalHeader nav p#menuToggle, #globalHeader div.search p#searchToggle, #globalHeader div.search div.form button { background: #2b2b2b; background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%); background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%); border: 1px solid #444; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); color: #fff; font-weight: bold; padding: 7px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 1); } #globalHeader nav { padding-bottom: 10px; } #globalHeader nav p#menuToggle { line-height: 23px; padding: 5px 10px; width: 120px; } #globalHeader nav p#menuToggle span { background-image: url(../img/icon_hum.png) , url(../img/bg_line.png); background-position: 100% 50%, 70px 50%; background-repeat: no-repeat, repeat-y; background-size: auto auto, 2px auto; display: block; padding-left: 9px; } #globalHeader nav.open { display: block; background: url(../img/bg_dropdown.png) no-repeat 90% 100%; background-size: 12px; } #globalHeader nav.open ul { background: #333; border-bottom: 1px solid #000; -webkit-box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 0.4); box-shadow:0 3px 5px 0px rgba(0, 0, 0, 0.4); display: block; left: 0; position: absolute; top: 55px; width: 100%; z-index: 99; } #globalHeader nav.open ul li { border-top: 1px solid #000; } #globalHeader nav.open ul li a { border-top: 1px solid #666; color: #fff; display: block; padding: 10px; } #globalHeader nav.open ul li:first-child, #globalHeader nav.open ul li:first-child a { border-top: none; } #globalHeader div.search { padding-bottom: 10px; } #globalHeader div.search.open { background: url(../img/bg_dropdown.png) no-repeat 50% 100%; background-size: 12px; } #globalHeader div.search.open div.form { display: block; } #globalHeader div.search p#searchToggle { font-size: 1px; line-height: 0; } #globalHeader div.search p#searchToggle img { vertical-align: top; } #globalHeader div.search div.form { background: #333; box-sizing: border-box; box-shadow:0 3px 3px 0px rgba(0, 0, 0, 0.3); left: 0; padding: 10px; position: absolute; top: 55px; width: 100%; z-index: 99; } #globalHeader div.search form { display: table; width: 100%; } #globalHeader div.search form span { display: table-cell; } #globalHeader div.search form span:last-child { padding-left: 10px; width: 60px; } #globalHeader div.search form input[type="search"] { -webkit-appearance: textfield; /*iPhone用*/ border: 1px solid #ccc; box-sizing: border-box; display: inline-block; font-size: 14px; padding: 7px 5px; width: 100%; } #globalHeader div.search form button { box-shadow: none; font-size: 14px; padding-left: 0; padding-right: 0; width: 60px; } /*アコーディオン*/ .toggle h2 span { background-image: url(../img/icon_minus_white.png) !important; } .toggle.close h2 span { background-image: url(../img/icon_plus_white.png) !important; } .toggle.close ul { display: none; } @media screen and (-webkit-min-device-pixel-ratio:2){ #globalHeader nav p.menu span { background-image: url(../img/icon_arrow_down_white_2x.png), url(../img/bg_line.png); background-size: 10px 6px, 1px auto; } }
script.js
$(function(){ // 検索、メニュー $('#searchToggle, #menuToggle').click(function(){ $(this).parent().toggleClass('open').siblings('.open').removeClass('open'); $('body').addClass('removeHighlight'); //アンドロイド用の不具合調整 }); $('body').click(function(e){ if( !$(e.target).parents().hasClass('open') ){ $('.search, .menu').removeClass('open'); $('body').removeClass('removeHighlight'); //アンドロイド用の不具合調整 } }); // タブ $('#pickup').find('.tab a').click(function(){ $(this).parent().addClass('current').siblings('.current').removeClass('current'); var tabTarget = $(this).attr('href'); $( tabTarget ).addClass('current').siblings('.current').removeClass('current'); return false; }); });
カルーセルの実装
今回はスマートフォンでも使えるFlexsliderを使います。
カルーセル用に画像を追加する
index.html
<div id="slide"> <div class="flexslider"> <ul class="slides"> <li><img src="img/img_keyvisual_01.jpg" alt=""></li> <li><img src="img/img_keyvisual_02.jpg" alt=""></li> <li><img src="img/img_keyvisual_03.jpg" alt=""></li> </ul> </div><!--/.flexslider--> </div><!--/#slide-->