各种菜单

1，显示和隐藏二级菜单：ie6+


html代码：

 

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>有二级列表的下拉菜单</title>

	<link rel="stylesheet" type="text/css" href="css/demo1.css">

	<script type="text/javascript" src="script/jquery-1.12.1.min.js"></script>

	<script type="text/javascript" src="script/demo1.js"></script>

</head>

<body>

	<ul class="menu">

		<li><a href="javascript">首页</a>

			<ul>

				<li><a href="javascript:void;">1二级菜单一</a></li>

				<li><a href="javascript:void;">1二级菜单一</a></li>

			</ul>

 

		</li>

		<li><a href="javascript">一级菜单一</a>

			<ul>

				<li><a href="javascript:void;">1二级菜单一</a></li>

				<li><a href="javascript:void;">1二级菜单一</a></li>

			</ul>

		</li>

		<li><a href="javascript">一级菜单二</a></li>

		<li><a href="javascript">一级菜单三</a></li>

		<li><a href="javascript">一级菜单四</a></li>

	</ul>

</body>

</html>
css的代码：


*{margin:0;padding: 0}

body{font-size: 14px;}

a{text-decoration: none;}

li{list-style: none;}

.menu{width: 600px;height: 40px; margin: 0 auto; background: #ccc;}

.menu li{position: relative; float: left; width: 120px; }

.menu li a{display: block; height: 40px;padding:0 10px; line-height: 40px; font-size: 16px; color: #000;text-align: center;}

.menu li a:hover{background-color: #ff0;}

.menu li ul{display: none; position: absolute; left: 0px; top: 40px;}

.menu li ul li{float: none;width: 120px; padding:0;margin-top: 5px; background-color: #ccc;}
jquery的代码：


$(document).ready(function() {

 

//注意这里得用li，否则会出现bug

	$(".menu>li").hover(function() {

		$(this).children(‘ul‘).toggle();

	}, function() {

		$(this).children(‘ul‘).toggle();

	});

 

});
效果展示：

2，变换菜单：ie6+,但是ie7有轻微的抖动：

html:


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>变换菜单</title>

	<link rel="stylesheet" type="text/css" href="css/demo2.css">

</head>

<body>

	<ul>

		<li><a href="javascript:void(0);">首页<span>home</span></a></li>

		<li><a href="javascript:void(0);">首页<span>home</span></a></li>

		<li><a href="javascript:void(0);">首页<span>home</span></a></li>

		<li><a href="javascript:void(0);">首页<span>home</span></a></li>

	</ul>

 

</body>

</html>
css的代码：


*{margin:0; padding: 0}

a{text-decoration: none}

body{font-size: 14px;}

li{list-style: none;}

span{display: block;}

ul{width: 600px;border-bottom: 8px solid #ff0; margin:10px auto;  background: #ccc;overflow: hidden;}

ul li{float: left; width: 80px; margin-right: 1px; line-height: 40px;text-align: center;}

ul a{display: block; font-size: 16px; color: #000;}

ul a:hover{color: #fff; background: #00f;margin-top: -40px;}

ul a:hover span{ display: block;}

ul span{display: none;}

3,多级菜单：兼容ie6+

html代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">   

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <link rel="stylesheet" type="text/css" href="css/demo3.css">

</head>

<body >

	<ul class="nav">

		<li><a href="javascript:void(0);">首页+</a>

			<ul>

				<li><a href="">第一种+</a>

					<ul>

						<li><a href="javasript:void(0);">第二个</a></li>

						<li><a href="javasript:void(0);">第二个</a></li>

						<li><a href="javasript:void(0);">第二个</a></li>

					</ul>

				</li>

				<li><a href="">第一种</a></li>

				<li><a href="">第一种</a></li>

			</ul>

		</li>

		<li><a href="javascript:void(0);">首页</a></li>

		<li><a href="javascript:void(0);">首页</a></li>

		<li><a href="javascript:void(0);">首页</a></li>

		<li><a href="javascript:void(0);">首页</a></li>

	</ul>

 

</body>

</html>
css代码：


*{margin:0; padding: 0;}

body{behavior:url(csshover.htc);}  //兼容ie6的鼠标划过

li{list-style: none;}

a{display: block; text-decoration: none;}

 

.nav{width: 600px;height: 40px; margin: 10px auto}

ul li{float: left; width: 80px; margin-right: 1px;background: #ccc;}

ul li a{height: 40px; line-height: 40px;font-size: 16px; color: #000;text-align: center;}

ul li ul{display: none;}

ul li ul li{float: none; position: relative;}

ul li ul li ul{position: absolute; left: 80px; top: 0;}  //三级菜单

ul li:hover{background: #ff0;}

ul li:hover ul{display: block;}

ul li:hover ul li ul{display: none;}

ul li ul li:hover ul{display: block;}

4,下拉菜单的动画效果：（缓慢展开）

html代码：


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>动画菜单js实现方式</title>

	<link rel="stylesheet" type="text/css" href="css/demo4.css">

</head>

<body>

	<ul>

		<li><a href="javascript:void(0);">首页</a></li>

		<li><a href="javascript:void(0);">首页</a>

			<ul id="subMenu">

				<span class="corner"></span>  <!--这个是箭头-->

				<li><a href="javascript:void(0);">菜单</a></li>

				<li><a href="javascript:void(0);">菜单</a></li>

				<li><a href="javascript:void(0);">菜单</a></li>

			</ul>

		</li>

		<li><a href="javascript:void(0);">首页</a></li>

		<li><a href="javascript:void(0);">首页</a></li>

	</ul>

	<script type="text/javascript" src="script/demo4.js"></script>

</body>

</html>
css代码：


*{margin: 0; padding: 0;}

li{list-style: none;}

a{text-decoration: none;}

body{font-size: 14px;}

ul{width: 600px;margin: 20px auto;}

ul li{position: relative; float: left;background-color: #ccc;margin-right: 1px; }

ul li a{display: block; width: 80px; height: 60px; line-height: 60px;text-align: center;font-size: 18px; color: #000;}

ul li a:hover{background: url(../images/nav-bg.gif) repeat-x;}  //背景图

ul li ul{display: none; position: absolute;left: 0; top: 60px; height: 0; margin: 0px; overflow: hidden;}  //jquery的时候去掉height:0

.corner{display: block; height: 8px; background: url(../images/corner.gif) no-repeat 32px 0; _font-size: 0}
js的实现方式：通改变高度 ie6+


window.onload=function(){

	var lis=document.getElementsByTagName("li");

	for (var i = 0; i < lis.length; i++) {

		lis[i].onmouseover=function() {

			var u=this.getElementsByTagName("ul")[0];

			if(u!=undefined){

				u.style.display="block";

				changeH(u.id,1);

			}

			

		}

 

		lis[i].onmouseleave=function() {

			var u=this.getElementsByTagName("ul")[0];

			if(u!=undefined){

				u.style.display="block";

				changeH(u.id,-1);

			}

		}

	};

}

 

function changeH (id,count) {

	var uList=document.getElementById(id);	

	var height=uList.offsetHeight;

	height+=count;

	if(count>0){

		if(height<=67){

			uList.style.height=height+"px";

			setTimeout("changeH(‘"+id+"‘,1)",10);

		}else{

			return;

		}

	}else{

		if(height>0){

			uList.style.height=height+"px";

			setTimeout("changeH(‘"+id+"‘,-1)",10);

		}else{

			return;

		}

	}

}
jQuery的实现方式：兼容i6+


$(document).ready(function() {

	$("li").hover(function() {

		$(this).children(‘ul‘).slideDown(1000);

	}, function() {

		$(this).children(‘ul‘).slideUp(1000);

	});

 

});
css3.0的实现方式：兼容ie10+:


用到的几个知识点：

实现圆角：border-radius

实现渐变背景：linear-gradient

实现阴影:box-shadow

实现由透明到不透明:transition

实现尖角： :before

5，特效菜单（菜单的切换，菜单的展开和收缩） ie6+

html的代码：


<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>特效菜单</title>

	<link rel="stylesheet" type="text/css" href="css/demo5.css">

	<script type="text/javascript" src="script/jquery-1.12.1.min.js"></script>

	

</head>      

<body>

	<div class="nav" id="nav">

		<a href="javascript:void(0);">首页</a>

		<a href="javascript:void(0);">课程大厅</a>

		<a href="javascript:void(0);">学习中心</a>

		<a href="javascript:void(0);">个人中心</a>

		<a href="javascript:void(0);">关于我们</a>

	</div>

 

	<div class="expand" id="expand">   <!--用于定位置，放背景，控制高度-->

		<div class="expandDiv">  <!--用于控制总的宽度-->  二级菜单的集合

			<div class="expand-list">  <!--单个图片的位置，用flaot:left -->

				<a href="javascript:void(0);">主页</a>

				

			</div>  

			<div class="expand-list">

				<a href="javascript:void(0);">前端课程</a>

				<a href="javascript:void(0);">手机开发</a>

				<a href="javascript:void(0);">后台编程</a>

			</div>

			<div class="expand-list">  

				<a href="javascript:void(0);">Javascript</a>

				<a href="javascript:void(0);">CSS</a>

				<a href="javascript:void(0);">JQuery</a>

			</div>

			<div class="expand-list">

				<a href="javascript:void(0);">主个人信息：页</a>

					

			</div>

			<div class="expand-list">

				<a href="javascript:void(0);">主页</a>

				<a href="javascript:void(0);">主页</a>

				<a href="javascript:void(0);">主页</a>

			</div>

		</div>

		<div class="closeBtn" id="closeBtn"></div>

	</div>

<script type="text/javascript" src="script/demo5.js"></script>

</body>

</html>
css代码：


*{margin: 0; padding: 0}

body{font-size: 18px;}

a{display: inline-block; text-decoration: none; color: #fff; }

.nav{position: absolute;top: 60px;left: 30%;}

.nav a{float: left;margin-left: 50px;color: #000;}

.expand{position: relative;top: 82px;width: 100%;height: 0px;overflow: hidden;background: #333D4D;}

.expandDiv{width: 500%; height: 130px;}

.expandDiv .expand-list{ float: left; width: 20%;line-height: 130px; text-align: center;color: #fff;}

.closeBtn{position: absolute;left: 50%;bottom: 2px; width: 120px;height: 18px;background: url(../images/icon.gif) no-repeat -17px -116px;  margin-left: -60px; cursor: pointer;}
jquery代码：


$(document).ready(function() {

 

	// 不加return false 会有轻微的小bug

 

	$("#nav").on(‘click‘, ‘a‘, function() { //a是用于过滤的

		// 切换，展开

 

 

		//一切回归到原始状态

		if($(this).hasClass(‘btn-active‘)){

			$("#closeBtn").click();

			

		}

 

		// 1，获得现在是第几个a. 多个之间可以用，隔开,index() :获取当前的位置

		var curIndex=$(this).index(),mlValue="-"+curIndex*100+"%";

 

		// 判断是打开

		if($("#expand .expandDiv").hasClass(‘active‘)){

			$("#expand .expandDiv").css({marginLeft:mlValue});

		}else{

			$("#expand .expandDiv").css({marginLeft:mlValue});

			// animate是动画，加了一个虚拟的类

			$("#expand").animate({height:‘130px‘}).addClass(‘active‘); 	

		}

 

		

		//一级菜单处于激活状态

		$(this).addClass(‘btn-active‘).siblings().removeClass(‘btn-active‘);

		return false;

	});

 

	// 按钮关闭

	$("#closeBtn").on(‘click‘, function() {

		$("#expand").animate({height:‘0px‘}).removeClass(‘active‘); 		

		$("#nav .btn-active").removeClass(‘btn-active‘);

 

		return false;

	});

});
效果：
 
时间： 2024-11-17 02:22:17

各种菜单的相关文章

树形菜单 jsTree 使用方法

jsTree版本:3.0.4 在ASP.NET MVC中使用jsTree Model: public class Department { public int Id { get; set; } public string Name { get; set; } public int PId { get; set; } } 数据库: Controller: jsTree既可以一次性把所有节点都加载到客户端,也可以只加载一层,点击节点后再去服务端获取下层节点.对于小的菜单可以一次性加载完,如果节点很

微信 小程序布局 水平菜单

<!-- 菜单列表部分 --> <view class="wear-menu"> <view class='menu-box' wx:key="menu" wx:for="{{menuList}}" wx:for-index="index"> <view class="menu-img" bindtap="selectMenu" data-ind

微信公众号菜单开发以及授权详细说明

主代码请参考:http://www.cnblogs.com/hopelooking/p/7463934.html 难点解析: 在微信创建菜单的时候我们惯用的是curl,但是菜单中难免是要有中文的,如果你的php版本是5.4版本的话,那么一定会报错的,主要错误原因是对象或者字符串之间的错误,那么我们在使用json_encode的时候就不能单纯的只是json一下了,应该json_encode($data,JSON_UNESCAPED_UNICODE) 例子: public function acti

第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件

jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用方法,这个组件依赖 于 Menu(菜单)组件和 LinkButton(按钮)组件. 注意:SplitButton(分割按钮)组件与,MenuButton(菜单按钮)是一样的,不同是(分割按钮)组件多了一个分隔符 一加载方式 class 加载方式 <a href="javascript:void

第一百八十九节，jQueryUI，折叠菜单 UI

jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.accordion 中使用 on 折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能 UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了. 一．使用 accordion 使用 accordion 比较简单,但需要按照指定的规范即可. HTML 部分 <d

在浏览器右键添加自定义菜单

在浏览器右键添加自定义菜单 Afly | 2006-11-8 其实就是类似当安装完 Flashget 后 Internet Explorer 的右键多了"使用网际快车下载"的选项一样,现在我们的需求是:当我们在图片右键时出现"复制图像地址"的选项. 其实很简单,先把下列代码存为 abc.reg 并导入: Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Interne

oracle使用connect by进行级联查询 树型菜单

Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥有一个菜单表t_menu,其中只有三个字段:id.name和parent_id.它们是具有父子关系的,最顶级的菜单对应的parent_id为0.现假设我们拥有如下记录: id name parent_id 1 菜单01 0 2 菜单02 0 3 菜单03 0 4 菜单0101 1 5 菜单0102

WinForm 多窗体、菜单和工具栏

今天,我首先先学习了一下在WinForm程序开发中常遇到的问题——多窗体程序运行问题. 在开发多窗体程序时,常会遇到以下四个方面的问题: 一.哪个是主窗体 问题:主窗体隐藏了,关闭其它窗体后,没有将主窗体显示/关闭,那么程序就关不上了. 当遇到这个问题时,我们通常的解决办法是:构造函数传值,将窗体传到另一个窗体中去,进行关闭. 二.窗体只能打开一个 创建一个全局的泛型集合,为了放置全部打开的窗体.在窗体打开之前,判断集合中是否有name一致的窗体,如果有就说明已经打开了,就不要再打开了. 问题:

Libgdx之国际化 中英文菜单切换

有时候我们做的游戏不仅仅发布在国内市场,有时候也需要发布在国际市场,这时候我们至少需要中英2套菜单来供不同的玩家使用,毕竟中文不是每个人都能看懂. Libgdx中提供了I18NBundle来供我们使用,I18NBundle提供了一套机制可以使我们从属性(properties)文件中加载资源, 属性文件中的资源是以"name"和"values"的形式存在的,而且资源最好有一个父文件,这样防止资源丢失时,可以使用父文件中的值: 通过上面图片可以看出string.prop

微信个性化菜单开发模式

最近一个礼拜搞了一个微信自定义菜单的开发,总的来说蛮郁闷的. 先给几个接口做下分析: 1:查询接口:查询接口分为两个,一个是开发模式下的普通查询接口,他只会查询出你通过添加接口创建出来的菜单和个性化的菜单(让公众号的不同用户群体看到不一样的自定义菜单),而不能获取到你通过微信管理平台添加的菜单.还有一个是可以查询全部菜单的接口,这个接口有点蛋疼,如果你先在平台上添加一个菜单,然后后台调用这个接口就可以获取到这个菜单,但调用这个接口的返回的json跟添加时的格式是不一样的(就是说你把它发回给你的j