Nhìn thấy mọi người cứ đăng code trong khi mình chẳng đóng góp được gì ức chế không chịu được
Đem tạm cái hàng cùi skin4fm share sửa lại style đăng lên cho đỡ buồn vậy :(
Ngoài ra mọi người có thể xem thêm phiên bản gốc tại skin4fm
Đem tạm cái hàng cùi skin4fm share sửa lại style đăng lên cho đỡ buồn vậy :(
Chèn vào Overall_header:Thanh nav dọc của Skin4fm [Edited]
Thứ tự từ trái qua phải: Ban đầu - Rê chuột - Rê tiếp vào phần User Profile
- Code:
<div id="left-bar" style="display: block;">
<div class="content-bar">
<nav>
<a href="/" style="text-align: center; display: block;">
<img src="http://i57.servimg.com/u/f57/18/23/08/62/6110.png" title="Skin forumotion" alt="Skin forumotion"/>
</a>
<span id="group-frumlink">
<div class="pro5user">
<a>
<img src="" alt="" title=""/><font color="white">User Profile</font>
</a>
</div>
<div class="infopro5">
<!-- BEGIN switch_user_logged_in --><a href="/profile?mode=editprofile" title="Chỉnh sửa">
<img src="" alt="" title=""/>Sửa profile
</a>
<a href="/profile?mode=editprofile&page_profil=signature" title="Chỉnh sửa">
<img src="" alt="" title=""/>Sửa chữ ký
</a>
<a href="/profile?mode=editprofile&page_profil=avatars" title="Chỉnh sửa">
<img src="" alt="" title=""/>Thay avatar
</a>
<a href="/search?search_id=favouritesearch" title="Tìm kiếm">
<img src="" alt="" title=""/>Bài ưa thích
</a>
<a href="/search?search_id=watchsearch" title="Tìm kiếm">
<img src="" alt="" title=""/>Theo dõi bài viết
</a>
<a href="\/privmsg?folder=inbox" title="Hộp thư">
<img src="" alt="" title=""/>Hộp thư
</a><!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a href="/register">ĐĂNG KÝ</a><a href="/login">ĐĂNG NHẬP</a>
<!-- END switch_user_logged_out -->
</div>
<a href="/" title="" alt="">
<img src="" alt="" title=""/>Something Vui Vẻ
</a>
<a href="/" title="" alt="">
<img src="" alt="" title=""/>Something khác Cũng Vui Vẻ
</a>
</span>
</nav>
</div>
</div>
- Code:
<a href="/" title="" alt="">
<img src="" alt="" title=""/>Something khác Cũng Vui Vẻ
</a>
- Code:
/*Cột menu trái*/
#left-bar{z-index:999;/*background-size:20px;*/background:#333 url(http://i58.servimg.com/u/f58/18/50/03/43/arrow_11.png) no-repeat top right;position:fixed;top:0;left:-160;width:180px;height:100%;transition:all 1s ease}
#left-bar:hover{left:0;background:#d7d7d7 url(http://i58.servimg.com/u/f58/18/50/03/43/arrow_11.png) no-repeat top right;transition:all 1s ease}
#left-bar:hover .content-bar{background:#333;transition:all 1s ease;width:150px}
.content-bar{overflow:hidden;background:#fcfcfc;width:0;height:100%;transition:all 1s ease}
nav a{display:block;line-height:35px;text-align:center;color:#777;font-weight:bold}
#group-frumlink a{background:transparent;transition:all 1s ease;overflow:hidden}
#group-frumlink a:hover{background:#646464;transition:0s}
.container_IE{padding-left:20px}
/*profile nav*/
.infopro5:after {border: 4px solid transparent;border-right-color: #fff;content: " ";height: 0;margin-top: -4px;position: absolute;left: -8px;top: 15%;width: 0;}
.infopro5 {transition:all 0.7s ease;height:210px;position: absolute;left: 130px;width: 100px;background: #fff;border: 1px solid #555;top: 215px;}
.infopro5:hover{top:8%;}
.pro5user:hover+.infopro5{top:8%;transition:all 0.7s ease;}
Ngoài ra mọi người có thể xem thêm phiên bản gốc tại skin4fm