たった3分で実装出来るJqueryで簡単スマホ用メニュー実装！[webの話] | おむすび

たった3分で実装出来るJqueryで簡単スマホ用メニュー実装！[webの話] | おむすび

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


更新日：2017-06-12

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

情報量が多いページから一瞬で知りたい情報を見つける方法
CSS Nite in OSAKA In-house SEO Meetup 参加予定
SEOの時代は終わり？店舗型に向いていると思うweb集客
アナリティクスを登録する際に絶対しておきたい３つのこと
l.instagram.com / referral ってなんだろう
アナリティクスで電話番号タップをコンバージョン計測する方法

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました！
雨の野外フェスで用意しておきたいもの



ブログ

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


更新日：2017-06-12
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

AJAXで簡単にドラッグ＆ドロップで順番を変更する方法
SEOの時代は終わり？店舗型に向いていると思うweb集客
３分でwebサイトの各端末表示確認が出来るサービス「Sizzy」
CSS Nite in OSAKA In-house SEO Meetup 参加予定
KPI・KSF・KGIをすっごく簡単に解説
アナリティクスを登録する際に絶対しておきたい３つのこと

人気記事

分かりやすい地図をデザインする為に押さえておきたい４つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました！
雨の野外フェスで用意しておきたいもの

ブログ