Slide menu - Menu trượt dọc bên trái blog/web

1. Slide Menu [http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm]

<script language='JavaScript1.2' src='http://4pvn.com.vn/img/Type/404.js'>
</script>
<style type='text/css'>
A.ssmItems:link {color:#3366cc;text-decoration:none;}
A.ssmItems:hover {color:#000033;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:#fd0243;text-decoration:none;}
</style>
<script language='JavaScript'>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=&quot;#fff&quot;; // màu của các border
menuIsStatic=&quot;yes&quot;;
menuWidth=200; // Độ rộng của menu
menuCols=2;
hdrFontFamily=&quot;verdana&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;#fff&quot;; // Màu text của thư mục chính
hdrBGColor=&quot;#000099&quot;; // Màu nền thư mục chính
hdrAlign=&quot;center&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;
linkFontFamily=&quot;Verdana&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;#FCFEFF&quot;; // Màu nền chính
linkOverBGColor=&quot;#fff&quot;; // Màu nền khi rê chuột
linkTarget=&quot;_top&quot;;
linkAlign=&quot;left&quot;;
barBGColor=&quot;#ff0000&quot;;
barFontFamily=&quot;Verdana&quot;;
barFontSize=&quot;1&quot;;
barFontColor=&quot;#fff&quot;;
barVAlign=&quot;center&quot;;
barWidth=16;
barText=&quot;MENU GO GHEP&quot;; // Tên bạn muốn đặt cho sidemenu đó
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave &#39;link&#39; and &#39;target&#39; blank to make a header
ssmItems[0]=[&quot;Chuyên mục&quot;] // Thư mục chính
ssmItems[1]=[&quot;Blog&quot;, &quot;http://www.namtrungjsc.vn/search/label/blog&quot;, &quot;&quot;]
ssmItems[2]=[&quot;Báo giá gỗ&quot;, &quot;http://www.namtrungjsc.vn/search/label/báo giá gỗ&quot;,&quot;&quot;]
ssmItems[3]=[&quot;Bộ sưu tập&quot;, &quot;http://www.namtrungjsc.vn/search/label/bộ sưu tập&quot;, &quot;&quot;]
ssmItems[4]=[&quot;Công thức nấu nướng&quot;, &quot;http://www.namtrungjsc.vn/search/label/công thức nấu nướng&quot;, &quot;&quot;]
ssmItems[5]=[&quot;Cười chút chơi&quot;, &quot;http://www.namtrungjsc.vn/search/label/cười chút chơi&quot;, &quot;&quot;]
ssmItems[6]=[&quot;Gia công gỗ&quot;, &quot;http://www.namtrungjsc.vn/search/label/gia công gỗ&quot;, &quot;&quot;]
ssmItems[7]=[&quot;Gỗ ghép&quot;, &quot;http://www.namtrungjsc.vn/search/label/gỗ ghép&quot;, &quot;&quot;]
ssmItems[8]=[&quot;Kiến thức gỗ&quot;, &quot;http://www.namtrungjsc.vn/search/label/kiến thức gỗ&quot;, &quot;&quot;]
buildMenu();
</script>

2. Slide menu 3 :

<style>#box{ width:190px; font-size:12px; line-height:20px; right:-140px; top:25%; position:fixed; z-index:100}#tab{ float:left; list-style:none outside none; margin:0; padding:0; position:relative; z-index:99}#tab li span{ display:block; padding:0 5px; position:relative}#links{ width:80px; padding:10px; float:left; border-left:1px solid #B4B8BB}.show,.hide{ transition:margin-right .4s ease-in; -webkit-transition:margin-right .4s ease-in}.hide{ margin-right:0px}.show{ margin-right:95px}#arrow,bt{ cursor:pointer}.bt{ width:77px; height:40px; margin:-1px; text-align:center; border:1px solid #858fa6; font:bold 13px Helvetica,Arial,sans-serif; text-shadow:0px 0px 5px rgba(0,0,0,0.75); background:#014464; background-image:-o-linear-gradient(left,#1F82AF,#002F44); background-image:-ms-linear-gradient(left,#1F82AF,#002F44); background-image:-moz-linear-gradient(left,#1F82AF,#002F44); background-image:-webkit-linear-gradient(left,#1F82AF,#002F44); background-image:-webkit-gradient(linear,left top,right top,from(#1F82AF),to(#002F44))}.bt a{ line-height:40px; color:#fff; display:block}.bt:hover{ transition:background .3s linear; background:#32A3D3; -o-transition:background .3s linear; -moz-transition:background .3s linear; -webkit-transition:background .3s linear}#deco{ width:75px; float:left; box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000}</style>
<div id="box" class="hide">
<ul id="tab">
<li>
<img id="arrow" onclick="toggle(&#39;box&#39;);" src="http://4pvn.com.vn/img/Type/405.png" />
</li>
</ul>
<div id="links">
<div id="deco">
<div class="bt">
<a href="http://www.namtrungjsc.vn/search/label/gỗ ghép" >Gỗ ghép</a></div>
<div class="bt">
<a href="http://www.namtrungjsc.vn/search/label/blog" >Blog</a></div>
<div class="bt">
<a href="http://www.namtrungjsc.vn/search/label/báo giá gỗ" >Báo giá gỗ</a></div>

</div>
</div>
</div>
<script language='javascript'>
function toggle(id) {
var el = document.getElementById(id);
var img = document.getElementById("arrow");
var box = el.getAttribute("class");
if(box == "hide"){
el.setAttribute("class", "show");
delay(img, "http://4pvn.com.vn/img/Type/406.png", 400);
}
else{
el.setAttribute("class", "hide");
delay(img, "http://4pvn.com.vn/img/Type/405.png", 400);
}
}
function delay(elem, src, delayTime){
window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);
}</script>


3. Slide Menu 2

<script src="http://4pvn.com.vn/img/Type/399.js" type="text/javascript"></script>
<script src="http://4pvn.com.vn/img/Type/400.js" type="text/javascript"></script>
<script src="http://4pvn.com.vn/img/Type/401.js" type="text/javascript"></script>
<style>
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#sideBar{text-align:left;}
#sideBar h2{
color:#ffee00
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#da1074;
width:177px;
color:#ffffff;}
#sideBar li a{width:100%;}
#sideBar li a:link,
#sideBar li a:visited{
color:#ffffff;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;}
#sideBar li a:hover{
color:#ffff00;
text-decoration:underline;}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://4pvn.com.vn/img/Type/403.gif);
background-position:top right;
background-repeat:repeat-y;}
#sideBarTab{
float:left;
height:137px;
width:28px;}
#sideBarTab img{
border:0px solid #ffffff;}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>My<span>LeftMenu</span></h2>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/blog">Blog</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/b%C3%A1o%20gi%C3%A1%20g%E1%BB%97">Báo giá gỗ</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/b%E1%BB%99%20s%C6%B0u%20t%E1%BA%ADp">Bộ sưu tập</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/c%C3%B4ng%20th%E1%BB%A9c%20n%E1%BA%A5u%20n%C6%B0%E1%BB%9Bng">Công thức nấu nướng</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/c%C6%B0%E1%BB%9Di%20ch%C3%BAt%20ch%C6%A1i">Cười chút chơi</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/gia%20c%C3%B4ng%20g%E1%BB%97">Gia công gỗ</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/g%E1%BB%97%20gh%C3%A9p">Gỗ ghép</a></li>
<li><a href="http://www.namtrungjsc.vn/search/label/ki%E1%BA%BFn%20th%E1%BB%A9c%20g%E1%BB%97">Kiến thức gỗ</a></li>
<li><a href="http://www.namtrungjsc.vn/2017/11/go-ghep-thong.html">Gỗ ghép thông</a></li>
<li><a href="http://www.namtrungjsc.vn/2017/11/go-ghep-cao-su.html">Gỗ ghép cao su</a></li>
<li><a href="http://www.namtrungjsc.vn/2017/12/go-ghep-cac-loai-phu-veneer-soi-xoan-dao-tan-bi.html">Gỗ ghép phủ veneer</a></li>
<li><a href="http://www.namtrungjsc.vn/2017/12/ban-go-ghep-bc-day-12-15-18-20x1200x2400.html">gỗ ghép BC 1200x2400 dày 12,15,18,20</a></li>
<li><a href="http://www.namtrungjsc.vn/2017/12/go-ghep-san-chat-luong-ab-abc-bc-day-12-15-18-20x1200x2400.html">Gỗ ghép Sẵn AB, A/BC, BC</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://4pvn.com.vn/img/Type/402.png" title="sideBar" /></a></div>

Tham khảo thêm các bài viết :
[từ tìm kiếm code để ẩn hiện chatbox, menu cố định , sticky menu
http://trungaiti.blogspot.com/2013/06/mau-menu-doc-xo-ngang-cuc-ep-nhe-cho.html
http://vntrongtien.blogspot.com/2015/03/tao-menu-theo-phong-cach-metro-ui-cho.html
http://trungaiti.blogspot.com/2014/04/menu-blogspot-css-chuyen-nghiep-giong.html
https://longtruongactor.wordpress.com/2016/06/16/tao-menu-an-hien-truot-doc-tuyet-dep-cho-blogspot/
http://www.continchuaoi.com/2014/03/cach-tao-menu-truot-ben-phai-blogwebsite.html
https://www.windows2it.com/2015/09/them-pop-out-chat-box-cbox-cho-blogspot-blogger.html 
http://hongdesignerblog.blogspot.com/2014/06/huong-dan-tao-chat-box-cho-blogspot.html 
https://xuanandz.blogspot.com/2016/09/tao-menu-hien-truot-doc.html 
http://www.iamkien.com/2017/10/menu-hien-truot-doc-cho-blogspot.html#A+ 
https://www.nguyenluongduy.com/2017/11/tao-menu-truot-doc-co-hieu-ung-ep-cho.html