jQuery 实现菜单

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>垂直菜单</title>

		<style>

		要注意的:

		/*1. 不要直接给li设置padding,可以在这样导致border也跟着变小

		可以考虑在li中嵌入标签解决

		  2.在插入图片时，li的高度最好等于图片本身高度，不然下拉背景会溢出

		*/

			body,

			html,

			ul {

				padding: 0;

				margin: 0;

			}

			ul {

				list-style-type: none;

			}

			ul li {

				border-bottom: solid 1px gray;

				background: #EEEEEE;

			}

			a {

				text-decoration: none;

				color: black;

				padding-left: 20px;

			}

			.menu {

				margin: 30px auto;

			}

			.main {

				/*background: url(main_bg.png);*/

				background: -webkit-linear-gradient(left, gray, black);

				background-color: #EEEEEE;

				line-height: 37px;

				width: 200px;

				background-repeat: repeat-x;

				position: relative;

			}

			.main ul li {

				/*margin-left: -20px;*/

				/*padding-left: 30px;*/

			}

			.main ul {

				display: none;

			}

			.main span {

				display: block;

				border: 7px solid white;

				border-bottom: 7px solid transparent;

				border-right: 7px solid transparent;

				border-top: 7px solid transparent;

				width: 0;

				height: 0;

				position: absolute;

				top: 11px;

				left: 6px;

			}

			.menu.horizontal {}

			.menu.horizontal .main {

				float: left;

			}

			.menu.horizontal:after {

				content: '';

				display: block;

				overflow: hidden;

				clear: both;

			}

		</style>

		<script src="../jquery-2.2.4.min.js"></script>

		<script>

			$(window).load(function() {

				$('.main').on('click', function() {

					var _this = $(this);

					_this.children('ul').slideToggle();

				});

				$('.horizontal .main').hover(function() {

					var _this = $(this);

					_this.children('ul').slideDown();

				},function(){

					var _this = $(this);

					_this.children('ul').slideUp();

				});

			})

			/*判断并改变图片*/

			function changeIcon(mainNode){

				if(mainNode){

					if(mainNode.css('background-image').indexOf('ag.png')>=0){

						mainNode.css('background-image','url(../../1.png)')

					}else{

					}

				}

			}

		</script>

	</head>

	<body>

		<div class="containner">

			<ul class="menu">

				<li class="main">

					<span></span> <a href="#">主菜单1</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

				<li class="main">

					<span></span> <a href="#">主菜单2</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

				<li class="main">

					<span></span> <a href="#">主菜单3</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

			</ul>

			<br/>

			<ul class="menu horizontal">

				<li class="main">

					<span></span> <a href="#">主菜单1</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

				<li class="main">

					<span></span> <a href="#">主菜单2</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

				<li class="main">

					<span></span> <a href="#">主菜单3</a>

					<ul>

						<li><a href="#">菜单1</a></li>

						<li><a href="#">菜单2</a></li>

						<li><a href="#">菜单3</a></li>

					</ul>

				</li>

			</ul>

		</div>

	</body>

</html>

jQuery 实现菜单的更多相关文章

jquery右键菜单
点击这里体验效果如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
jQuery实现菜单点击隐藏（上下左右）
canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
jquery实现菜单功能（单击展开或者关闭）-一般应用于后台
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
Jquery多级菜单插件Slimmenu使用说明
Jquery多级菜单插件Slimmenu使用说明现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
jQuery手风琴菜单！！！！
jQuery手风琴菜单第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家手风琴的排版排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
jQuery 二级菜单，一次显示一个小类鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类鼠标点击显示小类本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
分享14个很酷的jQuery导航菜单插件
导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...
几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

随机推荐

2016年12月25日星期日 --出埃及记 Exodus 21:20
2016年12月25日星期日 --出埃及记 Exodus 21:20 "If a man beats his male or female slave with a rod and the ...
(转)Could not create the view: An unexpected exception was thrown. 电脑突然断电，myeclipse非正常关闭，出现错误
问题:电脑突然断电,myeclipse非正常关闭,“Package Explorer”非正常显示,出现错误“Could not create the view: An unexpected excep ...
Java类实例化时候的加载顺序
面试试题中经常考到此问题,现在做进一步的总结: public class Student { public Student(String name){ System.out.println(name) ...
nRF52系列来袭，Nordic的低功耗蓝牙方案大有可为
坐落在北欧的挪威不像他的邻居芬兰那样,可以先后依靠NOKIA和愤怒的小鸟在世界科技界享有盛名.在一般人看来,挪威除了一个逐渐式微的Opera浏览器以外,并没有更多拿得出手的科技企业.而事实证明这只 ...
C++string中有关大小和容量的函数浅析
1.length()与size() length是因为沿用C语言的习惯而保留下来的,string类最初只有length,引入STL之后,为了兼容又加入了size,它是作为STL容器的属性存在的,便于符 ...
替换 data.frame 中的特殊的值
替换空值: foo <- data.frame("day"= c(1, 3, 5, 7), "od" = c(0.1, "#N/A", ...
python 反射调用
因为目前在写一个python的项目,用到了Python的反射机制,所以做一下笔记,把写项目过程中的感悟记下来. 先简单介绍下Demo用到的函数: sys.path 是python的模块的路径集,是一个 ...
Core Data
• Core Data 是 iOS SDK 里的一个很强大的框架,允许程序员以面向对象的方式储存和管理数据 .使用 Core Data 框架,程序员可以很轻松有效地通过面向对象的接口 ...
UVa 12299 RMQ with Shifts（移位RMQ）
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: "Times New ...
hdu 3887 Counting Offspring dfs序+树状数组
Counting Offspring Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

jQuery 实现菜单

jQuery 实现菜单的更多相关文章

随机推荐

热门专题