Tạo menu cho blogspot phù hợp với giao diện responsive rất ít các blogger viết đến, hôm nay mình chia sẻ code menu trượt dọc cho blogspot với jQuery đẹp mắt.
Menu trượt dọc này khá đẹp phù hợp hầu hết các template, hiệu ứng đẹp khi ta click vào menu, còn với các sub menu nó tạo thanh trượt lên trượt xuống nhằm thu gọn menu rất chuyên nghiệp .
Tạo menu trượt dọc cho blogspot với jQuery đẹp mắt
CSS 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:23px;right:135px;text-align:center;padding:0;color:#333;font-size:46px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{position:fixed;top:0;right:-340px;z-index:9999;background:#2C2C2D;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: #ffffff;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: 12px 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 #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#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;}
HTML cho menu
Sau khi chèn CSS xong tiếp tục chèn đoạn HTML bên dưới dưới thẻ <body>
<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>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:18px;font-weight:700;position:absolute;top:17px;left:33px'>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='3' 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='3' 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>
Đoạn Javascript cần thiết cho menu
Công việc tiếp theo và không thể thiếu để hoàn thành meu trượt dọc cho blogger/blogspot là chèn đoạn javascript bên dưới trên thẻ </body>
<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>
0 nhận xét trong bài "Tạo menu trượt dọc cho blogspot với jQuery đẹp mắt"
Cám ơn các bạn ghé thăm Blog Tuấn Phan !
Nhận xét để đóng góp ý kiến bài viết.
Vui lòng viết nhận xét có dấu.
Không dùng từ ngữ thô tục, chửi bậy.
Nhận xét chứa link spame sẻ bị xóa.
Tạm thời khóa comment ẩn danh do nhiều bạn lợi dụng spame.