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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
javascript 定义新对象方法
Feb 20 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP常用的小程序代码段
2015/11/14 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
vue.js的提示组件
2017/03/02 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
简单谈谈Python中的json与pickle
2017/07/19 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
国际贸易毕业生自荐书
2014/06/22 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers