TẠO MENU DROPDOWN – FIXED FLOATING CHO BLOGSPOT

{tocify} $title = {Mục lục bài viết}

[tintuc]Menu là một điều cực kỳ quan trọng đối với những bạn muốn sở hữu 1 blog đẹp và cá tính. Trong bài viết này, mình sẽ giới thiệu với các bạn cách làm Menu Dropdown – Fixed Floating cho Blogspot. Mình để dấu gạch ngang bởi vì bài này mình sẽ chia làm 2 phần: Tạo Menu Dropdown và thêm hiệu ứng Fixed Floating cho Menu (Nếu bạn đã có Menu sẵn cho blog thì việc còn lại chỉ là thêm hiệu ứng Fixed Floating)

Tạo Menu Dropdown

Menu Dropdown là menu mà có các item con được hiển thị xổ xuống khi ta rê chuột đến menu chính. Để bắt đầu, các bạn cần đăng nhập vào Blogger. Sau đó đến Template > Edit HTML, ở giao diện Edit HTML, các bạn tìm đến thẻ ]]></b:skin> và thêm đoạn code sau vào phía trên:

#navbar {
background: #060505;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
border-top:0px solid #960100;
height:35px;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:auto;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#nav li a:hover, #nav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -25px 0 0 161px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#nav li li a:hover, #nav li li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Chọn Save Template để lưu lại.

Tiếp theo các bạn truy cập đến Layout, và thêm 1 widget HTML/JavaScript vào bên dưới phần Header, như hình dưới:

Sau đó các bạn thêm đoạn sau vào bên trong widget:

<div id='navbar'>
 <ul id='nav'>
        <li>
        <a href='#'>Home</a></li>
        <li>
 <a href='#'>Item</a></li>
        <li>
          <a href='#'>Item</a></li>
  <li>
<a href='#'>Item</a></li>
  <li>
 <a href='#'>Item</a>
<ul>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
              </ul>
        </li>
  <li>
           <a href='#'>Item</a>
            <ul>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
         </ul>
      </li>
 <li>
           <a href='#'>Item</a>
            <ul>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item </a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
              </ul>
          </li>
         <li>
           <a href='#'>Item</a>
            <ul>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
                <li><a href='#'>Sub Item</a></li>
              </ul>
            </li>
            <li>
           <a href='#'>Item</a>
            <ul>
            <li><a href='#'>Sub Item</a></li>
            <li><a href='#'>Sub Item</a></li>
            <li><a href='#'> Sub Item</a></li>
            <li><a href='#'>Sub Item</a></li>
       </ul>
  </li>
<li>
</li>
</ul>
</div>

Sau đó chọn Save để lưu.

Done! Vậy là bạn đã hoàn thành việc tạo Menu Dropdown cho Blogspot rồi.

Thêm hiệu ứng Fixed Floating cho Menu

Fixed Floating tức là Menu cố định khi bạn di chuyển màn hình ra khỏi phạm vi ban đầu nhưng sẽ trở lại vị trí cũ khi bạn màn hình của bạn quay lại ban đầu. Để thực hiện điều này các bạn việc các bạn cần làm là thêm 1 đoạn script vào bên trong Template. Nếu bạn không làm Menu theo đoạn code bên trên thì bạn cần tìm thẻ quy định style cho Menu trong blog của bạn.

Bạn truy cập vào địa chỉ blog bằng trình duyệt Google Chrome và click chuột phải vào Menu chọn Kiểm tra phần tử hoặc Inspect Element và tìm thẻ có dạng <div class=”abc”> ngày bên trên menu. Ở đây abc chính là class của thẻ quy định style cho menu. Giống như ảnh bên dưới thì secondary-navigation là class của thẻ:

Sau đó bạn thay navbar ở đoạn script bên dưới bằng tên class của bạn. Tiếp theo bạn vào Layout, thêm 1 widget HTML/Javascript ở bất cứ vị trí nào và thêm đoạn script vào bên trong (Đã được thay bằng class của bạn):

Sau khi viết xong bài này và Save thì mình đã test code hoạt động rất tốt, tuy nhiên sau đó vài ngày thì mình làm trên 1 blog khác thì lại không được. Cuối cùng thì mình tìm ra là thẻ quy định style của menu bạn phải viết liền, ví dụ như navbar, mainnav, nav.. chứ không được là nav-bar, main-nav hay secondary-navigation như bên trên. Nếu không viết liền thì khi thay vào script bên dưới sẽ không hoạt động được. Để thay thẻ tên thẻ quy định style cho menu, bạn vào Template > Edit HTML, Copy toàn bộ code của Template rồi paste vào Notepad, sau đó trong Notepad bạn ấn Ctrl + H, bạn điền Find What là tên thẻ cũ, và Replace with là tên mới rồi chọn Replace All.

<script>
$(function() {
    // Stick the #navbar to the top of the window
    var navbar = $('#navbar');
    var navbarHomeY = navbar.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navbarHomeY;
        if (shouldBeFixed && !isFixed) {
            navbar.css({
                position: 'fixed',
                top: 0,
                left: navbar.offset().left,
                width: navbar.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            navbar.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
</script>

Done! Vậy là bạn đã thêm hiệu ứng Fixed Floating cho Menu thành công.

Đây là Demo cho Menu Dropdown kèm hiệu ứng Fixed Floating: http://www.taran4.com/

Lời kết

Mình hy vọng trong bài viết này, bạn đã có thể tạo cho mình 1 Menu Dropdown và thêm hiệu ứng Fixed Floating được cho Menu. Nếu bạn muốn nghiên cứu kỹ hơn, hãy chịu khó nghiên cứu phần code và Google những thành phần bên trong.

share template blogspot[/tintuc]