ie7以上から使える。横にスクロールして開くナビゲーションのデモサイトとサンプルコード

HTMLCSS
ie7以上から使える。横にスクロールして開くナビゲーションのデモサイトとサンプルコード
Memo
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ie7以上から使える。横にスクロールして開くナビゲーションのデモサイトとサンプルコードをメモしました。

横スクロールからナビゲーションを表示するサイトを
最近よくスマートフォンサイトなんかでよく見かけます。

そして見よう見まねで
このサイトのタブレットやスマホの表示にも
取り入れてみました。

今回は、「スマホ」や古めの「ie」でも動くように作りました。

スマホでは「jQuery」のアニメーションでは少々重かったので
CSS3transitionと切り替えて動かしています。

サンプルコード

HTML

今回は#moveElmを動かしています。 #headerは動かさないため#moveElmの外に出しています。

HTML
<div id="header"> <div class="inner"> <h1>スクロールナビゲーションサンプルサイト</h1> <div id="nav-btn"> <a href="#nav"><img src="/img/nav-btn.png" alt="ナビゲーション"></a> </div> </div> </div> <div id="moveElm"> <div id="nav"> <ul> <li><a href="#">ページ1</a></li> <li><a href="#">ページ2</a></li> <li><a href="#">ページ3</a></li> <li><a href="#">ページ4</a></li> <li><a href="#">ページ5</a></li> </ul> </div> <div id="main"> <div class="inner"> <h2>スクロールナビゲーションサンプル</h2> </div> </div> <div class="contents"> <div class="inner"> <h2>サンプルサイトの新着情報</h2> <ul> <li><a href="#">新着情報1</a></li> <li><a href="#">新着情報2</a></li> <li><a href="#">新着情報3</a></li> <li><a href="#">新着情報4</a></li> </ul> </div> </div> <div class="contents"> <div class="inner"> <h2>サンプルサイトのコンテンツ</h2> <p>サンプルサイトのコンテンツです。</p> </div> </div> <div class="contents"> <div class="inner"> <h2>サンプルサイトのコンテンツ2</h2> <p>サンプルサイトのコンテンツ2です。</p> </div> </div> <div class="contents"> <div class="inner"> <h2>サンプルサイトのコンテンツ3</h2> <p>サンプルサイトのコンテンツ3です。</p> </div> </div> <div id="footer"> <small>&amp;copy; T-CREATOR</small> </div> </div>

CSS

「headタグ内」に書いています。また、適当に装飾しているので、冗長的になっていますが、 ポイントは「#moveElm」に「position:relative」をいれます。

CSS
<style> body{ background: #F4F7F9; font: 13px Raleway,'Helvetica','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; color: #526483; margin: 0; overflow-x :hidden; } img{ border:none; outline: none; } a{ color:#7D4255; text-decoration: none; } ul{ list-style: none; padding-left: 0; margin:0; } .inner{ max-width: 1080px; width: 94%; margin:0 auto; position: relative; } #header{ height:50px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); background: #fff; position:relative; z-index: 1; } h1{ font-size: 14px; line-height: 50px; margin: 0; font-weight: normal; margin-left: 80px; } #nav-btn a{ position: absolute; display: block; left:0; top:0; width: 50px; text-align: center; } #nav-btn a:hover{ background: #F8F9FC; } #nav-btn a img{ height:30px; padding:10px 0; vertical-align: bottom; } #nav{ width: 30%; position: absolute; background: #ECDFE4; box-shadow: 2px 0 2px 0 rgba(0,0,0,0.1); height:100%; left:-30%; } #nav a{ display: block; padding:10px 0; text-align: center; border-top:1px solid #fff; box-shadow: 0 -1px 0 0 #E0CBD3; } #main{ height:250px; background: #B7C4DB; } #main .inner{ background: #C8D1E3; text-align: center; padding-top:100px; height:150px; } h2{ margin:0; } .contents{ padding:10px 0; margin-bottom: 20px } .contents h2{ border-bottom: 1px solid #B7C4DB; box-shadow: 0 1px 0 0 #fff; padding: 10px 0; } .contents li a{ display: block; padding:10px; border-bottom:dashed 1px #B7C4DB; color:#45546D; } .contents li a:hover{ background: #EDEFF5; } #moveElm{ position: relative; } #footer{ border-top : 1px solid #B7C4DB; padding:10px 0; text-align: center; } </style>

JavaScript

「body」タグの閉じタグの下で読み込んでいます。

JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function (){ var moveSpeed = 800;//アニメーションするスピード var moveWidth = '30%';//アニメーションする横幅 var btn = $('#nav-btn'); var moveElm = $('#moveElm'); var useTransForm = typeof $("body").css("transform"); if(useTransForm === "string"){ moveElm.css({ 'transition' :'all '+moveSpeed+'ms ease' }); } btn.click(function (e) { e.preventDefault(); if(!btn.hasClass('active')){ btn.addClass('active'); if(useTransForm === "string"){ moveElm.css({ 'transform' : 'translateX('+moveWidth+')' }); }else{ moveElm.animate({'left':moveWidth},moveSpeed); } }else{ btn.removeClass('active'); if(useTransForm === "string"){ moveElm.css({ 'transform' : 'translateX(0)' }); }else{ moveElm.animate({'left':'0'},moveSpeed); } } }); }); </script>

ちょっとコードばかりになってしまいましたが
このままコピペいただければ動くと思います。

終わりに

最後までご覧いただきありがとうございます。
この記事ではie7以上から使える。横にスクロールして開くナビゲーションのデモサイトとサンプルコードについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。