[Đóng góp] Thanh nav dọc của Skin4fm

  Bài viết hay nhất1
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 :(

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
Chèn vào Overall_header:
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>
Mỗi lần thêm một khung là thêm một đoạn
Code:
<a href="/" title="" alt="">
          <img src="" alt="" title=""/>Something khác Cũng Vui Vẻ
        </a>
Thêm Css nữ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;}
Xong

Ngoài ra mọi người có thể xem thêm phiên bản gốc tại skin4fm
  Bài viết hay nhất2
Cái sidebar nó bị lồi lõm nè anh, có cách nào chỉnh lại ko hả anh


  Bài viết hay nhất3
Chỉnh lại margin, width, height là được
Sửa làm sao thì tự mò lấy nhóe :-j
  Bài viết hay nhất4
Méo vãi thật, chỉ thì chỉ tới bến đi, còn bắt người ta tự sửa :3
  Bài viết hay nhất5

Mr.Bean wrote:Méo vãi thật, chỉ thì chỉ tới bến đi, còn bắt người ta tự sửa :3

Thế này nhé:
Mình vừa cài xong cái này của méo rồi bảo: Méo, bố thích cái nền màu xanh, với cái chữ khác
Méo nói: Sửa xong CSS ấy bạn
Mình rep: Mệt va~i, chỉ mẹ nó đi còn bắt bố tự sửa

Không đưa cả link test, nghe thử xem tác giả có chối tai bome ra không -_-
  Bài viết hay nhất6
@KirigayaKazuto :
You cannot reply to topics in this forum