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 Event学习第八章 事件的顺序
Feb 07 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JS验证码实现代码
Sep 14 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php排序算法实例分析
2016/10/17 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python断言assert的用法代码解析
2018/02/03 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python3数字求和的实例
2019/02/19 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
护士工作失误检讨书
2014/09/14 职场文书
自我查摆剖析材料
2014/10/11 职场文书
亲属关系公证书样本
2015/01/23 职场文书
股份转让协议书范本
2015/01/27 职场文书
表扬信范文
2015/05/04 职场文书
学校通报表扬范文
2015/05/04 职场文书
单位考核鉴定意见
2015/06/05 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL