基于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>
<title>简洁实用的橙色背景下拉二级导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
*{
margin:0;
padding:0;
}
ul,ol,li,dl{
list-style-type:none;
}
a{
color:#555;
font-size:14px;
text-decoration:none;
}
.nav{
margin:0 auto;
width:800px;
height:30px;
}
.nav ul li{
float:left;
display:block;
width:200px;
height:30px;
position:relative;
}
.nav ul li a{
display:block;
width:200px;
height:30px;
background:#666;
color:#fff;
line-height:30px;
font-weight:bold;
text-align:center;
}
.nav ul li a:hover{
background:#F60;
}
.drop_dwon{
width:330px;
position:absolute;
left:0;
top:30px;
display:none;
}
#drop a{
width:200px;
}
#currlayout{
background:#F60;
}
</style>
<script type="text/javascript" src="images/20124/jquery-1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".nav ul li").hover(
  function(){
   jQuery(this).children(".drop_dwon").slideDown(200);
   jQuery(this).children(".nav ul li a").attr("id","currlayout")
  },
  function(){
   jQuery(this).children(".drop_dwon").slideUp(100);
   jQuery(this).children(".nav ul li a").attr("id","")
  }
);
});
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>

<div class="nav">
<ul>
    <li><a href="#">首页</a>
      <div class="drop_dwon" id="drop"> </div>
    </li>
    <li><a href="#">关于我们</a>
      <div class="drop_dwon" id="drop">
        <div class="onemenulayout"><a href="#">公司简介</a></div>
        <div class="onemenulayout"><a href="#">大事记</a></div>
        <div class="onemenulayout"><a href="#">荣誉资质</a></div>
      </div>
    </li>
    <li><a href="#">新闻中心</a>
      <div class="drop_dwon" id="drop">
        <div class="onemenulayout"><a href="#">公司新闻</a></div>
        <div class="onemenulayout"><a href="#">行业新闻</a></div>
        <div class="onemenulayout"><a href="#">最新活动</a></div>
      </div>
    </li>
    <li><a href="#">产品中心</a>
      <div class="drop_dwon" id="drop">
        <div class="onemenulayout"><a href="#">家用电器</a></div>
        <div class="onemenulayout"><a href="#">办公用品</a></div>
        <div class="onemenulayout"><a href="#">健身器材</a></div>
        <div class="onemenulayout"><a href="#">日常用品</a></div>
      </div>
    </li>
</ul>
</div>
</body>
</html>

注：上面文档我们把jquery文件给去了，你可到到jquery.com下载一个jquery文件就可以实现了。

时间： 2024-08-04 00:08:34

基于jquery实现二级下拉菜单代码

基于jquery实现二级下拉菜单代码的相关文章

基于jQuery实现二级下拉菜单效果_jquery

基于jquery平滑二级下拉菜单效果

jquery实现漂亮的二级下拉菜单代码_jquery

jQuery实现二级下拉菜单效果_jquery

基于jquery实现三级下拉菜单_jquery

jquery CSS导航下拉菜单代码

来自国外的30个基于jquery的Web下拉菜单_jquery

jquery实现平滑的二级下拉菜单效果_jquery

JS 实现导航菜单中的二级下拉菜单的几种方式_javascript技巧