Tạo JQuery Sliding Menu cho blog

Bài viết này mình sẽ hướng dẫn các bạn tạo một sticky menu dọc cho Blogger từ jQuery khá đẹp mắt, chuyên nghiệp, tiết kiệm không gian cho blog.

XEM DEMO

(rê chuột sang phía trái màn hình)

Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
    $("#menu").height($(document).height());
});
</script>
 
<script type='text/javascript'>
$(document).ready(function() {
    setTimeout( function(){$('#menu').css('left','-180px');},0); 
});
</script>

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </body>:

<!-- Sliding Menu by kjmagic.blogspot.com -->
<style type="text/css">
#menu {
    background: #2e2e2e;
    width: 150px;
    padding: 30px;
    position: fixed;
    z-index: 99999;
    box-shadow: 4px 0 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
    -webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);}
 
#menu {
    left: 0;}
 
#menu:hover, #menu:focus {
    left: 0 !important;}
ul.nav {
    position: relative;
    top: 100px;list-style-type:none;}
 
ul.nav li a {
    padding: 10px 5px;
    border-bottom: 1px solid #575757;
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
    font-weight:bold;}
 
ul.nav li a:hover {
    color: #ee4e1d;}
#menu, ul.nav li  a {
    transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;}
</style>
<div id="menu">
<ul class="nav">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Menu 7</a></li>
</ul>
</div>
<!-- Sliding Menu by kjmagic.blogspot.com End -->

- Chỉnh sửa các dấu # thành link và Menu 1, Menu 2... thành tên link phù hợp.
- Nếu muốn thêm menu các bạn chỉ cần thêm đoạn code sau vào trước thẻ màu xanh:

<li><a href="#">Menu</a></li>

Chúc các bạn thành công !