jQuery实现的简洁下拉菜单导航效果代码


Posted in Javascript onAugust 26, 2015

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

这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+。简洁明快的jquery网站菜单,请参阅代码。

运行效果截图如下:

jQuery实现的简洁下拉菜单导航效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下拉菜单导航</title>
<style>
body{background: #6595A3;padding: 0 20px}
.clear{clear: both;overflow: hidden;height: 0}
#all{width: 80%;min-width: 650px;margin: 40px auto 0 auto;background: #FCFFED;padding: 20px 35px}
h1{font: 26px tahoma, arial;color: #324143}
p{font: 12px tahoma, arial;color: #171F26;margin-bottom: 25px}
a{color: #324143}
#copyright{width: 80%;min-width: 650px;margin: 0 auto;padding: 20px 35px;background: #B6C28B;font: 12px tahoma, arial;color: #324143}
#copyright a{color: #324143}
#copyright a: hover{color: #171F26}
#jsddm{margin: 0;padding: 0}
#jsddm li{float: left;list-style: none;font: 12px Tahoma, Arial}
#jsddm li a{display: block;background: #324143;padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}
#jsddm li a: hover{background: #24313C}
#jsddm li ul{margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}
#jsddm li ul li{float: none;display: inline}
#jsddm li ul li a{width: auto;background: #A9C251;color: #24313C}
#jsddm li ul li a: hover{background: #8EA344}
</style>
</head>
<body>
<div id="all">
<h1>jQuery简洁下拉菜单导航</h1>
<p>简洁明快的jquery网站菜单,请参阅代码.</p>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout= 500;
var closetimer= 0;
var ddmenuitem= 0;
function jsddm_open()
{  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{  if(closetimer)
  {  window.clearTimeout(closetimer);
    closetimer = null;}}
$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open);
  $('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
 </script>
</p>
<ul id="jsddm">
  <li><a href="#">JavaScript</a>
    <ul>
      <li><a href="#">下拉菜单</a></li>
      <li><a href="#">jQuery插件</a></li>
      <li><a href="#">Ajax Navigation</a></li>
    </ul>
  </li>
  <li><a href="#">Effect</a>
    <ul>
      <li><a href="#">幻灯切换</a></li>
      <li><a href="#">Fade Effect</a></li>
      <li><a href="#">Opacity Mode</a></li>
      <li><a href="#">下滑阴影</a></li>
      <li><a href="#">Semitransparent</a></li>
    </ul>
  </li>
  <li><a href="#">Navigation</a>
    <ul>
      <li><a href="#">Slide Effect</a></li>
      <li><a href="#">Fade Effect</a></li>
      <li><a href="#">Drop Shadow</a></li>
    </ul>
  </li>
  <li><a href="#">HTML/CSS</a>
    <ul>
      <li><a href="#">图片特效</a></li>
      <li><a href="#">Opacity Mode</a></li>
      <li><a href="#">静态网页</a></li>
    </ul>
  </li>
  <li><a href="#" target="_blank">Help</a></li>
</ul>
<div class="clear"> </div>
<br>
<p><b>兼容:</b> IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+<br>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 #Javascript
javascript中的五种基本数据类型
Aug 26 #Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 #Javascript
You might like
php分页思路以及在ZF中的使用
2012/05/30 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
小小聊天室Python代码实现
2016/08/17 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
pandas对指定列进行填充的方法
2018/04/11 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers