当前位置：首页 → 问答吧 → 用jquery做的菜单效果，欢迎拍砖

用jquery做的菜单效果，欢迎拍砖

时间：2009-04-16

来源：互联网

[code]
<html>
<head>
<title>菜单效果</title>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<style type="text/css">
body{width:500px;margin:20px;font-size:12px;font-family:宋体}
#box{width:400px;height:200px;border:1px solid #dddddd;background-color:#FFFFFF;}
#menu{width:380px;height:25px;padding-left:0px;border:0px solid red;}
#menu div{width:90px;height:25px;cursor:pointer;background-color:#f2f2f2;float:left;padding-left:0px;text-align:center;}
.submenu{position:relative;width:180px;border:1px solid #8C867B;font-size:12px;display:none;background-color:#DDE1E6;}
.submenu div{border:0px solid green;cursor:pointer;width:150px;height:25px;background-color:#F1F3F5;float:right;padding-left:5px;}
.submenu div a{color:#000000;text-decoration:none;font-size:12px;}
.submenu div a hover{color:#000000;text-decoration:none;font-size:12px;}
</style>
<script type="text/javascript">
var tmpindex = -1;
$(document).ready(function(){
$('#menu').children().each(function(index,item){
  $(item).mouseover(function(){
   tmpindex = index;
   $(this).css("backgroundColor", "#F1E8E6");
   $(this).css("border-right", "1px solid #C24733");
   $(this).css("border-left", "1px solid #C24733");
   var offset = $(this).offset();
   $('#submenu_'+index).css('display','block');
   $('#submenu_'+index).css('top',offset.top-20);
   $('#submenu_'+index).css('left',offset.left-20);
  });
  $(item).mouseout(function(){
   $('#submenu_'+index).css('display','none');
   $(this).css("backgroundColor", "#F2F2F2");
   $(this).css("border-right", "0px solid #C24733");
   $(this).css("border-left", "0px solid #C24733");
   $(this).css("font-weight", "normal");
  });
})
$('.submenu').mouseover(function(){
   if($('#submenu_'+tmpindex).css('display') == 'none'){
    $('#submenu_'+tmpindex).css('display','block');
   }
});
$('.submenu').mouseout(function(){
   if($('#submenu_'+tmpindex).css('display') == 'block'){
    $('#submenu_'+tmpindex).css('display','none');
   }
});
$('.submenu').children().each(function(index,item){
  $(item).mouseover(function(){
   $(this).css("backgroundColor", "#F1E8E6");
   $(this).css("border", "1px solid #C24733");
  });
  $(item).mouseout(function(){
   $(this).css("backgroundColor", "#F2F2F2");
   $(this).css("border", "0px solid #C24733");
  });
})
});
</script>
</head>
<body>
<div id="menu">
<div>商品管理</div>
<div>订单管理</div>
<div>用户管理</div>
<div>aa管理</div>
</div>
<div id='submenu_0' class="submenu">
<div><span></span><a href='1.html'>添加商品</a></div>
<div><span></span>浏览商品</div>
<div><span></span>列出所有置顶商品</div>
<div><span></span>列出所有现货商品</div>
<div><span></span>列出所有缺货商品</div>
<div><span></span>列出所有预订商品</div>
<div><span></span>列出所有推荐商品</div>
<div><span></span>列出所有热销商品</div>
<div><span></span>列出所有热门点击商品</div>
</div>
<div id='submenu_1' class="submenu">
<div><span></span>列出本日确认新订单</div>
<div><span></span>列出全部确认新订单</div>
<div><span></span>列出未确认订单</div>
<div><span></span>列出本日发货订单</div>
<div><span></span>列出全部发货订单</div>
<div><span></span>列出全部订单</div>
</div>
<div id='submenu_2' class="submenu">
<div><span></span>列出wer新订单</div>
<div><span></span>列出全wer部确认新订单</div>
<div><span></span>列出rwer认订单</div>
<div><span></span>列出wer日发货订单</div>
<div><span></span>列出全er部发货订单</div>
<div><span></span>列出全wer部订单</div>
</div>
<div id='submenu_3' class="submenu">
<div><span></span>列出erer认新订单</div>
<div><span></span>列ert新订单</div>
<div><span></span>列ert未确认订单</div>
<div><span></span>列et日发货订单</div>
<div><span></span>列出ert全部发货订单</div>
<div><span></span>列出et全部订单</div>
</div>
</body>
</html>
[/code]

作者: bestscw 发布时间: 2009-04-16

要是不闪烁就十全十美了

作者: fudg1211 发布时间: 2009-04-16

正在发现原因！

作者: bestscw 发布时间: 2009-04-16

还是喜欢用CSS写然后用 slidedown 出来

作者: baljeans 发布时间: 2009-04-18

挺好，就是css写得差了些

作者: deeka 发布时间: 2009-04-20

用id不好把，我要在中间加东西怎么办，那么后面的id岂不是都要改动。这不是jQuery的思想所在。这和纯JavaScript差不多。我们应该用索引来匹配他们的对应关系。闪动效果解决方法，只要绑定就行了。