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 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jquery 插件开发备注
Aug 27 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
浅谈React高阶组件
Mar 28 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JSONP之我见
2015/03/24 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python中顺序表的实现简单代码分享
2018/01/09 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python爬取哈尔滨天气信息
2018/07/14 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python实现AI换脸功能
2020/04/10 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
校园新闻广播稿
2014/01/10 职场文书
清扬洗发水广告词
2014/03/14 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
消防安全宣传口号
2014/06/10 职场文书
幼儿园标语大全
2014/06/19 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
单位介绍信格式范文
2015/05/04 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
思想品德课教学反思
2016/02/24 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python开发五子棋小游戏
2022/04/28 Python