jQuery实现下滑菜单导航效果代码


Posted in Javascript onAugust 25, 2015

本文实例讲述了jQuery实现下滑菜单导航效果代码。分享给大家供大家参考。具体如下:

这里演示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" />
<style>
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul,li {list-style-type:none; text-transform:capitalize;}
.clear {clear:both; *display:inline;/*IE only*/}
#nav {margin:0 auto 60px; width:1080px; display:block;}
#nav .jquery_out {float:left;line-height:32px;display:block; border-right:1px solid #fff; text-align:center; color:#fff;font:18px/32px; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .jquery_out .smile {padding-left:1em;}
#nav .jquery_inner {margin-left:16px;}
#nav .jquery {margin-right:1px;padding:0 2em;}
#nav .mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;/*IE6 only*/}
#nav .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px;}
#nav .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(images/slide-panel_03.png) 0 0 repeat-x;}
#nav .mainlevel ul {display:none; position:absolute;}
#nav .mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;/*IE6 only*/}
.log {text-align:center; color:skyblue; line-height:24px; text-transform:capitalize; margin:50px auto;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('li.mainlevel').mousemove(function(){
 $(this).find('ul').slideDown();//you can give it a speed
 });
 $('li.mainlevel').mouseleave(function(){
 $(this).find('ul').slideUp("fast");
 });
});
</script>
<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br /><br /><br /><br />
<div id="menu">
<ul id="nav">
  <li class="jquery_out">
  <div class="jquery_inner">
  <div class="jquery">
  <span class="text">let'jquery</span><span class="smile">^_^</span>
  </div>
  </div>
  </li>
  <li class="mainlevel" id="mainlevel_01"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_01">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_02"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_02">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_03"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_03">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_04"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_04">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_05"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_05">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  <li><a href="#" target="_blank">animate</a></li>
  </ul>
  </li>
  <li class="mainlevel" id="mainlevel_06"><a href="#" target="_blank">do touch me</a>
  <ul id="sub_06">
  <li><a href="#" target="_blank">JavaScript</a></li>
  <li><a href="#" target="_blank">jQuery</a></li>
  <li><a href="#" target="_blank">slideUp</a></li>
  <li><a href="#" target="_blank">slideDown</a></li>
  <li><a href="#" target="_blank">up and down</a></li>
  </ul>
  </li>
  <div class="clear"></div>
</ul>
</div>
<p align="center"></p>
<p align="center"><p align="center">jquery下拉竖导航菜单代码,来源网络,请原作者联系我们署名。</p></p>
<p align="center"></p>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
JS数组方法slice()用法实例分析
Jan 18 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
You might like
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
react-router中的属性详解
2017/06/01 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
容易被忽略的Python内置类型
2020/09/03 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
工程概预算专业毕业生求职信
2013/10/04 职场文书
ktv好的活动方案
2014/08/15 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
php解析非标准json、非规范json的方式实例
2022/05/10 PHP