<!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 实现菜单的更多相关文章

  1. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  2. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  3. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  5. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  8. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. 分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...

  10. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

随机推荐

  1. [转]MySQL5.6新特性之Multi-Range Read

    这几天看到mrr的东西,刚好看到以前我们组的一个小伙的博客,我看挺全的,就转过来了,原博客地址请戳 一 介绍    MySQL 5.6版本提供了很多性能优化的特性,其中之一就是 Multi-Range ...

  2. xcode编译错误

    1.xcode无效文件的编译错误. 问题: clang: error: no such file or directory: '/Users/admin/client/trunk/sengoku_sc ...

  3. HTML 5 的data-* 自定义属性

    HTML 5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器 ...

  4. Android ListView实现不同item的方法和原理分析

    ListView实现不同item的方法和原理分析 一问题抛出Listview是android里面的重要组件,用来显示一个竖向列表,这个没有什么问题:但是有个时候列表里面的item不是一样的,如下图,列 ...

  5. Viking Village维京村落demo中的粒子距离消隐

    Custom/DistanceFade shader 粒子雾似乎可以使用.尝试给面片套用该效果,但由于有顶点变形,效果不太好,要做些改动

  6. python 学习笔记十二 html基础（进阶篇）

    HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身 是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览 ...

  7. javascript实现动态侧边栏

    总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 <body> <div id="div ...

  8. Apache Solr 访问权限控制

    Current state of affairs SSL support was added in version 4.2 (SolrCloud v4.7). Protection of Zookee ...

  9. php上传绕过

    URL:http://www.ichunqiu.com/section/45 php语言除了可以解析以php为后缀的文件,还可以解析php2.php3.php4.php5这些后缀的文件.

  10. AlarmManager 实现闹钟的基本功能

    先上效果图 这是一个利用AlarmManager做的最简单的闹钟!迟点再把重复响铃(例如星期一,星期三,重复响铃) 1.MainActivity package com.example.domeref ...