J Queryでぱたぱた開くナビゲーションを作る
たくさんの階層があるサイトにかかわることになった、見習。どきどき、わくわくとコーディング開始。
と、最初にぶち当たった難題とは、何だい？ととぼける暇なく出くわしました。何題もの難題。その第一弾ですぅ。
つまーりは、たくさんのページがあるから、ナビゲーションも、多段階に…。ということで、マウスオーバーすると、その子カテゴリーが、ぱたぱたと出現するナビゲーションを作ってね、との指令です。
なんとなく、JQueryでできそう。ということで、必死で調べてみました。
で、あとはCSSですが、本日の指令は、上の階層は、キレイ目にみせたいので、画像を背景に置いて、置換したボタン。でも、下の階層は、どんどん内容が変更になるから、いちいち画像なんか作ってるヒマないし、テキストで対応ね、ってことになってます。
ということで、CSSをこねくり回して、なんとかできあがり。
コードはこんなのです。今日は、HTMLも、CSSも、Java Script（JQuery)もHTMLファイルの中に書いちゃいました。テヌキダァ。
HTML CSS JavaScript(JQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script type="text/javascript" src="jstest/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
$("ul.sub").hide();
$("ul.navi li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
//]]>
</script>
<title>J Queryでぱたぱたメニュー</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div#wrap {
width:600px;
margin:0 auto;
}
ul.navi li {
float:left;
width:150px;
height:49px;
list-style-type:none;
text-indent:-9999px;
}
a{
display:block;
width:100%;
height:100%;
border:none;
}
ul.navi {
zoom:1;
}
ul.navi:after{
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
#b01 a {
background-image:url(img/btn01.jpg);
background-position:0 0;
}
#b02 a {
background-image:url(img/btn02.jpg);
background-position:0 0;
}
#b03 a {
background-image:url(img/btn03.jpg);
background-position:0 0;
}
#b04 a {
background-image:url(img/btn04.jpg);
background-position:0 0;;
}
#b01 a:hover {
background-position:0 -50px;
}
#b02 a:hover {
background-position:0 -50px;
}
#b03 a:hover {
background-position:0 -50px;
}
#b04 a:hover {
background-position:0 -50px;
}
ul.navi li ul.sub{
position:absolute;
}
ul li ul.sub li{
height:30px;
float:none;
}
ul li#b01 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b02 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b03 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b04 ul li a{
background-image:none;
background-color:#eee;
text-indent:0;
text-align:center;
text-decoration:none;
line-height:30px;
border:1px solid #999;
width:148px;
color:#666;
}
ul li#b01 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b02 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b03 ul li a:hover{
background-color:#999;
color:#fff;
}
ul li#b04 ul li a:hover{
background-color:#999;
color:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="navi">
<li id="b01"><a href="#">ぱたぱた1号</a>
<ul class="sub"><li><a href="#">ぱたぱた1号の1号</a></li>
<li><a href="#">ぱたぱた1号の2号</a></li>
<li><a href="#">ぱたぱた1号の3号</a></li>
</ul>
</li>
<li id="b02"><a href="#">ぱたぱた2号</a>
<ul class="sub"><li><a href="#">ぱたぱた2号の1号</a></li>
<li><a href="#">ぱたぱた2号の2号</a></li>
<li><a href="#">ぱたぱた2号の3号</a></li>
</ul>
</li>
<li id="b03"><a href="#">ぱたぱた3号</a>
<ul class="sub"><li><a href="#">ぱたぱた3号の1号</a></li>
<li><a href="#">ぱたぱた3号の2号</a></li>
<li><a href="#">ぱたぱた3号の3号</a></li>
</ul>
</li>
<li id="b04"><a href="#">ぱたぱた4号</a>
<ul class="sub"><li><a href="#">ぱたぱた4号の1号</a></li>
<li><a href="#">ぱたぱた4号の2号</a></li>
<li><a href="#">ぱたぱた4号の3号</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
どうかしらん。どきどき。
2012年5月26日12:10 AM| カテゴリー： HTMLとCSSのコード,Java ScriptとJ Query,見習い奮闘記| コメント (0)
森歩き日記
自称パソプロ化計画
