仿淘宝纵向菜单

guimingyue

浏览: 75760 次
性别:
来自: 湖北

最近访客更多访客>>

zlh142857

AILIKES

z191912a

hlei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

jQuery CSS JavaScript Google HTML

最近感觉淘宝的我是买家的那里的纵向菜单用起来蛮舒服的，就想做一个这样的菜单，学习一下，但是苦于前端的技术学的不咋样，于是就相当了咱伟大的Google，搜了一下，发现有个朋友也仿淘宝做了一个这样的菜单，就拿来学习一下，看了那位仁兄的源码之后，感觉这位仁兄的JS水平比较高，整个菜单都是用的JS和CSS写的，还有JQuery用得比较熟，竟然没有用HTML标签。所以就想将这位仁兄的代码改一下，用HTML，CSS和JS来做。由于使用了JQuery，自己写的代码量比较小（PS：俺只是修改的那位仁兄的代码，在网上找的那位仁兄的代码在页面载入之后，菜单都是展开到的，俺就改了改）各部分代码如下

<!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=gb2312" />

<title>无标题文档</title>
<script type="text/javascript"  src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript"  src="script/mymenu.js"></script>
<link href="css/coolMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id='page'>
		<div class='grid-c2' id='coolMenu-panel'>
			<div class='box-diamond' id='coolMenu-menu'>
				<div class='coolMenu-bd' id='menuPad'>
					<div class='menu-box' id='menu_001'>
						<h3 class='coolMenu-bar'>
							<span>我是买家</span>
							<button class='menu-open'></button>
						</h3>
						<ul class='group' id='menu_001'>
								<li id='menu_011'><span>[url=#]我的收藏[/url]</span></li>
								<li id="menu_012"><span>[url=#]我的购买[/url]</span></li>
								<li id="menu_013"><span>[url=#]我的发票[/url]</span></li>
						</ul>
					</div>
					<div class='menu-box' id='menu_001'>
						<h3 class='coolMenu-bar'>
							<span>我是买家</span>
							<button class='menu-open'></button>
						</h3>
						<ul class='group' id='menu_001'>
								<li id='menu_011'><span>[url=#]我的收藏[/url]</span></li>
								<li id="menu_012"><span>[url=#]我的购买[/url]</span></li>
								<li id="menu_013"><span>[url=#]我的发票[/url]</span></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>


body
{
  padding: 0;
  font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
}

a 
{
	text-decoration:none;
}
.grid-c2 .col-sub
{
  margin-left: 0;
}
#page, #content
{
  width: 150px;
  overflow: hidden;
  margin-left: 0;
}
li 
{
	list-style:none outside none;
}
.hidden
{
	display: none;
}

.visible {
	display:block;
}


#coolMenu-panel .main-wrap #main-content,.box-diamond .coolMenu-bd,.box-diamond-white .coolMenu-bd {
	background-color: #FFF;
	border: 1px solid #c4d5e0;
}




#coolMenu-menu .menu-box {
	background: #FDFEFF;
	padding: 0;
	margin-top: -1px;
	overflow: hidden;
	*zoom: 1;
}

#coolMenu-menu .menu-box a {
	color: #414141;
}

.coolMenu-bar span,.coolMenu-bar-grey span {
	font-weight: bold;
	line-height: 26px;
	font-size: 12px;
	background-color: #EFF4F7;
	margin: 1px;
	padding-left: 22px;
	background: #f0f5f9 url(../images/v4_bg.png) scroll repeat-x 0 -100px;
	display: block;
}
#coolMenu-menu .coolMenu-bar button.menu-open,#coolMenu-menu .coolMenu-bar button.menu-close {
	position: absolute;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	cursor: pointer;
	top: 9px;
	left: 6px;
	border: 0;
	overflow: hidden;
	background: url(../images/v4_bg.png) no-repeat scroll 2000px 2000px;
}
#coolMenu-menu .coolMenu-bar {
	background-color:#FFFFFF;
	border-color:#C4D5DF;
	border-style:solid;
	border-width:1px 0;
	cursor:pointer;
	height:28px;
	line-height:28px;
	margin:0;
	padding:0;
	position:relative;
	width:100%;
}
#coolMenu-menu .coolMenu-bar button.menu-close {
	background-position: 0 -200px;
}
#coolMenu-menu .coolMenu-bar button.menu-open
{
	background-position: -20px -200px;
}
#coolMenu-menu .group {
	display:none;
	margin: 6px 5px 10px;
	clear: both;
	*zoom: 1;
}

#coolMenu-menu .group li {
	padding: 3px 0;
	float: left;
	width: 100%;
	clear: both;
}

#coolMenu-menu #account .group li a,#coolMenu-menu .group li span a,#coolMenu-menu .group li ul li a {
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	display: block;
	*zoom: 1;
	background: transparent url(../images/v4_bg.png) scroll no-repeat 2000px 2000px;
}
#coolMenu-menu #account .group li a,#coolMenu-menu .group li span a {
	padding-left: 18px;
}
#coolMenu-menu .group li ul {
	margin-left: 0;
	overflow: hidden;
	padding:0px;
}
#coolMenu-menu .group li ul li {
	padding: 6px 0 0;
}
#coolMenu-menu .group li ul li a {
	padding-left: 30px;
	display: block;
}
#coolMenu-menu .group li a:hover {
	background-color:#DEE7ED;
	background-position:-200px -150px;
}

#coolMenu-menu .group li.fold-close ul {
	display: none;
}
#coolMenu-menu .group li.fold-open span a {
	background-position: 0 -150px;
}
#coolMenu-menu .group li.fold-close span a {
	background-position: 0 -170px;
}
body, div, ul,  li, h3
{
	margin:0;
	padding:0;
}

$(document).ready(function() {
	$("h3[class='coolMenu-bar']").toggle(
    	function() 
	    {	
	        $(this).next("ul:first").css("display","block");
	        $(this).find("button").removeClass("menu-open").addClass("menu-close");
	    },
	    function() 
	    {
	        $(this).next("ul:first").css("display","none");
	        $(this).find("button").removeClass("menu-close").addClass("menu-open");
    	}
    );	
});

注：代码中需要进入JQuery的代码