code thanh công cụ dạng metro ẩn hiện[✔]

[pelonglk]

demo : http://yeal1.forumvi.com/
rê chuột bên phải màn hình sẽ thấy
- cách làm :
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>

cuối cùng thêm vào css

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;}

[accit]

Good job   

[mrnhock123]

cho nó nằm bên trái thì làm sau

[bucnong1]

Demo online không có cái gì bên phải nhé thớt, đề nghị sửa lại demo
------------------------------------------------------------------

cho nó nằm bên trái thì làm sau

Code:

.menu-portal {
position: fixed;
z-index: 999;
background: transparent;
width: 20px;
height: 100%;
float: left;
left: 0px;
top: 0px;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}
.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;}


Dùng đoạn CSS này

[mrnhock123]

Demo online không có cái gì bên phải nhé thớt, đề nghị sửa lại demo
------------------------------------------------------------------

cho nó nằm bên trái thì làm sau

Code:

.menu-portal {
position: fixed;
z-index: 999;
background: transparent;
width: 20px;
height: 100%;
float: left;
left: 0px;
top: 0px;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}
.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;}


Dùng đoạn CSS này

thế bên phải thì nó ra sau

[bucnong1]

Code trên #1 là bên phải nhé bạn

[nghiahungdn2000]

không có gì xảy ra!

[Sponsored content]