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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
vue使用video插件vue-video-player详解
Oct 23 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python程序退出方式小结
2017/12/09 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
自荐信格式
2013/12/01 职场文书
家长给老师的感谢信
2015/01/20 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
四年级数学教学反思
2016/02/16 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书