Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot

Tạo menu ẩn hiện trượt dọc bên trái cho blogspot, các thành phần của menu sẽ trượt dọc giúp tiết kiệm không gian hiển thị cho blogspot sẽ làm bạn hài lòng Tạo menu ẩn hiện trượt dọc tuyệt đẹp cho blogspot

XEM DEMO >>

Cách thực hiện Tạo menu ẩn hiện trượt dọc:

BƯỚC 1: TẠO CSS CHO MENU TRƯỢT DỌC

Đăng nhập vào blogger >> Chọn mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> và chèn đoạn CSS bên dưới trên thẻ ]]></b:skin>

.menu{position:absolute;top:15px;right:8%;text-align:center;padding:0;color:#333;font-size:28px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{border-top:6px solid #46a28d ;position:fixed;top:0;right:0px;z-index:9999;background:rgba(44, 44, 45, 0.82);height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1; font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #3d3d3d;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #fff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#3d3d3d}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #2C2C2D;color: #fff;font-size:18px;font-weight:700;padding: 9px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #fff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #fff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul.expand {height:200px;overflow:auto}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #e5e5e5;}
#cssmenu ul ul li:last-child {border: none;}

BƯỚC 2: Chèn HTML CHO MENU TRƯỢT DỌC

Sau khi chèn CSS xong tiếp tục chèn đoạn code bên dưới dưới thẻ <body>

<div class='menu' title='Click vào để mở Menu ~~>'><span style='font:bold 14px Sans-serif;color:#888;position:absolute;top:5px;left:-270%'>Menu</span> ≡</div>
<div id='css-menu'>
<div id='cssmenu'>
<ul>
<li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>► <span style='font-size:14px;font-weight:700;position:absolute;top:17px;left:44px'>Close menu</span></span></li>
<li><a href='/' title='Home'><span>Home</span></a></li>
<li><a href='#' title='Daftar Isi'><span>Sitemaps</span></a></li>
<li class='has-sub'><a href='#' title='About This Blog'><span>About This Blog</span></a>
<ul>
<li><a href='#' title='About'><span>About</span></a></li>
<li><a href='#' title='Contact'><span>Contact</span></a></li>
<li class='last'><a href='#' title='Privacy'><span>Privacy</span></a></li>
</ul>
</li>
<li><a href='#' title='Pasang Iklan'><span>Advertiser</span></a></li>
<li class='has-sub'><a href='#' title='More'><span>More Menus</span></a>
<ul class='expand'>
<li><a href='#' title='More Menu 1'><span>More Menu 1</span></a></li>
<li><a href='#' title='More Menu 2'><span>More Menu 2</span></a></li>
<li><a href='#' title='More Menu 3'><span>More Menu 3</span></a></li>
<li><a href='#' title='More Menu 4'><span>More Menu 4</span></a></li>
<li><a href='#' title='More Menu 5'><span>More Menu 5</span></a></li>
<li><a href='#' title='More Menu 6'><span>More Menu 6</span></a></li>
<li><a href='#' title='More Menu 7'><span>More Menu 7</span></a></li>
<li><a href='#' title='More Menu 8'><span>More Menu 8</span></a></li>
<li><a href='#' title='More Menu 9'><span>More Menu 9</span></a></li>
<li><a href='#' title='More Menu 10'><span>More Menu 10</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 11'><span>More Menu 11</span></a></li>
</ul>
</li>
</ul>
</div>
</div>

BƯỚC 3: CHÈN JAVACRIPT CHO MENU BLOGSPOT

CHÈN đoạn Javacript bên dưới trên thẻ </body> để tạo hiệu ứng.

<script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
//]]>
</script>
<script type='text/javascript'>
$(function() {
$('.menu').click(function () {
$('#css-menu').css({right:'0'});
});
$('.close-menu').click(function() {
$('#css-menu').css({right:'-340px'});
});
});
</script>

Một vài đoạn code mình đã tô đỏ các bạn sửa lại cho phù hợp với blog của mình nhé!
Vậy là bạn đã có menu trượt dọc khá đẹp cho blogspot rồi đây
nguồn từ: Kompiajaib