たった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サービスを生み出していきます。