たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
webの話
おむすび17号です。
今回はスマホに最適なメニュー実装を解説します。
ちなみにPCで使っても問題ありませんので
レスポンシブで共通メニューとしても使用出来ます。
今回のメニューはクリックすると全画面で表示されます。
完成サンプルはこちら
では解説していきます。
まずはJS部分です。
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function(){ var state = false; var scrollpos; $('.toggle').on('click', function(){ if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); $('.open').fadeIn('fast'); state = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); $('.open').fadeOut('fast'); state = false; } }); }); </script>
.toggleがトリガーとなります。
HTMLは下記をベースにしてください。
画像や細かいCSSは編集してください。
<div class="toggle" id="nav"><img alt="メニュー" src="menu.png" title="メニュー" /></div> <nav class="menu open"> <div id="header_close"> <div class="toggle"><img src="close.png" /></div> </div> <div class="common_front_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> <li><a href="">メニュー6</a></li> </ul> </div> </nav>
最後にCSSを入れます。
/* このcssは任意*/ * { margin: 0; padding: 0; } #nav { margin-top: 10px; width: 100%; height: 43px; position: fixed; z-index: 9; top: 0; text-align: center; } #nav img{ width: 43px;} #header_close { width: 100%; padding-top: 10px; text-align: center; padding-bottom: 20px; } #header_close img {width: 43px;} #header_close img:hover{ opacity: 0.7; cursor: pointer; } .common_front_nav { padding-bottom: 50px; } /* ここから必須*/ .menu { position: fixed; top: 0; left: 0; z-index: 9999999; width: 100%; height: 100%; opacity: 0; display: none; background-color: #FFF; overflow-y: scroll; -webkit-overflow-scrolling:touch; z-index:999; } .menu ul { width: 96%; margin-right: auto; margin-left: auto; list-style-type: none; } .menu ul li{ height: 50px; line-height: 50px; text-align: center; width: 450px; margin-left: auto; margin-right: auto; border-radius: 10px; } .menu ul li:hover{ background-color: #c7d3e5; } .menu ul li a{ color:#1b3e78; height:100%; width:100%; display:block; font-size: 16px; } .menu ul li a:hover { opacity:0.7;} .open { opacity: 1; display: none; } .fixed { position: fixed; width: 100%; height: 100%; }
入れる情報は以上となります。
不要なCSSなど一切入れてないのでサンプルサイトを
まるまるコピーでも動くかと思いますので
それを改変するのが早いかもしれません。
PCとスマホと共通して使えるメニューでもあり
なおかつ軽いので使い所は多いと思います。
特徴としてCSSを変更すればうっすら透過したメニューが実現出来るのと
メイン側のスクロールを禁止してメニューのみスクロール出来るようになっています。
是非使ってみてくださいね!
ではでは〜
大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。