首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

Jquery实现纵向横向菜单

- Author -

韦文文

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
redux.js详解及基本使用
May 24 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
摩纳哥购物网站(1) 北美洲购物网站(1) 卡塔尔购物网站(3) 亚洲购物网站(6) 秘鲁购物网站(1) 菲律宾购物网站(13) 匈牙利购物网站(11) 缅甸购物网站(1) 越南购物网站(9) 巴基斯坦购物网站(2)
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
Django 中 cookie的使用
2017/08/17 PHP
CI（CodeIgniter）框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
javascript实现自动输出文本（打字特效）
2015/08/27 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
JS作用域深度解析
2016/12/29 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
HTML的form表单和django的form表单
2019/07/25 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
杠杆的科学教学反思
2014/01/10 职场文书
乔迁之喜主持词
2014/03/27 职场文书
关爱老人标语
2014/06/21 职场文书
教师思想工作总结2015
2015/05/13 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python