首页
所有分类
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 相关文章推荐
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
Keras(3) variable_scope(1) 三子棋(2) data(4) 神经网络(7) character(1) 信号库(1) blinker(1) name_scope (1) 字符集(1)
You might like
php基于GD库画五星红旗的方法
2015/02/24 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
java中两个byte数组实现合并的示例
2018/05/09 Python
python实现五子棋小程序
2019/06/18 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python如何给你的程序做性能测试
2020/07/29 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店：Medical Supply Depot
2018/07/08 全球购物
台湾家适得：Homeget
2019/02/11 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
中专生自荐信
2014/06/25 职场文书
今日说法观后感
2015/06/08 职场文书