时间:2021-05-26
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下:
这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/
具体代码如下:
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery下拉菜单</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style>* { margin: 0; padding: 0; }body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }.wrap { width: 800px; margin: 0 auto; }#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }* html #nav ul { margin: 0 0 0 -2px; }.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }</style></head><body><div class="wrap"> <ul id="nav"> <li><a href="#">网站主页</a></li> <li><a href="#">关于我</a> <ul> <li><a href="#">Company</a></li> <li><a href="#">Authors</a></li> <li><a href="#">Advertising</a></li> </ul> </li> <li><a href="#">RSS订阅</a> <ul> <li><a href="#">PSD</a></li> <li><a href="#">Patterns</a></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">精美博文</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">MySQL</a></li> </ul> </li> <li><a href="#">Web工具</a> <ul> <li><a href="#">Performance</a></li> <li><a href="#">CMS Plugins</a></li> <li><a href="#">Cheat Sheets</a></li> </ul> </li> <li><a href="#">Originals</a> <ul> <li><a href="#">Website Design</a></li> <li><a href="#">Mobile</a></li> </ul> </li> </ul></div><script type="text/javascript">$(document).ready(function() { $('#nav li').hover(function() { $('ul', this).slideDown(200); $(this).children('a:first').addClass("hov"); }, function() { $('ul', this).slideUp(100); $(this).children('a:first').removeClass("hov"); });});</script></body></html>希望本文所述对大家的jquery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网鼠标放到微博、博客或
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下:jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您
本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果。分享给大家供大家参考。具体如下:这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码。分享给大家供大家参考。具体如下:这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联