怎样使用CSS+Javascript实现弹出列表
javascript范例：vararrowimages={down:['downarrowclass','down.gif',23],right:['rightarrow...
javascript范例：
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
var jqueryslidemenu={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
我自己CSS定义的类：
.jqueryslidemenu ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul{
top: 0px;
}
我只需要实现一级弹出列表就行了，范例是多级弹出列表，而且带了一个“小箭头图片”，（用来按钮中指示的代表可以弹出的），我不需要图片；我想要功能是鼠标指向按钮，然后自动弹出下拉列表，按钮导航栏我先前已近做好了（以列表的形式），也就是说这个列表是独立的另外一个列表，现在就是不知道怎样触发，不知道他们是怎样联系起来的。Js中的“downarrowclass”，“rightarrowclass”，“jqueryslidemenu”是在CSS文件中定义的。
原始教程地址：www。dynamicdrive。com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 展开
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
var jqueryslidemenu={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
我自己CSS定义的类：
.jqueryslidemenu ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul{
top: 0px;
}
我只需要实现一级弹出列表就行了，范例是多级弹出列表，而且带了一个“小箭头图片”，（用来按钮中指示的代表可以弹出的），我不需要图片；我想要功能是鼠标指向按钮，然后自动弹出下拉列表，按钮导航栏我先前已近做好了（以列表的形式），也就是说这个列表是独立的另外一个列表，现在就是不知道怎样触发，不知道他们是怎样联系起来的。Js中的“downarrowclass”，“rightarrowclass”，“jqueryslidemenu”是在CSS文件中定义的。
原始教程地址：www。dynamicdrive。com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 展开
1个回答
展开全部
用JQuery做弹出二级菜单实在是太容易了。根本不需要其它什么插件，只要几行代码就行！如下：
<html><head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#nav{margin:0 auto;width:800px;height:25px;background-color:#333;}
#nav li{float:left;position:relative;border-right:1px solid #666;}
#nav li span{display:inline-block;padding-left:4px;color:#fff;}
#nav li a{display:inline-block;padding:0 15px;font:12px/25px '宋体';color:#fff;text-decoration:none;}
#nav li a:hover{background-color:#000;}
#nav li ul{display:none;position:absolute;left:0;top:25px;width:150px;background-color:#333;}
#nav li ul li{float:none;border-bottom:1px solid #666;}
#nav li ul li a{display:block;}
</style>
<script type="text/javascript">
$(function(){
$('#nav li').has('ul').find('a:first').append('<span>>></span>')
$('#nav li').hover(
function(){$(this).find('ul').stop(true,true).slideDown(300);},
function(){$(this).find('ul').stop(true,true).slideUp(300);})
})
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
<html><head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
#nav{margin:0 auto;width:800px;height:25px;background-color:#333;}
#nav li{float:left;position:relative;border-right:1px solid #666;}
#nav li span{display:inline-block;padding-left:4px;color:#fff;}
#nav li a{display:inline-block;padding:0 15px;font:12px/25px '宋体';color:#fff;text-decoration:none;}
#nav li a:hover{background-color:#000;}
#nav li ul{display:none;position:absolute;left:0;top:25px;width:150px;background-color:#333;}
#nav li ul li{float:none;border-bottom:1px solid #666;}
#nav li ul li a{display:block;}
</style>
<script type="text/javascript">
$(function(){
$('#nav li').has('ul').find('a:first').append('<span>>></span>')
$('#nav li').hover(
function(){$(this).find('ul').stop(true,true).slideDown(300);},
function(){$(this).find('ul').stop(true,true).slideUp(300);})
})
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
