WEBサイト制作の勉強

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

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

制作したサイトに横から出てくるスワイプメニューを加える

レスポンシブデザイン

先日制作したレスポンシブサイトに今度は横から出てくるスワイプメニューを加えてみましょう。

今回はスライドの動きをCSS3の「transition」と「transform」を使い、ボタンでの制御は前回同様jQueryを使います。

f:id:yachin29:20150911040544p:plain

http://yachin29.com/kirin/index3.html


スライド部分の動きは別のCSSファイルを用意し、そちらに記述します。
ただし、スライド部分のCSSはスマートフォンサイトの時にのみ必要なCSSファイルなので、メディアクエリーを使って640px以下の時にだけ読み込まれるように設定しましょう。

<link rel="stylesheet" href="css/page_slide.css" media="only screen and (max-width:640px)">


スライドで表示する部分と、元から表示している部分を別ける必要がある為、HTMLの構造を少し変える必要があります。
また、今回はスライド部分のjQueryはHTMLファイルにエンベットで記述してあります。

index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWDサイト｜応用編</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style2.css">
<link rel="stylesheet" href="css/wideslider.css">
<link rel="stylesheet" href="css/page_slide.css" media="only screen and (max-width:640px)">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/wideslider.js"></script>
<script>
$(function(){

  var spNav = $('.sp-nav');
  var closeNav = $('.closeNav');
  $('#menuToggle').click(function(){
    spNav.addClass('opened');
    closeNav.css('height', $('.pageWrap').height());
  });
  closeNav.click(function(){
    spNav.removeClass('opened');
    closeNav.removeAttr('style');
  });

});
</script>
</head>

<body>
<nav class="sp-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメレシピ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav>

<div class="pageWrap">
<header>
<div class="inner">
<h1><img src="img/head_logo_001_sp.jpg" alt=""></h1>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->

<div class="menu">
<p id="menuToggle"><span>メニュー</span></p>
</div>
</div>
</header>

<div class="wideslider">
<ul>
<li><a href="#"><img src="img/slide01.png" alt="#"></a></li>
<li><a href="#"><img src="img/slide02.png" alt="#"></a></li>
<li><a href="#"><img src="img/slide03.png" alt="#"></a></li>
</ul>
</div><!--/wideslider-->

<div id="content">
<div class="inner">
<ul>
<li id="photo1" class="size-2x2"><a href="#"><img src="img/01.png"></a></li>
<li id="photo1-2" class="size-2x2"><a href="#"><img src="img/01-2.png"></a></li>
<li id="photo2" class="size-2x1"><a href="#"><img src="img/02.png"></a></li>
<li id="photo3" class="size-1x1"><a href="#"><img src="img/03.png"></a></li>
<li id="photo4" class="size-1x1"><a href="#"><img src="img/04.png"></a></li>
<li id="photo5" class="size-2x1"><a href="#"><img src="img/05.png"></a></li>
<li id="photo6" class="size-1x1"><a href="#"><img src="img/06.png"></a></li>
<li id="photo7" class="size-1x1"><a href="#"><img src="img/07.png"></a></li>
<li id="photo8" class="size-2x1"><a href="#"><img src="img/08.png"></a></li>
<li id="photo9" class="size-1x1"><a href="#"><img src="img/09.png"></a></li>
<li id="photo10" class="size-1x1"><a href="#"><img src="img/10.png"></a></li>
</ul>
</div>
</div>

<footer>
<div class="inner">
<ul>
<li><a href="#">商品情報</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
<ul>
<li><a href="#">キャンペーン</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
</ul>
<ul>
<li><a href="#">エンタメ・レシピ</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
<ul>
<li><a href="#">CSV活動</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
</ul>
<ul>
<li><a href="#">企業情報</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
<ul>
<li><a href="#">お客様相談室</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
</ul>
</div>
</footer>
  </div>
  <div class="closeNav"></div>
</body>
</html>
page_slide.css
@charset "utf-8";

body {
  background: #3b3b3b; /*スライドで出てくるメニューの背景色の指定*/
}

div.pageWrap {
  background: #fff;
  position: relative;
  transform: translateX(0);
  transition: transform .3s ease;
  width: 100%;
}

div.closeNav {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
}

nav.sp-nav {
  background: #3b3b3b;
  position: absolute;
  right: 0;
  top: 0;
  transition: visibility .3s; 
  visibility: hidden;
  width: 200px;
}

nav.sp-nav a {
  background: linear-gradient(#3e3e3e, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2e2e2e;
  color: #fff;
  display: block;
}

nav.sp-nav.opened {
  visibility: visible;
}

nav.sp-nav.opened + div.pageWrap {
  transform: translateX(-200px);
}

nav.sp-nav.opened + div.pageWrap + div.closeNav {
  display: block;
  transform: translateX(-200px);
}
.sp-nav li{
  width:100%;
}