错位展示top按钮组

uule

浏览: 6358917 次
性别:
来自: 一片神奇的土地

最近访客更多访客>>

wangenbao1

hyjqdy

逆光下的轮廓

taominghua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

右侧的按钮可以动态展示，即可添加和去掉。

原理：使用CSS background的错位，来按坐标动态展示按钮。

记得以前Google主页有一次那个乐器主页也是这个原理实现的。

默认蓝色框：

鼠标移上后变白色：

其实这是一张图片，各默认图在上面一行，鼠标移上后的白色图在下面一行。

按钮错位大图（两行，下面还有行白的的，页面看不清楚）：

background:

设置或检索对象的背景图像位置。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。

如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。

废话上说，上代码：

HTML：

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>top</title>
<link href="ui.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="top_body">
  <div class="top_logo"></div>
  <div class="top_rightbody">
		<div class="top_menu_user">系统管理员, 你好！</div>
		<div class="shortcut_menu">
		  <ul>
			<li><a title="首页" href="#" class="button_home" onFocus="this.blur()"></a></li>
			<li><a title="注销" href="#" class="button_exit" onFocus="this.blur()"></a></li>
			<li><a title="修改密码" href="#" class="button_password" onFocus="this.blur()"></a></li>
			<li><a title="帮助" href="#" class="button_help" onFocus="this.blur()"></a></li>
			<li><a title="问题反馈" href="#" class="button_faq" onFocus="this.blur()"></a></li>
			<li><a title="关于" href="#" class="button_about" onFocus="this.blur()"></a></li>
		  </ul>
		</div>
  </div>
</div>
</body>
</html>

CSS：

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
}

/* logo */
.top_body {
	width: 100%;
	height: 48px;
	background-color: #2a445f;
}
.top_logo {
	width: 360px;
	height: 48px;
	background: url('icons/aip_logo.png') 0px 0px no-repeat;
	float: left;
}
.top_rightbody {
	width: auto;
	position:absolute;
	top: 8px;
	right: 0;
}
.top_menu_user {
	float: left;
	position: relative;
	background: url('icons/user.png') no-repeat;
	top: 8px;
	padding: 0 15px 3px 20px;
	color: #e3e3e3;
}

/*一级一级下来*/
.shortcut_menu {
	width: auto;
	float: left;
	margin-right: 12px;
}
.shortcut_menu ul {
	width: auto;
	height: 32px;
	list-style: none;
}
.shortcut_menu ul li {
	height: 32px;
	float: left;
	display: block;
	cursor: pointer;
	list-style: none;
	padding-right:8px;
}
.shortcut_menu ul li A {
	display: block;
	height: 32px;
}

/*首页*/
.shortcut_menu li A.button_home {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') 0px 0px no-repeat;
}
/*鼠标放上去后变成下面的白色按钮*/
.shortcut_menu li A.button_home:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') 0px -42px no-repeat;
}
.shortcut_menu li A.button_home:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') 0px 0px no-repeat;
}

/*注销*/
.shortcut_menu li A.button_exit {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -42px 0px no-repeat;
}
.shortcut_menu li A.button_exit:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -42px -42px no-repeat;
}
.shortcut_menu li A.button_exit:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -42px 0px no-repeat;
}

/*修改密码*/
.shortcut_menu li A.button_password {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -84px 0px no-repeat;
}
.shortcut_menu li A.button_password:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -84px -42px no-repeat;
}
.shortcut_menu li A.button_password:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -84px 0px no-repeat;
}

/**/
.shortcut_menu li A.button_help {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -126px 0px no-repeat;
}
.shortcut_menu li A.button_help:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -126px -42px no-repeat;
}
.shortcut_menu li A.button_help:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -126px 0px no-repeat;
}

/**/
.shortcut_menu li A.button_faq {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -168px 0px no-repeat;
}
.shortcut_menu li A.button_faq:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -168px -42px no-repeat;
}
.shortcut_menu li A.button_faq:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -168px 0px no-repeat;
}


.shortcut_menu li A.button_about {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -210px 0px no-repeat;
}
.shortcut_menu li A.button_about:hover {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -210px -42px no-repeat;
}
.shortcut_menu li A.button_about:active {
	width: 32px;
	height: 32px;
	background: url('icons/menu_icon.png') -210px 0px no-repeat;
}

效果图：