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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
SVG描边动画
Feb 23 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
JavaScript实现切换多张图片
Jan 27 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
mayfish 数据入库验证代码
2010/04/30 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
人机交互程序 python实现人机对话
2017/11/14 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
什么是serialVersionUID
2016/03/04 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
经理职责范文
2013/11/08 职场文书
地理教师岗位职责
2014/03/16 职场文书
给校长的建议书100字
2014/05/16 职场文书
电子商务专业求职信
2014/07/10 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
庆七一晚会主持词
2015/06/30 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android