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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
第十一节 重载 [11]
2006/10/09 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
Js面试算法详解
2018/04/08 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python中pycurl库的用法实例
2014/09/30 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python iter()函数用法实例分析
2018/03/17 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python与pycharm有何区别
2020/07/01 Python
先进党支部事迹材料
2014/01/13 职场文书
上级检查欢迎词
2014/01/18 职场文书
需求分析说明书
2014/05/09 职场文书
股指期货心得体会
2014/09/10 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书