- cách làm :
cho vào head
cho vào head
- Code:
<div class="menu-portal">
<a href="search">
<div class="khoi1"></div>
</a>
<a href="giakhanhlk">
<div class="khoi2"></div>
</a>
<a href="forum">
<div class="khoi3"></div>
</a>
<a href="profile?mode=editprofile">
<div class="khoi4"></div>
</a>
</div>
- Code:
.menu-portal{
position:fixed;
z-index: 999;
background:transparent;
width:20px;
height:100%;
float:right;
right:0px;
top:0px;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
.menu-portal:hover{
width:100px;
height:100%;
background:#111111;
}
.menu-portal .khoi1
{height:25%;
background: url(http://i57.servimg.com/u/f57/15/64/85/86/search10.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi2
{height:25%;
background:url(http://i57.servimg.com/u/f57/15/64/85/86/share10.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi3
{height:25%;
background: url(http://i57.servimg.com/u/f57/15/64/85/86/forum10.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi4
{height:25%;
background: url(http://i57.servimg.com/u/f57/15/64/85/86/settin10.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi1:hover,.menu-portal .khoi2:hover,.menu-portal .khoi3:hover,.menu-portal .khoi4:hover
{background-color:#222222;}