Vui lòng sao chép ghi nguồn CHINH PHỤC và không hide!
- Đề mô:
Đầu tiên:
rê chuột vào:
Rê vào 1 cái bấy kì:
Thêm đoạn này vào cuối head:
- Code:
<link href='http://fonts.googleapis.com/css?family=Michroma' rel='stylesheet' type='text/css'>
<div class="menu">
<div class="menuItem home"><a href="/">H<span>Home</span></a></div>
<div class="menuItem forum"><a href="/forum">F<span>Forum</span></a></div>
<div class="menuItem rules"><a href="/f1-forum">R<span>Rules</span></a></div>
<div class="menuItem forunter"><a href="/u1">F<span>Founter</span></a></div>
<div class="menuItem contact"><a href="/contact">C<span>Contact</span></a></div>
</div>
- Code:
.menu {top: 0px; left: 0px; color: white!important;position: fixed;height: 100%;width: 65px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Michroma', sans-serif;z-index: 99;}
.menu:hover {width: 220px;}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem span {color:rgba(255,255,255,1);}
.menuItem {position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.menuItem a{color: white!important;}
/*Màu thanh menu */
.home {border-left:5px solid #16a085;}
.home:hover{border-left:20px solid #16a085;}
.forum {border-left:5px solid #2980b9;}
.forum:hover {border-left:20px solid #2980b9;}
.rules {border-left:5px solid #8e44ad;}
.rules:hover {border-left:20px solid #8e44ad;}
.forunter {border-left:5px solid #e67e22;}
.forunter:hover {border-left:20px solid #e67e22;}
.contact {border-left:5px solid #e74c3c;}
.contact:hover {border-left:20px solid #e74c3c;}