Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
#Frame {
	width:460px;
	height:380px;
	border:0px solid black;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-230px;
	margin-top:-190px;
}
.menu1,.menu2,.menu3,.menu4 {
	width:275px;
	height:95px;
	border-right:1px solid black;
}
.font1,.font2 {
	width:100%;
	height:45px;
	border:0px solid black;
	text-align:right;
}
.font1 {
	font-size:14px;
	color:#009;
}
.font2 {
	font-size:23px;
	color:#000;
	font-weight:bold;
}
.menu1:hover {
	background:#b43e3e;
}
.menu2:hover {
	background:#d8da5d;
}
.menu3:hover {
	background:#d98d42;
}
.menu4:hover {
	background:#c4a8a4;
}
.menu1:hover .font2 {
	color:#fff;
}
.menu2:hover .font2 {
	color:#fff;
}
.menu3:hover .font2 {
	color:#fff;
}
.menu4:hover .font2 {
	color:#fff;
}
img {
	position:absolute;
	left:0;
	top:0;
	z-index:-20;
	opacity:0;
	transition:5s all ease;
}
.menu1:hover+img {
	transform:translate(275px,0px);
	opacity:1;
}
.menu2:hover+img {
	transform:translate(275px,0px);
	opacity:1;
}
.menu3:hover+img {
	transform:translate(275px,0px);
	opacity:1;
}
.menu4:hover+img {
	transform:translate(275px,0px);
	opacity:1;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

菜单渐入渐出

纯css特效菜单

0