1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title>垂直菜单</title>
  7. 		<style>
  8. 		要注意的:
  9. 		/*1. 不要直接给li设置padding,可以在这样导致border也跟着变小
  10. 		可以考虑在li中嵌入标签解决
  11. 		  2.在插入图片时，li的高度最好等于图片本身高度，不然下拉背景会溢出
  12. 		*/
  13.  
  14. 			body,
  15. 			html,
  16. 			ul {
  17. 				padding: 0;
  18. 				margin: 0;
  19. 			}
  20.  
  21. 			ul {
  22. 				list-style-type: none;
  23. 			}
  24.  
  25. 			ul li {
  26. 				border-bottom: solid 1px gray;
  27. 				background: #EEEEEE;
  28. 			}
  29.  
  30. 			a {
  31. 				text-decoration: none;
  32. 				color: black;
  33. 				padding-left: 20px;
  34. 			}
  35.  
  36. 			.menu {
  37. 				margin: 30px auto;
  38. 			}
  39.  
  40. 			.main {
  41. 				/*background: url(main_bg.png);*/
  42. 				background: -webkit-linear-gradient(left, gray, black);
  43. 				background-color: #EEEEEE;
  44. 				line-height: 37px;
  45. 				width: 200px;
  46. 				background-repeat: repeat-x;
  47. 				position: relative;
  48. 			}
  49.  
  50. 			.main ul li {
  51. 				/*margin-left: -20px;*/
  52. 				/*padding-left: 30px;*/
  53. 			}
  54.  
  55. 			.main ul {
  56. 				display: none;
  57. 			}
  58.  
  59. 			.main span {
  60. 				display: block;
  61. 				border: 7px solid white;
  62. 				border-bottom: 7px solid transparent;
  63. 				border-right: 7px solid transparent;
  64. 				border-top: 7px solid transparent;
  65. 				width: 0;
  66. 				height: 0;
  67. 				position: absolute;
  68. 				top: 11px;
  69. 				left: 6px;
  70. 			}
  71.  
  72. 			.menu.horizontal {}
  73.  
  74. 			.menu.horizontal .main {
  75. 				float: left;
  76. 			}
  77.  
  78. 			.menu.horizontal:after {
  79. 				content: '';
  80. 				display: block;
  81. 				overflow: hidden;
  82. 				clear: both;
  83. 			}
  84. 		</style>
  85. 		<script src="../jquery-2.2.4.min.js"></script>
  86. 		<script>
  87. 			$(window).load(function() {
  88. 				$('.main').on('click', function() {
  89. 					var _this = $(this);
  90. 					_this.children('ul').slideToggle();
  91. 				});
  92.  
  93. 				$('.horizontal .main').hover(function() {
  94. 					var _this = $(this);
  95. 					_this.children('ul').slideDown();
  96. 				},function(){
  97. 					var _this = $(this);
  98. 					_this.children('ul').slideUp();
  99. 				});
  100. 			})
  101.  
  102. 			/*判断并改变图片*/
  103. 			function changeIcon(mainNode){
  104. 				if(mainNode){
  105. 					if(mainNode.css('background-image').indexOf('ag.png')>=0){
  106. 						mainNode.css('background-image','url(../../1.png)')
  107. 					}else{
  108.  
  109. 					}
  110. 				}
  111. 			}
  112. 		</script>
  113. 	</head>
  114.  
  115. 	<body>
  116. 		<div class="containner">
  117. 			<ul class="menu">
  118. 				<li class="main">
  119. 					<span></span> <a href="#">主菜单1</a>
  120. 					<ul>
  121. 						<li><a href="#">菜单1</a></li>
  122. 						<li><a href="#">菜单2</a></li>
  123. 						<li><a href="#">菜单3</a></li>
  124. 					</ul>
  125. 				</li>
  126. 				<li class="main">
  127. 					<span></span> <a href="#">主菜单2</a>
  128. 					<ul>
  129. 						<li><a href="#">菜单1</a></li>
  130. 						<li><a href="#">菜单2</a></li>
  131. 						<li><a href="#">菜单3</a></li>
  132. 					</ul>
  133. 				</li>
  134. 				<li class="main">
  135. 					<span></span> <a href="#">主菜单3</a>
  136. 					<ul>
  137. 						<li><a href="#">菜单1</a></li>
  138. 						<li><a href="#">菜单2</a></li>
  139. 						<li><a href="#">菜单3</a></li>
  140. 					</ul>
  141. 				</li>
  142. 			</ul>
  143. 			<br/>
  144. 			<ul class="menu horizontal">
  145. 				<li class="main">
  146. 					<span></span> <a href="#">主菜单1</a>
  147. 					<ul>
  148. 						<li><a href="#">菜单1</a></li>
  149. 						<li><a href="#">菜单2</a></li>
  150. 						<li><a href="#">菜单3</a></li>
  151. 					</ul>
  152. 				</li>
  153. 				<li class="main">
  154. 					<span></span> <a href="#">主菜单2</a>
  155. 					<ul>
  156. 						<li><a href="#">菜单1</a></li>
  157. 						<li><a href="#">菜单2</a></li>
  158. 						<li><a href="#">菜单3</a></li>
  159. 					</ul>
  160. 				</li>
  161. 				<li class="main">
  162. 					<span></span> <a href="#">主菜单3</a>
  163. 					<ul>
  164. 						<li><a href="#">菜单1</a></li>
  165. 						<li><a href="#">菜单2</a></li>
  166. 						<li><a href="#">菜单3</a></li>
  167. 					</ul>
  168. 				</li>
  169. 			</ul>
  170. 		</div>
  171. 	</body>
  172.  
  173. </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. JAVA下的Thread.sleep方法一定要try

    try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } 不同于C#,JAVA里的Thre ...

  2. WPF：设置弹出子菜单的是否可用状态及效果

    需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBl ...

  3. android项目的结构和布局

    一.res文件夹 1.res文件夹用于存放Android的资源.包括:动画.静态图片.字符串.菜单.布局.视频.文件等. 1.drawable-ldpi:低分辨率图形(120像素/英寸) 2.draw ...

  4. iOS 编码规范

    Coding Guidelines for Cocoa https://developer.apple.com/library/prerelease/content/documentation/Coc ...

  5. didFinishLaunchingWithOptions

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  6. printf("%*s%s%*s"，——）是什么？

    我们可能知道scanf里用*修饰符,是起到过滤读入的作用.比如一个有三列数值的数据,我只想得到第2列数值,可以在循环里用scanf(“%*d%d%*d”, a[i])来读入第i行的第2个数值到a[i] ...

  7. jquery之replaceAll(),replaceWith()方法详解

    一:replaceAll() replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素. 该函数属于jQuery对象(实例). 语法 jQuery 1.2 新增该函数. jQueryObj ...

  8. FreeSWITCH无法读取wav文件

    错误日志如下: -- :: Invalid file format [wav] /suite-espanola-op--leyenda.wav]! -- :: Can't open /usr/loca ...

  9. jdbc中如何实现模糊查询

    情况如何 再利用jdbc执行sql语句的时候,对于其他的句子的执行没什么太大的问题:加上占位符,然后设置占位符的值. 但是在模糊查询的时候,一直都写不对,这里提供了两种可选的解决办法,以供参考. 解决 ...

  10. Claims Identity

    using System;using System.Collections.Generic;using System.Linq;using System.Security.Claims;using S ...