jQuery实现的导航下拉菜单效果示例


Posted in Javascript onSeptember 05, 2016

本文实例讲述了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=utf-8" />
<title>导航</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<style>
.t-nav{ width:100%; height:50px; background:#124057;}
.m-nav{ width:1000px; height:50px; margin:0 auto;}
.ui-item{ width:99px; height:50px; line-height:50px; text-align:center; border-right:1px solid #103447;}
.ui-menu{ width:119px; height:50px; line-height:50px; text-align:center; background:#168db8 url(img/menu_ico.gif) no-repeat 101px 23px; border-right:1px solid #0c769e; position:relative;}
.ui-menu-cont{ width:119px; position:absolute; top:50px; left:0px; display:none;}
.ui-menu-cont li{ width:119px; height:30px; line-height:30px; background:#168db8; border-top:1px solid #fff;}
.ui-menu-cont li a{}
.t-nav a{ color:#fff; font-size:14px;}
.t-nav a:hover{ color:#fff; text-decoration:underline;}
</style>
</head>
<body>
<div class="t-nav" style="margin-top:20px;">
  <ul class="m-nav">
    <li class="g-fl ui-item"><a href="###">网站首页</a></li>
    <li class="g-fl ui-item"><a href="###">导航内容</a></li>
    <li class="g-fl ui-menu">
      <a href="###">导航内容</a>
      <ul class="ui-menu-cont">
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
      </ul>
    </li>
    <li class="g-fl ui-menu">
      <a href="###">导航内容</a>
      <ul class="ui-menu-cont">
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
      </ul>
    </li>
    <li class="g-fl ui-menu">
      <a href="###">导航内容</a>
      <ul class="ui-menu-cont">
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
      </ul>
    </li>
    <li class="g-fl ui-menu">
      <a href="###">导航内容</a>
      <ul class="ui-menu-cont">
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
      </ul>
    </li>
    <li class="g-fl ui-menu">
      <a href="###">导航内容</a>
      <ul class="ui-menu-cont">
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
        <li><a href="###">列表内容</a></li>
      </ul>
    </li>
    <li class="g-fl ui-item"><a href="###">导航内容</a></li>
    <li class="g-fl ui-item"><a href="###">导航内容</a></li>
  </ul>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(".ui-menu").hover(function() {
  if($(this).find("li").length > 0){
    $(this).children("ul").stop(true, true).slideDown(100)
  }
},function() {
  $(this).children("ul").stop(true, true).slideUp("fast");
});
</script>
</body>
</html>

效果图:

jQuery实现的导航下拉菜单效果示例

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

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue 全局环境切换问题
Oct 27 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
Vue.js每天必学之数据双向绑定
Sep 05 #Javascript
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 #Javascript
JS查找字符串中出现次数最多的字符
Sep 05 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python 字典中取值的两种方法小结
2018/08/02 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
python爬虫实现获取下一页代码
2020/03/13 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
代办委托书怎么写
2014/08/01 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
费用申请报告范文
2015/05/15 职场文书
银行求职信范文
2019/05/13 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android