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 文档的编码问题解决
Mar 01 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 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
相对路径转化成绝对路径
2007/04/10 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
JS常见算法详解
2017/02/28 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
javascript回调函数详解
2018/02/06 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue-router传参用法详解
2019/01/19 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python查看微信好友是否删除自己
2016/12/19 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python getopt模块使用实例解析
2019/12/18 Python
使用python实现名片管理系统
2020/06/18 Python
python如何查看安装了的模块
2020/06/23 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
资源环境与城市管理专业推荐信
2013/11/30 职场文书
计划生育证明书写要求
2014/09/17 职场文书
共青团员自我评价
2015/03/10 职场文书
初中物理教学反思
2016/02/19 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Redis 常见使用场景
2021/08/30 Redis