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

随机推荐

JAVA枚举
枚举类型的使用: 定义一个枚举变量: enum Day{ MOD,TUE,WED,THR,FRI; }; 可以直接输出枚举变量的字符串形式和利用switch输出,在JDK1.6及之前switch只识别 ...
Python基础第三篇
一.collections系列 Counter是对字典类型的补充,用于追踪值的出现次数,具备字典的所有功能 + 自己的功能 1.计数器Counter import collections a='aba ...
Cookie与Session的区别
cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Management Mechanism 是通用c ...
Android网络框架源码分析一---Volley
转载自 http://www.jianshu.com/p/9e17727f31a1?utm_campaign=maleskine&utm_content=note&utm_medium ...
HDU 5690：2016"百度之星" - 初赛 All X
原文链接:https://www.dreamwings.cn/hdu5690/2657.html All X Time Limit: 2000/1000 MS (Java/Others) Mem ...
Linux系统使用yum安装nodejs
先执行: yum install \ http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 再执行: su ...
noi 6045 开餐馆
题目链接:http://noi.openjudge.cn/ch0206/6045/ 解题报告:参考了konjac 蒟蒻的. 题意: 有N个地址,从中选一些开餐馆,要保证相邻餐馆的距离大于k.问最大利润 ...
python学习之for语句
1.range数字范围 for i in range(5): print (i) 结果显示: 0 1 2 3 4 2.列表显示 ']: print ("current num:", ...
彻底删除java＊
提示:先备份重要数据 1. 移除所有 Java相关包 (Sun, Oracle, OpenJDK, IcedTea plugins, GIJ): apt-get update apt-cache se ...
Bootstrap_分页
一.带页码的分页导航 <ul class="pagination"> <li><a href="#">«</a> ...

jQuery 实现菜单

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

随机推荐

热门专题