WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

モバイルサイトにjQueryを加える

ドロップダウンメニューの追加

「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を使います。
f:id:yachin29:20141211235415p:plain


FlexSlider 2

ルーセル用に画像を追加する

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