RSSJquery

Hướng dẫn tạo Sliding Menu bằng jQuery

Menu là một thành phần quan trọng trong tổng thể website và có nhiều cách để thể hiện. Hôm nay, Y2Graphic hướng dẫn các bạn tạo Sliding Menu đơn giản bằng jQuery. Dạng menu này sẽ tiết kiệm diện tích không gian, đặc biệt rất thích hợp với những giao diện trên thiết bị di động.

HTML

Chúng ta sẽ thêm đoạn code HTML đơn giản như sau:

  
  <div id="menu">
  <ul class="nav">
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">HTML & CSS</a></li>
    <li><a href="#">Website</a></li>
    <li><a href="#">Photography</a></li>
    <li><a href="#">Typography</a></li>
    <li><a href="#">Download</a></li>
  </ul>
  </div>
  

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;}
    

Tiếp theo đoạn CSS này áp dụng cho phần tử <ul.nav>

    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;}
    

jQuery

Khai báo đoạn script dưới đây và đặt vào trong phần <head>.

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    
        <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>
	

Cuối cùng ta thêm hiệu ứng transition khi rê chuột vào phần menu

    #menu, ul.nav li  a {
        transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;}
    

Hy vọng các bạn yêu thích dạng menu này. Trong thời gian tới, mình sẽ giới thiệu thêm 2 dạng menu độc lạ. Nhớ theo dõi nhé.

Nguồn: Y2Graphic
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu