Jquery+Cssでクロスメニュードロップダウンを実現
6896 ワード
ul,li {
/* ul,li */
list-style:none;
}
ul {
/* ul , padding IE6 IE7 margin*/
padding:0;
margin: 0;
}
/* class .*/
.main, .hmain {
/* , li */
background-image: url(../images/title.gif);
/* */
background-repeat: repeat-x;
width: 120px;
margin-top: 1px;
}
/* li */
li {
background-color: #EEEEEE;
}
a {
/* */
text-decoration: none;
padding-left: 20px;
/* , IE6 display: inline-block;*/
display: block;
/*display: inline-block; CSS */
display: inline-block;
/* */
padding-top: 3px;
padding-bottom: 3px;
}
/* main */
.main a, .hmain a {
color: white;
background-image: url(../images/collapsed.gif);
background-repeat: no-repeat;
/* X 3 */
background-position: 3px center;
}
/* main li */
.main li a, .hmain li a {
color: black;
/* */
background-image: none;
}
/* */
.main ul, .hmain ul {
display: none;
}
/* */
.hmain {
/* */
float: left;
margin-right: 1px;
}$(document).ready(function(){
// DOM main a, ，
$('.main > a').click(function(){
//
var ulNode = $(this).next('ul');
/* ：
if(ulNode.css('display') == 'none') {
ulNode.css('display','block');
} else {
ulNode.css('display','none');
}
*/
/*
：
ulNode.show(500);
jquery
ulNode.show('fast');// normal slow
ulNode.hide();
toggle if else
jquery show hide();
ulNode.toggle();
*/
/*
：
ulNode.slideDown();// slow normal fast
ulNode.slideUp();
*/
ulNode.slideToggle();// slow normal fast
changeIcon($(this));
});
/* bug
$('.hmain > a').hover(function(){
$(this).next('ul').slideDown();
},function(){
$(this).next('ul').slideUp();
});
*/
/* ，
//
$('.hmain > a').hover(function(){
//
$(this).next('ul').slideDown();
},function(){
var ulNode = $(this).next('ul');
//
var timeoutId = setTimeout(function(){
//
ulNode.slideUp();
},300);
//
ulNode.hover(function(){
//
clearTimeout(timeoutId);
},function(){
//
$(this).slideUp();
});
});
*/
/* ， */
//
$('.hmain').hover(function(){
//
$(this).children('ul').slideDown();
changeIcon($(this).children('a'));
},function(){
$(this).children('ul').slideUp();
changeIcon($(this).children('a'));
});
});
/**
*/
function changeIcon(mainNode) {
//
if(mainNode) {
if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) {
mainNode.css("background-image","url('../images/expanded.gif')");
} else {
mainNode.css("background-image","url('../images/collapsed.gif')");
}
}
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- doctype ， ， IE -->
<html>
<head>
<title>JQuery- </title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/menu.css" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#"> 1</a>
<ul>
<li><a href="#"> 11</a></li>
<li><a href="#"> 12</a></li>
</ul>
</li>
<li class="main">
<a href="#"> 2</a>
<ul>
<li><a href="#"> 21</a></li>
<li><a href="#"> 22</a></li>
</ul>
</li>
<li class="main">
<a href="#"> 3</a>
<ul>
<li><a href="#"> 31</a></li>
<li><a href="#"> 32</a></li>
</ul>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<ul>
<li class="hmain">
<a href="#"> 1</a>
<ul>
<li><a href="#"> 11</a></li>
<li><a href="#"> 12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#"> 2</a>
<ul>
<li><a href="#"> 21</a></li>
<li><a href="#"> 22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#"> 3</a>
<ul>
<li><a href="#"> 31</a></li>
<li><a href="#"> 32</a></li>
</ul>
</li>
</ul>
</body>
</html>
注:添付ファイルは全コード効果htmlフォルダのhtmlを見る