Jquery实现纵向横向菜单


Posted in Javascript onJanuary 24, 2016

第一个菜单实现的是点击菜单项显示相应的子菜单项,三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项,鼠标移开子菜单消失。

下面介绍它的代码部分:

html代码:

head代码部分添加标题及引用:

<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> 
  <title>JQuery实战-菜单效果</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" rel="stylesheet" href="css/menu.css" /> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/menu.js"></script> 
</head></span>

body部分编辑菜单项内容,通过嵌套的ul和li来表示,菜单最外层为ul,一层每个主菜单放在一个li中。如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套就可以构建多层的菜单。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><body> 
    <ul> 
      <li class="main"> 
          <a href="#">菜单项1</a> 
        <ul style="display:none;"> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
    <br/> 
    <ul> 
      <li class="hmain"> 
        <a href="#">菜单项1</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 
     
  </body></span>

css代码部分
1.浏览器中的ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进
2.list-style属性值为none,可清除ul和li前面的小圆点。
3.清除缩进值,padding和margin都为0,其中IE6 IE7需要把margin为0的时候才可以清除缩进值。

<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{ 
  list-style:none;/* //清除ul和li上默认的小圆点 */ 
 
} 
ul{ 
  /* 清除子菜单的缩进值 */ 
  padding:0; 
  margin:0; 
} 
.main,.hmain{ 
  background-image:url(../images/title.gif);/*指定背景图*/ 
  background-repeat:repeat-x; 
  width:120px; 
} 
li{ 
  background-color:#EEEEEE; 
} 
a { 
  /*取消所有的下划线*/ 
  text-decoration:none; 
  padding-left:20px;  
   display:block; 
  display:inline-block;/* 解决ie6不兼容的问题 */  
  width:100px; 
  padding-top:3px; 
  padding-bottom:3px; 
} 
.main a,.hmain a { 
  color:white;/*主菜单标签颜色为白色*/ 
  background-image:url(../images/collapsed.gif); 
  background-repeat:no-repeat; 
  background-position:3px center; /* 图片位置在中间 */ 
} 
.main li a ,.hmain li a{ 
  /* 子菜单项 */ 
  color:black; 
  background-image:none;/* 不使用图片 */ 
  padding-left:18px;  
   
} 
.main ul,.hmain ul{ 
  /* 子菜单隐藏 */ 
   display:none;  
} 
.hmain{ 
  float:left;/*浮动显示*/ 
  margin:1px; 
}</span>

menu.js代码:
1.main a选择使用了.main这个class的元素内部所有的a节点
2.main>a选择.main子节点中的a节点

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){ 
  //页面的Dom已经装载完成时,执行的代码 
   $(".main > a,.hmain a").click(function(){ 
     //找到主菜单项对应的子菜单项 
    var ulNode = $(this).next("ul"); 
    // //根据情况收缩菜单 
    // if(ulNode=$.css("display") == "none"){ 
      // ulNode.css("display","block"); 
    // }else{ 
      // ulNode.css("display","none"); 
    // } 
     
    // ulNode.show("normal");//设置展开的速度,可以是nomal,slow,fast 
    // ulNode.hide(); 
     // ulNode.toggle();//toggle设置展开或者收缩 
    //卷帘效果,向上或者向下 
    // ulNode.slideDown(); 
    // ulNode.slideUp; 
    ulNode.slideToggle(); 
  }); 
  //麻烦的方法 
  // $(".hmain > a").hover(function(){ 
    // $(this).next("ul").slideDown(); 
  // }.Function(){ 
    // var ulNode=$(this).next("ul"); 
    // var timeoutId =setTimeout(function(){ 
     
// })     
      // ulNode.slideUp(); 
  // },300); 
  // ulNode.hover(function(){ 
    // clearTimeout(timeoutId); 
  // }.function(){ 
    // $(this).slideUp(); 
  // }); 
 
  /********实现鼠标移动到指定主菜单后子菜单自动显示*****/ 
   
  $(".hmain").hover(function(){ 
    $(this).children("ul").slideDown(); 
  },function(){ 
    $(this).children("ul").slideUp(); 
  }); 
   
}); 
  /* 
  *修改主菜单的指示图标随着子菜单的变化而变化 
  * 
  */ 
function changeIcon(mainNode) { 
  if (mainNode) { 
    if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { 
      mainNode.css("background-image","url('images/expanded.gif')"); 
    } else { 
      mainNode.css("background-image","url('images/collapsed.gif')"); 
    } 
  } 
} 
</span>

以上就是本文的全部内容,希望能够帮助大家更好的实现制作菜单效果。

Javascript 相关文章推荐
window.onload追加函数使用示例
Mar 03 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
vue.js实例todoList项目
Jul 07 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
浅谈React组件之性能优化
Mar 02 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
Node 模块原理与用法详解
May 13 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
详解JS面向对象编程
Jan 24 #Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
JavaScript基础知识之方法汇总结
Jan 24 #Javascript
Javascript实现单例模式
Jan 24 #Javascript
You might like
PHP实现权限管理功能示例
2017/09/22 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python初学者常见错误详解
2019/07/02 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
大学生求职自荐信
2013/12/12 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
中学生打架检讨书
2014/02/10 职场文书
教育读书笔记
2015/07/02 职场文书
消防安全培训工作总结
2015/10/23 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫