首页
所有分类
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 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JS定义网页表单提交（submit）的方法
Mar 20 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Angular2安装angular-cli
May 21 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
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
热力图(1) 数据备份(2) hook(1) 外键约束(1) 脚本(1) Foreign Key(1) dict(1) Vite(1) 字符画(1) expdp(1)
You might like
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
详解XMLHttpRequest（一）同步请求和异步请求
2016/09/14 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue单元格多列合并的实现
2020/11/26 Vue.js
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
应聘美工求职信
2013/11/07 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
入党申请自荐书范文
2014/02/11 职场文书
触电现场处置方案
2014/05/14 职场文书
厕所文明标语
2014/06/11 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
六查六看剖析材料
2014/10/06 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
观后感格式
2015/06/19 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python