ホームページを自分でつくるまでドロップダウンメニュー
ドロップダウンメニューをgoogleapisを使って
ホームページ作成のなかでドロップダウンメニューを使うときは
ドロップダウンメニューは中が細かく階層に分かれているときに用いる。
使う側は探さないといけないのでストレスに感じる。
<title>ドロップダウンメニュー</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$(">ul:not(:animated)",this).slideDown("fast");
},
function(){
$(">ul",this).slideUp("fast");
});
});
</script>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
list-style-type:none;
}
#container{
margin:100px auto;
width:537px;
}
ul.menu li{
float:left;
width:179px;
height:48px;
background:url("btn.png");
position:relative;
}
* html ul.menu li{
display:inline;
zoom:1;
}
*+html ul.menu li{
display:inline;
zoom:1;
}
ul.menu li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
position:relative;
}
ul.menu li a:hover{
background:url("btn_over.png");
}
ul.sub{
display:none;
}
* html ul.sub{
zoom:1;
position:relative;
}
*+html ul.sub{
zoom:1;
position:relative;
}
ul.sub li{
float:none;
}
ul.sub li ul.sub{
position:absolute;
left:179px;
top:0;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">メニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
</ul>
</li>
</ul>
<li><a href="#">メニューB</a>
<ul class="sub">
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a>
<ul class="sub">
<li><a href="#">サブメニューB2</a></li>
<li><a href="#">サブメニューB2</a></li>
<li><a href="#">サブメニューB2</a></li>
</ul>
</li>
</ul>
</div>
</body>
- メニューの中に１階層分のメニューを入れるときはscriptのスカラ変数の$(">ul:not(:animated)",this).slideDown("fast");},
ulの前の〉は必要ない。
−cssのul.menuのzoom:1や
ul.menu:afterのheight:0;visibility:hidden;content:".";や
ul.menuのzoom:1;
はマウスが違うところに移動したらパネルの下を隠せという命令でCSSハックやIE6,7にきちんと反応させるための記述
