»

Code Trượt thanh Menu gọn nhẹ cho WEB/ BLOG

Ngày:24/08/2017  
Khá sễ dàng để thiết lập một chế độ navigation menu trượt khi cuộn cho WEB hoặc BLOG. điều này giúp web bạn tăng thêm lượt view đáng kể, vì phần lớn mọi người sẽ lười để kéo thanh cuộn về đầu trang, và tất nhiên nếu bạn thiết lập chế độ này bằng cách thêm thuộc tính Jquery hay quá nhiều CSS sẽ khiến web bạn năng nề hơn khi người dùng trải nghiệm nó.

Hôm nay Zcomity xin hướng dẫn các bạn thực hiện chức năng này một cách gọn nhẹ. Hãy chú ý phần hướng dẫn sau đây.

Trước tiên các bạn Vào tùy chỉnh HTML CỦA BLOG.

==> Hãy đặt toàn bộ code của navigation bar vào trước thẻ: ]]></b:skin> nhé:

  1. /* Bắt đầu Stick Nav */
    sticknav {
    background: #ffffff;
    height: 30px;
    width: 100%;
    margin-right: 0px;
    margin-left: 0px;
    left: 0px;
    right: 0px;
    position: relative;
    z-index: 9999;
    }
    .fixed { position:fixed;}
    /* Kết thúc Stick Nav */

==> Tiếp theo thêm đoạn Script vào trước thẻ  </Head>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>

Nếu đã có thư viện Query thì khỏi thêm thư viện Jquery/1.6.4  màu xanh ở trên vào
  1. <script type='text/javascript'> $(document).ready(function() { var aboveHeight = $(&#39;header&#39;).outerHeight(); $(window).scroll(function(){ if ($(window).scrollTop() &gt; aboveHeight){ $(&#39;sticknav&#39;).addClass(&#39;fixed&#39;).css(&#39;top&#39;,&#39;0&#39;).next().css(&#39;padding-top&#39;,&#39;60px&#39;); } else { $(&#39;sticknav&#39;).removeClass(&#39;fixed&#39;).next().css(&#39;padding-top&#39;,&#39;0&#39;); } }); }); </script>

==> chèn đoạn mã Menu của bạn vào giữa code bên dưới:

<sticknav>
(Đoạn code menu của bạn ở đây)

</sticknav> thành ID chứa thanh menu của bạn sau đó Save lại.


Labels: