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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js 浏览器事件介绍
Mar 30 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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
Protoss兵种介绍
2020/03/14 星际争霸
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python实现FTP循环上传文件
2020/03/20 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
学生安全责任书模板
2014/07/25 职场文书
社区工作者个人总结
2015/02/28 职场文书
收入证明范本
2015/06/12 职场文书
分家协议书范本
2016/03/22 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技