jqueryで作るスライドするプルアップメニュー（プルダウンメニュー）
ただただスライドするだけのプルアップメニューの作り方。
まえがき
ただスライドするだけのプルアップメニューが欲しかったんだけど、
人様が公開してる様な高機能なjsを使うのもな～って事で、
プログラム6行でできるプルアップ（まぁプルダウンでもいいんだけどｗ）メニュー
まぁ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」の動作も合わせて逆になります。
それを利用してプルアップ、プルダウンを使い分けてください。
![「もっと見る」を実装(Facebook風)[jQuery|WordPress]](https://kotori-blog.com/wordpress/wp-content/uploads/thumb12-140x140.gif)
![スマートフォンとタブレットでviewportを振り分ける[js]](https://kotori-blog.com/wordpress/wp-content/uploads/thumb5-140x140.gif)