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第三课 修改元素属性及内容的代码
Mar 14 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js打开新窗口方法整理
Feb 17 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
javascript中clone对象详解
Dec 03 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Openlayers实现地图全屏显示
Sep 28 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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
纯js分页代码(简洁实用)
2013/11/05 Javascript
js select option对象小结
2013/12/20 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
pandas数值计算与排序方法
2018/04/12 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python修改字典键(key)的方法
2019/08/05 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python导入库的具体方法
2020/06/18 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
办理暂住证介绍信
2014/01/11 职场文书
军训 自我鉴定
2014/02/03 职场文书
物理教学随笔感言
2014/02/22 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
MySQL数据库必备之条件查询语句
2021/10/15 MySQL