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 学习笔记
Mar 05 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
Python CSV模块使用实例
2015/04/09 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python3 flask实现文件上传功能
2020/03/20 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
运动会入场解说词300字
2014/01/25 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
科技馆观后感
2015/06/08 职场文书
班级班风口号大全
2015/12/25 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技