<!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. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. C# 使用 Abot 实现 爬虫 抓取网页信息 源码下载

    下载地址 ** dome **

  3. 自己封装的 recyclerView的 BaseAdapter，带item点击和长按事件。

    第一种是把创建viewholder的步骤给子类来做. 第二种是参照陈宇明的博客,试着只暴露给子类设置holder属性的方法.(还未测试条目中控件的点击事件能否成功) 代码如下: /** * Creat ...

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

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

  5. Android study first ----------安卓项目目录结构及adb指令

    #Android项目的目录结构 * Activity:应用被打开时显示的界面 * src:项目代码 * R.java:项目中所有资源文件的资源id * Android.jar:Android的jar包 ...

  6. SNMP OID列表 监控需要用到的OID

    zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...

  7. Javascript 学习

    title: Javascript tags: javascript,学习 grammar_cjkRuby: true --- 定义变量 三种形式 var name; var name = " ...

  8. [转]（一）unity4.6Ugui中文教程文档-------概要

    转载请注明出处:http://blog.csdn.net/u010019717更全的内容请看我的游戏蛮牛地址:http://www.unitymanual.com/forum.php?mod=guid ...

  9. [HIHO1196]高斯消元·二（高斯消元、枚举自由变元）

    题目链接:http://hihocoder.com/problemset/problem/1196 #include <bits/stdc++.h> using namespace std ...

  10. TCP连接的状态与关闭方式及其对Server与Client的影响

    TCP连接的状态与关闭方式及其对Server与Client的影响 1. TCP连接的状态 首先介绍一下TCP连接建立与关闭过程中的状态.TCP连接过程是状态的转换,促使状态发生转换的因素包括用户调用. ...