jQuery实战（三）

niunan · 发表于 2013-2-7 20:04:36

刚刚看完第三讲，是用jQuery制作下拉菜单，自己也试着做了一个，只是没有用到图片之类的，呵呵，所以比较难看，也比较简单。
因为我是用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

		自动登录	找回密码
密码			立即注册

jQuery实战（三）

浏览过的版块