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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
Express.JS使用详解
Jul 17 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
自学python用什么系统好
2020/06/23 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
股东协议书范本
2014/04/14 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
大学生操行评语大全
2014/12/31 职场文书
美丽心灵观后感
2015/06/01 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers