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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
redux处理异步action解决方案
Mar 22 Javascript
javascript实现简易数码时钟
Mar 30 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中基本符号及使用方法
2010/03/23 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
javascript 禁止复制网页
2009/06/11 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue代理和跨域问题的解决
2018/07/18 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python面向对象特殊成员
2017/04/24 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python异常的检测和处理方法
2018/10/26 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
总监职责范文
2013/11/09 职场文书
退休感言
2014/01/28 职场文书
十一酒店活动方案
2014/02/20 职场文书
电子专业求职信
2014/06/19 职场文书
工作年限证明模板
2014/11/01 职场文书