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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
javascript中如何判断类型汇总
May 14 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 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缓存技术的多种方法小结
2012/08/14 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
phpStorm2020 注册码
2020/09/17 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
老师推荐信
2013/10/28 职场文书
水利学院求职自荐书
2014/02/01 职场文书
领导调研接待方案
2014/02/27 职场文书
人事经理岗位职责
2014/04/28 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
代理词怎么写
2015/05/25 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
python中print格式化输出的问题
2021/04/16 Python