授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。
完成例
アコーディオンパネルの追加
h2に既にグラデーションの指定をしてるため、h2にspanタグを追加して、そこに背景画像を指定しましょう。さらにアコーディオンパネルに必要なクラス名も追加しておきましょう。
<section class="seminar toggle"> <h2><span>セミナー</span></h2> <dl class="informationLink"> <dt>2016年8月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年7月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年7月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年7月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2016年6月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> </dl> </section><!--/seminar--> <section class="information toggle close"> <h2><span>お知らせ</span></h2> <dl class="informationLink"> <dt>2016年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd> <dt>2016年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd> <dt>2016年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd> <dt>2016年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd> </dl> </section><!--/information-->
.seminar h2, .information h2 { display: block; font-size: 16px; font-weight: bold; line-hegiht: 1; padding: 12px 10px; }
の部分にspanを追加
/*spanを追加*/ .seminar h2 span, .information h2 span { display: block; font-size: 16px; font-weight: bold; line-hegiht: 1; padding: 12px 10px; }
アコーディオンパネルの背景画像の指定
/* アコーディオンメニュー ---------------------------------------------------------- */ .toggle h2 span { background:url(../img/icon_minus_white.png) no-repeat 100% 50%; } .toggle.close h2 span { background: url(../img/icon_plus_white.png) no-repeat 100% 50%; } .toggle h2 { cursor: pointer; } .toggle.close dl { display: none; /*クラス名「close」が付いていない状態のスタイル*/ }
// アコーディオン $('.toggle').find('h2').on('click touchstart',function(){ $(this).siblings('dl').slideToggle(300, function(){ $(this).parent().toggleClass('close'); }); });
ハンバーガーメニューの導入
nav 部分のhtmlに要素を追加しましょう。
<nav class="menu"> <p id="menuToggle">メニュー<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a></p> <ul id="panel"> <li class="service"><a href="#"><div>サービス紹介</div></a></li> <li class="proven"><a href="#"><div>実績紹介</div></a></li> <li class="corporate"><a href="#"><div>会社概要</div></a></li> <li class="recruit"><a href="#"><div>採用情報</div></a></li> </ul> </nav>
/* ハンバーガーメニュー ---------------------------------------------------------- */ #globalHeader nav { float: right; } #globalHeader nav p#menuToggle { display: block; 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; color: #fff; line-height: 36px; padding-left: 6px; } #panel-btn { float: right; background-image: url(../img/bg_line.png); background-position: 0 60%; background-repeat: repeat-y; background-size: 2px auto; position: relative; width: 36px; height: 36px; border-radius: 5px; padding-left: 20px; margin-left: 10px; } #panel-btn-icon { display: block; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; transition: .2s; background: #FFF; } #panel-btn-icon:before, #panel-btn-icon:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; margin-left: -11px; background: #FFF; transition: .3s; } #panel-btn-icon:before { margin-top: -8px; } #panel-btn-icon:after { margin-top: 6px; } #panel-btn .close { background: transparent; } #panel-btn .close:before, #panel-btn .close:after { margin-top: 0; } #panel-btn .close:before { transform: rotate(-45deg); } #panel-btn .close:after { transform: rotate(-135deg); } #globalHeader nav ul { display: none; } /*クリックしたら出てくるメニュー部分*/ ul#panel { background: #333; border-bottom: 1px solid #000; box-shadow:0 3px 5px 0px rgba(0, 0, 0, 0.4); display: block; position: absolute; left: 0; top: 50px; width: 100%; z-index: 99999; } ul#panel li { border-top: 1px solid #000; } ul#panel li a { border-top: 1px solid #666; color: #fff; display: block; padding: 10px; } ul#panel li:first-child, ul#panel li:first-child a { border-top: none; }
// メニュー $("#panel-btn").on('click touchstart',function() { $("#panel").slideToggle(200); $("#panel-btn-icon").toggleClass("close"); return false; });