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 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
浅析node.js中close事件
Nov 26 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
利用python分析access日志的方法
Oct 26 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
深入解析php之apc
2013/05/15 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python实现滑雪者小游戏
2020/02/22 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
银行实习生的自我评价
2014/01/13 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python基于opencv批量生成验证码的示例
2021/04/28 Python
Python实现简单得递归下降Parser
2022/05/02 Python