Trang Chính
1![[Code] Đóng mở thanh menu dọc forum Empty](https://2img.net/i/empty.gif)
[Code] Đóng mở thanh menu dọc forum Mon Nov 12, 2012 8:24 am
Admin
Trùm Forum avatar-data : 57,11597|47,11460|50,11927|49,10992|64,12636|51,11466|48,12921|58,12249|66,11440
Posts : 354
Uy Tín : 13
Points : 1048
Giới tính : 
Posts : 354 Uy Tín : 13 Points : 1048 Giới tính : Demo:
[You must be registered and logged in to see this image.]
Vào Index body tìm:
thay bằng:
Muốn thêm 1 ô thì thêm đoạn:
trên:
Cho vào cuối Header:
Footer Begin:
CSS:
Nguồn: ChinhPhuc
[You must be registered and logged in to see this image.]
Vào Index body tìm:
- Code:
{BOARD_INDEX}
thay bằng:
- Code:
<div id="content">
<div id="content_container">
{BOARD_INDEX}
</div>
</div>
<div id="menu_close" style="display: none;"><p><a
href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content',
'expended_main');"><img
src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-expanded.png"
alt="Display the menu" title="Display the
menu"></a></p></div>
<div id="sidebar_home">
<script type="text/javascript">//<![CDATA[
document.getElementById('hide-menu').style.display = 'block';//]]></script>
<div id="sidebar_container">
<p id="hide-menu" style="display: block; "><a
href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content',
'expended_main');"><img
src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-collapsed.png"
alt="Hide the menu" title="Hide the menu"></a></p>
<ul id="sidebar">
<li><div
class="block smaller"><div class="blocksubhead"><a
class="collapse" id="collapse_block_newthreads_1" href="#top"><img
alt=""
src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png"
id="collapseimg_newthreads_1"></a><span
class="blocktitle">[Name. . .]</span></div>
<div class="widget_content blockbody floatcontainer">
[Nội dung. . .]
</div></div><div class="underblock"></div></li> </ul></div></div>
Muốn thêm 1 ô thì thêm đoạn:
- Code:
<li><div class="block smaller"><div
class="blocksubhead"><a class="collapse"
id="collapse_block_newthreads_1" href="#top"><img alt=""
src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png"
id="collapseimg_newthreads_1"></a><span
class="blocktitle">[Name. . .]</span></div>
<div class="widget_content blockbody floatcontainer">
[Nội dung. . .]
</div></div><div class="underblock"></div></li>
trên:
- Code:
</ul></div></div>
Cho vào cuối Header:
- Code:
<div id="content">
<div id="content_container">
Footer Begin:
- Code:
</div>
</div>
<div id="menu_close" style="display: none;"><p><a
href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content',
'expended_main');"><img
src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-expanded.png"
alt="Display the menu" title="Display the
menu"></a></p></div>
<div id="sidebar_home">
<script type="text/javascript">//<![CDATA[
document.getElementById('hide-menu').style.display = 'block';//]]></script>
<div id="sidebar_container">
<p id="hide-menu" style="display: block; "><a
href="javascript:ShowHideMenu('sidebar_home','menu_close', 'content',
'expended_main');"><img
src="http://westlifevn.net/forum/images/styles/GamerGreen/misc/tab-collapsed.png"
alt="Hide the menu" title="Hide the menu"></a></p>
<ul id="sidebar">
<li><div
class="block smaller"><div class="blocksubhead"><a
class="collapse" id="collapse_block_newthreads_1" href="#top"><img
alt=""
src="http://westlifevn.net/forum/images/styles/GamerGreen/buttons/collapse_40b.png"
id="collapseimg_newthreads_1"></a><span
class="blocktitle">[Name. . .]</span></div>
<div class="widget_content blockbody floatcontainer">
<div id="{ID_RIGHT}">
<!-- BEGIN giefmod_index2 -->
{giefmod_index2.MODVAR}
<!-- BEGIN saut -->
<div style="height: {SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index2 -->
</div>
</div></div><div class="underblock"></div></li> </ul></div></div>
</tr>
</tbody>
</table>
</div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
<div align="center">
<div class="gen">
<!-- BEGIN html_validation -->
</div>
</div>
</div>
<!-- END html_validation -->
CSS:
- Code:
/*side bar-------------------------------------------------------------------*/
#hide-menu {
display:block;margin-top:40px;float:right;margin-right:-28px;_margin:40px 0 0 0;_display:inline-block
}
#hide-menu {
_display:inline
}
#menu_close {
display:block;margin-top:40px;float:right;margin-right:-28px;_margin:40px 0 0 0;_display:inline-block
}
#menu_close {
_display:inline
}
#sidebar_container.sidebarleft #sidebar_button {
float:left;margin-left:-28px
}
#sidebar_container {
float: right;
width: 270px;
padding: 17px 0;
margin-bottom: 3em;
}
#sidebar_container > ul {
background: #ECF1E2 url(http://westlifevn.net/forum/images/misc/blog/top-highlight.png) repeat-x left top;
border: 1px solid #D2DBC0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: -2px 2px 2px #C8C8C8;
-webkit-box-shadow: -2px 2px 2px #C8C8C8;
box-shadow: -2px 2px 2px #C8C8C8;
float: left;
width: 100%;
list-style: none;
padding: 0;
}
#sidebar_container .block {
margin-bottom: 4px;
padding: 6px;
border-top-right: 5px;
border-top-left: 5px;
border-top-right: 5px;
border-top-left: 5px;
}
#sidebar_container .blocksubhead {
background: transparent none;
height: 16.76px;
color: #424242;
padding: 5px 6px;
border: none;
outline: none;
font-weight: bold;
}
#sidebar_container a.collapse {
position: static;
}
#sidebar_container .blocksubhead a img {
vertical-align: middle;
float: right;
}
.widget_content {
color: #424242;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: white url(http://i1122.photobucket.com/albums/l525/liger1723/GmGreen/gradient-black-down.png) repeat-x;
border: 1px solid #DADADA;
_background-image: none;
padding: 10px 6px 10px 6px;
}
#sidebar_container .blockbody {
color: #424242;
border: 1px solid #DADADA;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: white;
_background-image: none;
padding: 0;
}
#sidebar_container .underblock {
height: 9px;
background: transparent url(http://westlifevn.net/forum/images/misc/blog/bottom-shadow.png) repeat-x left bottom;
}
#content_container {
width: 100%;
float: left;
margin-right: -290px;
padding: 10px 0;
}
#content_container #content {
margin-right: 290px;
}
#content {
width: 72%;
padding:0;
padding-bottom: 10px;
}
#content.expended_main {
width: 100%;
}
#content {
margin: 20px 0px 0px 0px;
padding-left: 0px;
float: left;
}
/*side bar-------------------------------------------------------------------*/
Nguồn: ChinhPhuc
