制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングjavascriptjqueryで作るスライドするプルアップメニュー(プルダウンメニュー)

jqueryで作るスライドするプルアップメニュー(プルダウンメニュー)

2011年09月05日javascript 
jqueryで作るスライドするプルアップメニュー(プルダウンメニュー)記事のアイキャッチ画像

ただただスライドするだけのプルアップメニューの作り方。

まえがき

ただスライドするだけのプルアップメニューが欲しかったんだけど、
人様が公開してる様な高機能なjsを使うのもな~って事で、
プログラム6行でできるプルアップ(まぁプルダウンでもいいんだけどw)メニュー
まぁ6行っていってもjquery使ってるんだけどね。

あっ、解説なんかイランからとっととサンプル見せろ!って人は
DEMO
↑どうぞ。

6行でできるスライドするプルアップメニュー(プルダウンメニュー)のコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>スライドするプルアップメニューサンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
<!--
google.load("jquery", "1");
-->
</script>


<script type="text/javascript">
<!--
	$(function(){
    $("ul.sub_list").hide();
		$("ul#ul_menu>li").hover(function(){
			$("ul:not(:animated)",this).slideDown()
		},
		function(){
			$("ul",this).slideUp();
		})
	})
-->
</script>

<style type="text/css">
#ul_menu{
	position:relative;
	width:400px;
	list-style:none;
	text-align:center;
	top:100px;
}
#ul_menu li{
	width:200px;
	float:left;
	position:relative;
}
#ul_menu li a{
	width:198px;
	background:#EE0088;
	float:none;
	height:30px;
	display:block;
	border:1px solid #FCF;
	color:#FFF;
}
.sub_list {
    bottom: 32px;
    left: 0;
    position: absolute;
    text-align: center;
	list-style:none;
	padding-left:0;
}
</style>
</head>

<body>
<h1>スライドするプルアップメニューサンプル</h1>
	<ul id="ul_menu" class="sp_list">
		<li><a href="#">コンテンツ1</a>
        <ul class="sub_list">
          <li><a href="#">コンテンツ1-1</a></li>
          <li><a href="#">コンテンツ1-2</a></li>
          <li><a href="#">コンテンツ1-3</a></li>
        </ul></li>
	  <li><a href="#">コンテンツ2</a>
      <ul class="sub_list">
          <li><a href="#">コンテンツ2-1</a></li>
          <li><a href="#">コンテンツ2-2</a></li>
          <li><a href="#">コンテンツ2-3</a></li>
        </ul></li>
	</ul>
</body>
</html>

サンプルのhtmlコードです。
それぞれ説明していきます。

javascriptの
2行目の

$("ul.sub_list").hide();

でプルアップで出てくるサブメニューを非表示にしーの(cssでdisplay:none;指定してあげても可)

3~行目の

		$("ul#ul_menu>li").hover(function(){
			$("ul:not(:animated)",this).slideDown()
		},
		function(){
			$("ul",this).slideUp();
		})

でul id=”menu”の直下のliをさわった時と離れたときの動作を指定します。

ul:not(:animated)

これはアニメーションが起こっていない時だけ動作させるための指定です。

cssの

.sub_list {
    bottom: 32px;
    left: 0;
    position: absolute;
    text-align: center;
	list-style:none;
	padding-left:0;
}

プルアップで出てくるサブメニューのスタイル。
配置場所に関して「position」を使っています。
そして、
「bottom:32px」
この指定をtopに変えるとjqueryの「slideDown」が上から下へスライドする様になります。
もちろん「slideUp」の動作も合わせて逆になります。
それを利用してプルアップ、プルダウンを使い分けてください。

デモ

こちら

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • みるるん

    こちらは、他のプルアップ、プルダウンの解説と比べまして、格段に分かりやすいなと感じました。

    実は、本日は、ご相談がありまして、書き込みさせていただきました。

    こちらのデモへスマートフォンでアクセスした場合に、メニューをタッチした後に出たままになり、コンテンツへ被ったままになるのを、回避できないかと現在調べております。
    もし、もう一度、メニューを触って、短くなるなど、何かしら対応方法があると、嬉しいのですが、実現可能な物でしょうか?

    よろしければ、アドバイスを頂けますと幸いです。
    どうぞよろしくお願い致します。
    それでは失礼いたします。

    • KoToRi

      こんばんは^^
      KoToRiです。
      コメントありがろん!

      スマホですが、、、
      タッチパネルで「マウスアウト」の表現はできないみたいですね。。。。できたらごめんなさい笑
      てか、あくまで私の考えですが、スマホでプルダウンメニューをワザワザ使わなくては良いではないか!と思います。スマホ相手にマウスオーバー、マウスアウトはダメです。

      が、どうしてもプルダウン使うんでしたら、出てくるメニューに閉じるボタンを付けてあげて、それをタップしたらメニューが引っ込む動きを付けてあげれば良いのではないかと思うのです。
      作ってみたので下記参考にしてください。
      /sample/pullup2.html
      ちなみに動作確認したのはipodtouch 4gのみでーす☆wwww
      キラッ☆

  • くま吉

    こんにちは。
    スマートフォン向けのプルアップメニューを探して放浪していたところこちらにたどり着きました。
    とても分かりやすく解説されていて私でもなんとか設置することができました。ありがとうございます。
    そして大変図々しいのですが、ひとつご質問させて頂いてもよろしいでしょうか?

    展開したメニューをタップすると、hoverがうまく機能していない(?)ようで、「リンクをタップした」アクションが起こらないのです。(リンク先へは正しく移動できます)
    タップした事を分かりやすくするように、タップ時に背景色を変えたりできるでしょうか?

    大変面倒な質問かと思いますが、何かしらヒントなどでも頂ければうれしいです。
    お忙しいところ申し訳ありません。

    • KoToRi

      くま吉さん
      こんにちは。
      コメントありがとうございます。
      そして、せっかくコメントいただいたのに諸事情により返信が大変遅れてしまい申し訳ありません。
      本題のタップ時の動きですが
      スマホの場合「:hover」を指定しても効きません。
      ではどうするかというと
      aタグに「ontouchstart=””」を追加すると「:hover」が効くようになるんですね。
      「<a href=”#” ontouchstart=””>リンクテキスト</a>」
      ただこの方法だとaタグに「display:block」をしていすると何故か効かなくなっちゃうので
      おとなしくjsで攻めた方が良いかもしれません。
      下記に参考サイトはっときますね!
      でもkotoriも試しては無いので動作は保障できません><
      ごめんなさい!
      http://d.hatena.ne.jp/dentaq/20111124/1322093612

      • ぬるぽん@2合

        初めまして。
        スマホでのhoverを使う時のjQueryは、hover()を使用するのではなく、on()で制御しないと上手く動作しないです。

        レスポンシブ用に制作してたボタンメニューの一部コードです。
        参考程度にとどめてください。
        $_obj.on(‘mousedown touchstart’, function(event){
        event.preventDefault();
        switch (event.type) {
        case ‘mousedown’ : toggleEvent(this); break;
        case ‘touchstart’ : toggleEvent(this); break;
        default : console.log(‘not action’); break;
        }
        });

        本当はifのがいいのですが、何故かスイッチ使ったのであしからず。

        最近のjQueryはon()で処理を書くと色々な端末に対応しやすくなるので、お勧めします。
        スマホ時のスライドダウンなどはslideToggleで処理するのがお勧めです。
        タッチ時に開閉できるので

        いきなり出しゃばった感じで申し訳ないです(;´Д`)

        • kotoriblog

          ぬるぽんさん
          初めまして。貴重なコードありがとうございます。
          といっても削除済みなのでKoToRiしか確認できませんが笑
          on()使ってみます!!