整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

超酷实用的10款HTML5 CSS3菜单集合!

<html>
<head>
<title>伸缩的菜单</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{ /* 隐藏子菜单 */
display:none;
}
#navigation ul li ul.myShow{ /* 显示子菜单 */
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li,找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL"); //一级菜单的ul标签
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li,且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>

上菜单为二级菜单,伸缩菜单是在一级菜单<li>下点击实现的


<!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" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>伸缩菜单</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body,p,ul,li{padding:0px;margin:0px;}
ul li{list-style:none;}
body{font-size:13px;}
.menu{
width:210px;
margin:50px auto;
border:1px solid #ccc;
}
.menu p{
height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
padding-left:5px;
cursor:pointer;
}

.menu ul li{
height:24px;
line-height:24px;
padding-left:5px;
}
</style>
<script type="text/javascript">
//分析思路
//当页面加载完成后
//获取到所有的p元素 获取到所有的ul元素
//给每一个p元素绑定一个onclick事件
//判断每一个p元素对应的ul是否是隐藏或者是显示
window.onload = function(){
//获取id=menu对象
var div_obj = document.getElementById("menu");
//获取所有的p元素
var ps_obj = div_obj.getElementsByTagName("p");
var ps_length = ps_obj.length;
//获取到所有的ul元素
var uls_obj = div_obj.getElementsByTagName("ul");
//给每一个p元素绑定一个onclick事件
for(var i=0;i<ps_length;i++){
ps_obj[i].id = i; //给每一个p元素加上一个标识
ps_obj[i].onclick = function(){
//判断对应的ul是否是显示或者隐藏

if(uls_obj[this.id].style.display == "none"){
uls_obj[this.id].style.display = "block";
}else{
uls_obj[this.id].style.display = "none";
}

}
}
}

</script>
</head>
<body>
<div id="menu" class="menu">
<div>
<p>web前端</p>
<ul style="display:none;">
<li>HTML</li>
<li>DIV+CSS</li>
<li>JAVASCRIPT</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</div>
<div>
<p>PHP+MYSQL核心编程</p>
<ul style="display:none;">
<li>PHP</li>
<li>MYSQL</li>
<li>HTTP协议</li>
<li>PHP绘图技术</li>
</ul>
</div>
<div>
<p>PHP高级</p>
<ul style="display:none;">
<li>XML编程</li>
<li>AJAX</li>
<li>MVC</li>
</ul>
</div>
</div>
</body>
</html>

类似QQ伸缩菜单:

今天的教程中,我们将创建一个完整的页面列表,该菜单具有两个良好的特性:当在菜单项上方停留时,我们将移动一个适用于当前项的宽度的hover状态项,并且我们将从页面的左侧滑动出一个描述条,到达当前菜单项。

我们将使用jQuery实现该风格的效果和一些CSS3属性。我们不打算使用任何图像。

那么,让我们开始吧!

标记

HTML结构将包含一个无序列表,它表示我们的菜单和一个用于描述元素的div:

<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Description for "About"</span></div>
...
</div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get a quote</a></li>
</ul>

我们省略了“家”的描述,因为没有什么可描述的。当我们在其他项目上悬停时,滑动的div应该出现。

CSS

首先,我们将对菜单及其导航项目进行样式化,然后我们将对这些描述元素进行样式化。

让我们重新设置一些样式:

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}

背景是暗灰色的:

body{	background:#292929;}

菜单上的东西的列表会完全放在屏幕的右边:

.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	right:1px;
	font-family: Arial, Helvetica, sans-serif;
}

菜单项用于右浮动:

.slidingMenu li {	display:block;	float:right;	clear:both;	position:relative;	overflow:hidden;}

" mover "元素的位置是绝对的,我们会将它动态地放置在顶部和宽度上:

.slidingMenu li.move {	width: 9px;	height: 68px;	right:0px;	padding-right:10px;	margin-top:2px;	z-index: 8;	position: absolute;	background: #2183c4;	background:
-webkit-gradient(
linear,
left top,
left bottom,			from(#0771b8),			to(#2183c4)
);	background:
-moz-linear-gradient(
top,			#0771b8,			#2183c4
);	-moz-border-radius: 8px 0px 0px 8px;	-webkit-border-top-left-radius: 8px;	-webkit-border-bottom-left-radius: 8px;	border-top-left-radius: 8px;	border-bottom-left-radius: 8px;	-moz-box-shadow:1px 1px 5px #000;	-webkit-box-shadow:1px 1px 5px #000;	box-shadow:1px 1px 5px #000;	}

我们将以非常微妙的背景梯度和一些盒式阴影来提供这种移动的悬停元素。

链接元素的样式如下:

.slidingMenu li a {	font-size:66px;	text-transform:uppercase;	text-decoration: none;	color: #ddd;	outline: none;	text-indent:5px;	z-index: 10;	display: block;	float: right;	height: 66px;	line-height: 66px;	position: relative;	overflow: hidden;	padding-right:10px;}

这些描述将在一个相对定位的容器中。我们将margin-top设置为相同的值的顶部菜单列表:

/* Descriptions */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}

内部具有描述跨度的div将具有与移动器相同的背地梯度以及相同的盒式阴影。圆形的边界将会在相反的角落:

.slidingMenuDesc div{background: #2183c4;background:-webkit-gradient(linear,left top,left bottom,from(#0771b8),to(#2183c4));background:-moz-linear-gradient(top,#0771b8,#2183c4);height: 68px;padding-right:5px;left:-5px;width:0px;margin-top:2px;overflow:hidden;position:absolute;-moz-box-shadow:1px 1px 5px #000;-webkit-box-shadow:1px 1px 5px #000;box-shadow:1px 1px 5px #000;-moz-border-radius: 0px 8px 8px 0px;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}	

我们需要将这些元素设置为绝对的,因为我们将把顶部调整为当前列表元素,我们将在这里悬停。

描述张成的空间也将是绝对的。这不是必需的,但它给你更多的选择如果你想申请其他动画效果:

.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

现在,让我们来看一下JavaScript !

JavaScript

首先,我们将把下列脚本添加到我们的HTML头部:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="cufon-yui.js" type="text/javascript"></script><script src="BabelSans_500.font.js" type="text/javascript"></script><script src="jquery.easing.1.3.js" type="text/javascript"></script>

我们将添加以下脚本:

$(function() {
Cufon.replace('a, span').CSS.ready(function() {		var $menu 		= $("#slidingMenu");		/**
* the first item in the menu,
* which is selected by default
*/
var $selected	= $menu.find('li:first');		/**
* this is the absolute element,
* that is going to move across the menu items
* It has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving		= $('<li />',{
className	: 'move',
top			: $selected[0].offsetTop + 'px',
width		: $selected[0].offsetWidth + 'px'
});		/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){			var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});		/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like initially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){ var $this = $(this); var offsetLeft = $this.offset().left - 20; //slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');				//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){				var $this = $(this);				var offsetLeft = $this.offset().left - 20;				//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;		/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top		: $elem[0].offsetTop + 'px',
width	: $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});

在我们将字体(所有的“a”元素和所有“span”元素)化之后,主函数就会被执行。我们在默认情况下选择了第一项,那就是我们的“Home”。当我们悬停在菜单项上时,我们将移动li。移动到正确的位置,并从描述项中滑出。

这是它!我们希望你喜欢它并且觉得它很有用!