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 相关文章推荐
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
如何使用angularJs
May 08 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
前端JS获取URL参数的4种方法总结
Apr 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
You might like
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php合并js请求的例子
2013/11/01 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
js调用css属性写法
2013/09/21 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python格式化日期时间操作示例
2018/06/28 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
深入学习python多线程与GIL
2019/08/26 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
幼儿教师培训感言
2014/03/08 职场文书
质量月活动总结
2014/08/26 职场文书
继续教育个人总结
2015/03/03 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL