刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一个,只是没有用到图片之类的,呵呵,所以比较难看,也比较简单。
因为我是用VS做的,所以HTML界面顶上都会有<%%>的内容的,大家换成静态页的时候把上面的去掉就成!
menu.aspx源码
menu.css源码:
menu.js源码:
从JS代码可以看出,比较简单,主要就是一个slideToggle和hover的使用了。。。
下面附上的文件是从网上下载的,比较完整,还包括了图片的切换等。。
以上代码兼容:ie6,7,8,opera,ff,chrome
因为我是用VS做的,所以HTML界面顶上都会有<%%>的内容的,大家换成静态页的时候把上面的去掉就成!
menu.aspx源码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %>
<!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 runat="server">
<title>jQuery实战-下拉菜单</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<h4>纵向菜单</h4>
<ul>
<li class="main"><a href="#" class="first">菜单一</a>
<ul>
<li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>
<li class="main"><a href="#" class="first">菜单二</a>
<ul>
<li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="main"><a href="#" class="first">菜单三</a>
<ul>
<li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<h4>横向菜单</h4>
<ul>
<li class="hmain"><a href="#" class="first">菜单一</a>
<ul>
<li><a href="#">菜单11</a></li>
<li><a href="#">菜单12</a></li>
</ul>
</li>
<li class="hmain"><a href="#" class="first">菜单二</a>
<ul>
<li><a href="#">菜单21</a></li>
<li><a href="#">菜单22</a></li>
</ul>
</li>
<li class="hmain"><a href="#" class="first">菜单三</a>
<ul>
<li><a href="#">菜单31</a></li>
<li><a href="#">菜单32</a></li>
</ul>
</li>
</ul>
</body>
</html>
menu.css源码:
a:link, a:visited { /* 设置默认及访问过的超链接样式 */
text-decoration: none;
text-align: center;
color: #000;
display: block;
display: inline-block;
width: 120px;
height: 20px;
line-height: 20px;
}
ul { /* 设置UL样式,去掉小圆点,让二级菜单与一级菜单之间没有缩进 */
list-style: none;
margin: 0;
padding: 0;
}
.main {
margin-bottom: 1px;
}
.main, hmain { /* 菜单的样式 */
width: 120px;
}
.main a.first, .hmain a.first{ /* 设置一级菜单的样式 */
background-color: #000;
color: #fff;
}
.main ul , .hmain ul{ /* 设置二级菜单的样式 */
background-color: #eee;
display: none;
width: 120px;
}
.main li, .hmain li{
padding: 3px;
}
.hmain {
float: left;
margin-right: 1px;
}
menu.js源码:
$(function() {
// 针对纵向菜单,只要点击后显示或隐藏即可
$(".main > a").click(function() {
var ulNode = $(this).next("ul");
ulNode.slideToggle("slow");
});
// 针对横向菜单,需要在鼠标移上时显示,移除时隐藏
$(".hmain").hover(function() {
$(this).children("ul").slideDown("slow");
}, function() {
$(this).children("ul").slideUp("slow");
});
});
从JS代码可以看出,比较简单,主要就是一个slideToggle和hover的使用了。。。
下面附上的文件是从网上下载的,比较完整,还包括了图片的切换等。。
以上代码兼容:ie6,7,8,opera,ff,chrome