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遍历数组与筛选数组的方法
Nov 05 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
js动态切换图片的方法
Jan 20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
javascript globalStorage类代码
2009/06/04 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的几种开发工具介绍
2007/03/07 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python用for循环实现九九乘法表
2018/05/31 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
PyQt5响应回车事件的方法
2019/06/25 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
《红军不怕远征难》教学反思
2014/04/14 职场文书
师范生自荐信模板
2014/05/28 职场文书
合作合同协议书范本
2015/01/27 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
跳高加油稿
2015/07/21 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang