首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
GCN(1) 柱状图(1) Flask(2) SFTP(3) Pytesseract(1) 裁剪图片(1) 鲲鹏(1) 验证码(1) PIL(1) Python(3)
You might like
php 字符转义 注意事项
2009/05/27 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
深入理解python中的atexit模块
2017/03/07 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python GUI编程完整示例
2019/04/04 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python环境搭建和pycharm的安装配置及汉化详细教程（零基础小白版）
2020/08/19 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
eBay奥地利站：eBay.at
2019/07/24 全球购物
企业贷款委托书格式
2014/09/12 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
公司股份合作协议书
2014/12/07 职场文书
如何在Python项目中引入日志
2021/05/31 Python