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 动态加载脚本的4种方法
May 05 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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
博士208HAF收音机实习报告
2021/03/02 无线电
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
争当四好少年演讲稿
2014/09/13 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS