JS 学习制作一个二级菜单
2014-07-02 21:16
441 查看
1 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>菜单栏</title>
<script src="jquery/jquery-2.1.1.js"></script>
<script>
$(document).ready(function () {
$(".nav li").hover(function () {
// $(this).children(".jnNav").show(); //鼠标在LI上面，二级目录显示
if ($(this).children(".jnNav").is(":animated")) { $(this).children(".jnNav").stop(true); }
// if ($(".nav li").children(".jnNav").is(":animated")) { $(".nav li").children(".jnNav").stop(true,true);}
$(this).children(".jnNav").slideDown("fast"); //鼠标在LI上面，二级目录显示下滑效果
}, function () {
$(this).children(".jnNav").slideUp("fast"); //鼠标离开LI上面，二级目录隐藏上拉效果
// $(this).children(".jnNav").hide(); //鼠标离开LI上面，二级目录隐藏
})
})
</script>
<style type="text/css">
.mainNav {
position: absolute; /*定义主导航条位置*/
top: 0;
left: 0;
height: 37px;
line-height: 37px; /*设置行高 ， 使内部内容垂直中间显示*/
width: 990px;
z-index: 100; /*设置叠放层次100，防止其他层覆盖*/
background-color: #4A4A4A;
}
.nav { /*设置无序列表ul显示为内联样式inline,向左浮动*/
margin: 0px 0px 0px 25px;
display: inline;
float: left;
}
.nav li { /*设置向左浮动 ，这样li元素全部会在一行，显示同样设置为内联样式*/
float: left;
display: inline;
margin-right: 14px;
position: relative; /*使jnNav相对于LI 偏移*/
z-index: 100; /*防止其他层覆盖*/
}
.nav li a { /*显示为块，方便控制a的大小，鼠标在整个块级元素内均能选中，这里定义所有的A，可以设置ID具体定义*/
display: block;
padding: 0px 8px;
font-weight: 700;
color: #fff;
font-size: 14px;
text-decoration: none; /*去除文字下划线*/
}
.nav li a:hover { /*鼠标滑动设置背景色 ，这里定义所有的A，可以设置ID具体定义*/
background: #ffd800;
}
/* 二级菜单*/
.jnNav {
background-color: #fff; /*设置每个二级菜单，背景色为白色*/
border: 1px solid #b1b1b1; /*边框为1个像素及颜色*/
border-top: 0px; /*取消上方边框*/
left: 0px; /*相对于父元素LI，左侧对齐*/
overflow: hidden; /*内容超出范围隐藏*/
position: absolute; /*绝对定位，相对于LI*/
top: 37px; /*LI的高度为37PX，这里设置37px，刚好与li底部衔接*/
width: 474px;
z-index: 1000; /*防止覆盖*/
display: none;
}
.subitem { /*设置二级菜单内部层*/
float: left; /*左侧浮动*/
height: auto;
min-height: 100px; /*最小高度为100px*/
padding: 10px 12px; /*左右内部各填充12px，上下填充10px*/
width: 450px; /*宽度450+12+12，正好为父DIV的宽度*/
}
.subitem dl { /*设置自定义列表*/
border-top: 1px dashed #c4c4c4; /*上方设置边框*/
overflow: hidden; /*超出部分隐藏*/
padding: 8px 0px; /*上下设置填充8px*/
float: left; /*所有自定义列表向左浮动，两个列表就会分层显示*/
}
.fore {
border-top-style: none;
padding-top: 0px;
}
.subitem dt { /*设置自定义列表的标题*/
float: left; /*向左浮动*/
font-weight: bold;
line-height: 16px;
padding: 4px 3px;
text-align: center; /*文本显示居中*/
width: 76px; /*每个标题宽度设置*/
}
.subitem dt a { /*设置标题中链接文本的颜色，字体大小，粗体*/
color: #000;
font-weight: 700;
font-size: 12px;
padding: 0px;
}
.subitem dd { /*设置自定义列表的条目，左侧浮动，每个条目的总宽度为364PX,内部无填充*/
float: left;
overflow: hidden;
padding: 0px;
width: 364px;
}
.subitem em { /*设置条目中的每个内容元素*/
border-right: 1px solid #ccc; /*右侧设置边框，用于隔开每个内容*/
float: left; /*所有条目内容向左侧浮动*/
font-style: normal; /*em本为斜体，这里更改为普通字体*/
height: 14px;
line-height: 14px; /*行高设置与高度一样，字体有垂直中间的效果*/
margin: 5px 0px; /*上下设置外边距*/
padding: 0 8px; /*左右设置内边距*/
}
.subitem em a {
color: #666; /*设置字体颜色*/
white-space: nowrap; /*设置文本就算在长也不允许换行*/
font-size: 12px;
font-weight: normal;
padding: 0px;
}
.subitem em.noborder { /*设置最后一个元素 右侧的边框取消*/
border-right: 0 none;
}
</style>
</head>
<body>
<div id="nav" class="mainNav">
<ul class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">品 牌</a>
<div class="jnNav">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">品牌：</a>
</dt>
<dd>
<em><a href="#">耐克</a></em>
<em><a href="#">阿迪达斯</a></em>
<em><a href="#">达芙妮</a></em>
<em><a href="#">李宁</a></em>
<em><a href="#">安踏</a></em>
<em><a href="#">奥康</a></em>
<em><a href="#">骆驼</a></em>
<em><a href="#">特步</a></em>
<em><a href="#">耐克</a></em>
<em><a href="#">阿迪达斯</a></em>
<em><a href="#">达芙妮</a></em>
<em><a href="#">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">品牌：</a>
</dt>
<dd>
<em><a href="#">耐克</a></em>
<em><a href="#">阿迪达斯</a></em>
<em><a href="#">达芙妮</a></em>
<em><a href="#">李宁</a></em>
<em><a href="#">安踏</a></em>
<em><a href="#">奥康</a></em>
<em><a href="#">骆驼</a></em>
<em><a href="#">特步</a></em>
<em><a href="#">耐克</a></em>
<em><a href="#">阿迪达斯</a></em>
<em><a href="#">达芙妮</a></em>
<em><a href="#">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">女 装</a>
<div class="jnNav">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">女 装：</a>
</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">女 装：</a>
</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">男 装</a>
<div class="jnNav">
<div class="subitem">
<dl class="fore">
<dt>
<a href="#nogo">男 装：</a>
</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
<dl>
<dt>
<a href="#nogo">男 装：</a>
</dt>
<dd>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em><a href="#nogo">安踏</a></em>
<em><a href="#nogo">奥康</a></em>
<em><a href="#nogo">骆驼</a></em>
<em><a href="#nogo">特步</a></em>
<em><a href="#nogo">耐克</a></em>
<em><a href="#nogo">阿迪达斯</a></em>
<em><a href="#nogo">达芙妮</a></em>
<em><a href="#nogo">李宁</a></em>
<em class="noborder"><a href="#nogo">特步</a></em>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">鞋包配饰</a></li>
</ul>
</div>
</body>
</html>效果图：
这个效果主体是根据他人源码修改的，我加上了自己的理解，这样便于学习，仅仅学习用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个不错的js制作的右键菜单
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
- 给大家推荐一个比较好的JS菜单制作工具
- js二级菜单的制作（有动画）
- js实验2.(2)制作二级菜单
- 一个简单的js的省市二级联动菜单（转）
- js生成二级城市联动菜单，动态生成年、月、日字段，生产一个验证码
- 菜单制作学习一个小东西 原创
- js入门·表单元素（select下拉列表）制作二级联动菜单和网站导航 .txt
- 利用JS实现一个简单的二级联动菜单
- JS学习--制作一个表格，显示班级的学生信息
- js+css二级菜单制作方法
- js入门·表单元素（select下拉列表）制作二级联动菜单和网站导航
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
- [原创]使用js+xml制作的IE和FF都支持的树型菜单(程序不到4k哦)
- 一个二级树形菜单，初始显示为全部展开，适用于分类较少的情况。
- 一个XML+JS的菜单，好用
- 一个二级树形菜单，初始显示为全部展开，适用于分类较少的情况。
- 一个二级树形菜单，初始显示为全部展开，适用于分类较少的情况。
- 一个JS写的WEB游戏(学习的好资源) -- 连连看