jQuery实现简单的列表式导航菜单效果代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码。分享给大家供大家参考。具体如下:

这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用。主要实现包括三个部分,一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。

运行效果截图如下:

jQuery实现简单的列表式导航菜单效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>jQuery实现简单的列表导航菜单</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{font-size:13px}
ul,li{list-style-type:none;padding:0px;margin:0px}
.menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc}
 .content{padding-top:10px;clear:left}
 a{text-decoration:none;color:#666;padding:10px}
.optnFocus{background-color:#fff;font-weight:bold}
div{padding:10px}
div img{float:left;padding-right:6px}
span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
.tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px;
background-color:#fff;display:none}
.tip li{line-height:23px;}
#sort{position:absolute;display:none}
</style>
 <script type="text/javascript">
 $(function() {
  var curY; //获取所选项的Top值
  var curH; //获取所选项的Height值
  var curW; //获取所选项的Width值
  var srtY; //设置提示箭头的Top值
  var srtX; //设置提示箭头的Left值
  var objL; //获取当前对象
  /*
  *设置当前位置数值
  *参数obj为当前对象名称
  */
  function setInitValue(obj) {
  curY = obj.offset().top
  curH = obj.height();
  curW = obj.width();
  srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值
  srtX = curW - 5 + "px"; //设置提示箭头的Left值
  }
  $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件
  objL = $(this); //获取当前对象
  setInitValue(objL); //设置当前位置
  var allY = curY - curH + "px"; //设置提示框的Top值
  objL.addClass("optnFocus"); //增加获取焦点时的样式
  objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标
  $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
  })
  .mouseout(function() {//设置当前所选项的鼠标移出事件
  $(this).removeClass("optnFocus"); //删除获取焦点时的样式
  $(this).next("ul").hide(); //隐藏提示框
  $("#sort").hide(); //隐藏提示箭头
  })
  $(".tip").mousemove(function() {
  $(this).show(); //显示提示框
  objL = $(this).prev("li"); //获取当前的上级li对象
  setInitValue(objL); //设置当前位置
  objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式
  $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标
  })
  .mouseout(function() {
  $(this).hide(); //隐藏提示框
  $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式
  $("#sort").hide(); //隐藏提示箭头
  })
 })
 </script>
 </head>
<body>
<ul>
 <li class="menu">
  <div>
   <img alt="" src="images/icon.gif" />
   <span>精品源码下载社区</span>
  </div>
  <ul class="content">
  <li class="optn"><a href="#">Visual C#</a></li>
  <ul class="tip">
   <li><a href="#">数据库</a></li>
   <li><a href="#">系统控制</a></li>
   <li><a href="#">多媒体</a></li>
   <li><a href="#">字符处理</a></li>
   <li><a href="#">打印输出</a></li>
  </ul>
  <li class="optn"><a href="#">Delphi</a></li>
  <ul class="tip">
   <li><a href="#">图像处理</a></li>
   <li><a href="#">窗体设计</a></li>
   <li><a href="#">数据库应用</a></li>
   <li><a href="#">初学实例</a></li>
  </ul>
  <li class="optn"><a href="#">VC++</a></li>
  <ul class="tip">
   <li><a href="#">系统控制</a></li>
   <li><a href="#">数据库应用</a></li>
   <li><a href="#">电脑软件3</a></li>
   <li><a href="#">字符处理</a></li>
   <li><a href="#">电脑软件5</a></li>
  </ul>
  <li class="optn"><a href="#">VisualBasic</a></li>
  <ul class="tip">
   <li><a href="#">系统控制</a></li>
   <li><a href="#">网络编程</a></li>
   <li><a href="#">窗口界面</a></li>
   <li><a href="#">控件组件</a></li>
   <li><a href="#">图像编程</a></li>
  </ul>
  </ul>
  <img id="sort" src="images/sort.gif" alt=""/>
  </li>
 </ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
潜说js对象和数组
2011/05/25 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python如何查看微信消息撤回
2018/11/27 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
高三语文教学反思
2016/02/16 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python