[Đóng góp] Sidebar kèm nút tắt

Đây là code đầu tiên méo tự làm có sử dụng jQuery nên méo rất là hạnh phúc
Có thể code này không được hoàn hảo hay vip pro gì nhưng ít ra nó cũng an ủi được phần nào công lao học tập của méo *xúc động*

Sidebar kèm nút tắt
Viết bởi: Méo
Vui lòng đừng đem công sức của méo đi rao lung tung :"3
Demo: http://meohachac1.forumvi.com/

Tìm trong Index_body:

Code:

{BOARD_INDEX}

Thay bằng

Code:


<table width="100%">
<tbody>
<tr>
<td width="90%" valign="top">
{BOARD_INDEX}
</td>
<button class="tatsidebar"></button>
<div>
<td width="23%" valign="top" style="padding-left: 10px" class="sidebarfca">
       
<div class="sdbr">
<div class="fcabar">
<div class="titlefca">A á ớ</div>
</div>
<div class="main-content">
<div style="padding:10px;">
Úm ba la xì bùa
<br/>
</div>
</div>
</div>
 
<!-- Thêm khung mới vào chỗ này này -->
     
  </td></div></tr></tbody></table>
<script>
$(document).ready(function(){
  $(".tatsidebar").click(function(){
    $(".sidebarfca").fadeToggle("slow");
  });
});
</script>

Mỗi lần muốn thêm một khung thì thêm một đoạn vào phần méo đánh dấu:

Code:

<br/><br/><div class="sdbr">
<div class="fcabar">
<div class="titlefca">A á ớ</div>
</div>
<div class="main-content">
<div style="padding:10px;">
Úm ba la xì bùa
<br/>
</div>
</div>
</div>

Thêm vào CSS:

Code:

/*Sidebar*/
.sdbr{margin-top:39px;}
.tatsidebar {box-shadow: 0px 0px 10px #069CE4;border-left: 0px solid #000!important;border-radius: 0px 6px 6px 0px;transition: all 0.2s ease;width: 25px;height: 25px;background: #76C6EC;outline: none;border: 3px solid #A8D5EB;cursor: pointer;position: absolute;right: 38px;margin-top: 50px;}/*Nút tắt*/
.tatsidebar:hover {background: #ffb2b2;border-color: #FFD0D0;box-shadow: 0px 0px 10px #FF6E6E;}/*Nút tắt hover*/
.fcabar {font-weight: bold;font-size: 12px;color: #555;background: #ededed;padding: 8px;border: 1px solid #d7d7d7;}/*Phần title*/
.pun .main-content {background-color: #fff;border: 1px solid #d7d7d7;}/*Phần thông tin dưới thanh title*/

Nhớ sửa các thông số trong css và temp cho phù hợp với forum nhé

Hết
Nếu có lỗi gì thì nói tại đây luôn để méo sửa nhé

Cứ học dần dần, làm từ từ từng code nhỏ, gom lại là có code bự bự, bao người mơ ước ^^~

f5 trở lại bình thường , làm sao mà cho f5 vẫn giữ nguyên ấy :D