相思资源网

jQuery实现菜单显示效果
站长资源 2024/11/6 佚名
44 1538
相思资源网 Design By www.200059.com

前言

上一篇博客更新了在页面中可以像Excel表格一样输入的表格，这篇博客介绍一下我们经常可以在各大网站看到的菜单栏显示效果的程序。

内容

显示效果：

jQuery实现菜单显示效果

照例，先上代码，

HTML代码：

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery实践3-菜单效果</title>
 <script src="/UploadFiles/2021-04-02/jquery-1.8.2.js">


CSS代码：





ul, li {
 /*清除ul和li前面的原点*/
 list-style: none;
 }

 ul {
 /*清除子菜单的缩进值*/
 padding: 0;
 margin: 0;
 }

 .main, .hmain {
 /*给出菜单栏背景图片*/
 background-image: url(../img/菜单效果/title.gif);
 background-repeat: repeat-x;
 width: 120px;
 }

 li {
 background-color: #EEEEEE;
 }

 a {
 /*取消所有的下划线*/
 text-decoration: none;
 padding-left: 20px;
 display: block;
 display: inline-block;
 width: 100px;
 padding-top: 3px;
 padding-bottom: 3px;
 }

 .main a, .hmain a{
 color: white;
 background-image: url(../img/菜单效果/collapsed.gif);
 background-repeat: no-repeat;
 background-position: 3px center;
 }

 .main li a, .hmain li a{
 color: black;
 background-image: none;
 }

 .main ul, .hmain ul{
 display: none;
 }

 .hmain {
 float: left;
 margin-left:1px;
}





JavaScript代码：





$(document).ready(function () {
 //页面中的DOM已经装载完成时，执行的代码
 $(".main > a").click(function () {
 ////找到主菜单项对应的子菜单项
 var ulNode = $(this).next("ul");
 ulNode.slideToggle();
 changeIcon($(this));
 });

 //简化成下列代码
 $(".hmain ").hover(function () {
 $(this).children("ul").slideDown();
 changeIcon($(this).children("a"));
 }, function () {
 $(this).children("ul").slideUp();
 changeIcon($(this).children("a"));
 });
 });

 //修改主菜单的指示图标
 function changeIcon(mainNode) {
 if (mainNode) {
 if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
 mainNode.css("background-image", "url('img/菜单效果/expanded.gif')");
 } else {
 mainNode.css("background-image", "url('img/菜单效果/collapsed.gif')");
 };
 };
};





这次代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！


总结


HTML知识点：


    
  
  1. 页面中的菜单项可以通过嵌套的ul和li来表示
    2. 
  
  2. 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多层的菜单
    3. 
  
  3. 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进。Opera浏览器比较特殊，li的标识符和其他浏览器不同
    
  
    4. 



CSS知识点：


    
  
  1. list-style属性值为none时，可以清除ul和li前面的小圆点
    2. 
  
  2. 清除子菜单的缩进值，需要padding和margin都为0，其中IE6和IE7只有margin也为0的时候才可以清除缩进值
    3. 
  
  3. 可以使用background-image来制定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域
    4. 
  
  4. 可以使用bakeground-repeat来控制背景图的重复填充方向
    5. 
  
  5. 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的
    6. 
  
  6. text-decoration属性值为none时，可以取消文字的下划线
    7. 
  
  7. background-position可以控制背景图的位置，属性值既可以用数值，也可以用center，left，top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向
    8. 
  
  8. background-image的值为none表示没有背景图
    9. 
  
  9. background-repeat的值为no-repeat时，背景图不会再所在的区域中重复显示
    10. 
  
  10. IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline-block，同时设定a的宽度
    11. 
  
  11. display的值为none可以用于隐藏元素
    
  
    12. 



JavaScript知识点：


    
  
  1. main a 和 .main > a的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点
    2. 
  
  2. show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或则“slow”“normal”“fast”这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果考不断改变元素的宽度和高度来实现的
    3. 
  
  3. toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show，hide相同
    4. 
  
  4. slideDown和slideUp可以实现向下或者向上卷动的效果，实际上试通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同
    5. 
  
  5. slideToggle和toggle达到的效果类似
    6. 
  
  6. DOCTYPE对于jQuery中的动画是有影响的。没有DOCTYPE定义时，在IE中，jQuery的动画会出现闪烁的糟糕效果。
    7. 
  
  7. float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动
    8. 
  
  8. 可以给多个选择器定义同样的样式，选择器之间用“，”分割。同样对于jQuery的“$”方法，也可以传入各个选择器
    
  
    9. 



end


谢谢您的阅读！


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
jQuery,菜单显示
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery实现菜单显示效果”

暂无jQuery实现菜单显示效果的评论...
www.200059.com 相思资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
相思资源网 Design By www.200059.com