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禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

随机推荐

芯航线FPGA学习套件之多通道串行ADDA(TLV1544,TLC5620)模块测试手册
芯航线FPGA学习套件之多通道串行ADDA模块测试手册本手册以简明扼要的方式介绍芯航线FPGA学习套件提供的ADDA模块的测试方法: 连接开发板,如下所示: 2.将ADDA V1.1模块与开 ...
Hadoop日志文件分析系统
Hadoop日志分析系统项目需求: 需要统计一下线上日志中某些信息每天出现的频率,举个简单的例子,统计线上每天的请求总数和异常请求数.线上大概几十台服务器,每台服务器大概每天产生4到5G左右的日志 ...
精彩的解释CAP理论的文章
强一致性(Consistency): 更新操作成功并返回客户端完成后,分布式的所有节点在同一时间的数据完全一致. 可用性(Availability):读和写操作都能成功. 分区容错性(Partiti ...
Python基础第三篇
一.collections系列 Counter是对字典类型的补充,用于追踪值的出现次数,具备字典的所有功能 + 自己的功能 1.计数器Counter import collections a='aba ...
js 操作字符串
去w3school看看string的基本方法把: 方法描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. ...
AtCoder Beginner Contest 050 ABC题
A - Addition and Subtraction Easy Time limit : 2sec / Memory limit : 256MB Score : 100 points Proble ...
Android中SQLite应用详解
上次我向大家介绍了SQLite的基本信息和使用过程,相信朋友们对SQLite已经有所了解了,那今天呢,我就和大家分享一下在Android中如何使用SQLite. 现在的主流移动设备像Android.i ...
从零开始学iPhone开发（4）——使用WebView
转自总结关于iPhone中UIWEBVIEW读取本地GBK编码格式html 关于webView读取本地GBK编码的html,尝试了两天,终于成功. 欢喜之余,把感想记下来.一般来说,不成都是人犯错, ...
linux(centos )mongodb install
file down :http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.4.9.tgz /usr/local/ tar zxvf mongo ...
《BI那点儿事》数据流转换——OLE DB 命令转换
OLE DB命令对数据流中的数据行执行一个OLE DB命令.它针对数据表中的每一行进行更新操作,可以事先将要更新的数据存放在表中.或者针对一个有输入参数的存储过程,可以将这些参数存放在一个数据表中,不 ...

jQuery 实现菜单

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

随机推荐

热门专题