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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
JS实现横向轮播图(中级版)
Jan 18 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP文件操作实例总结
2016/09/27 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python用户管理系统
2018/03/13 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
大四学年自我鉴定
2013/11/13 职场文书
篮球赛新闻稿
2015/07/17 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python