Responsive menu with jQuery

Lần trước mình đã giới thiệu một dạng menu responsive nhưng đơn giản và bài viết này mình sẽ chia sẻ một dạng menu tương tự sử dụng jQuery với hiệu ứng trượt nhẹ nhàng khiến cho blog bạn thêm đẹp và chuyên nghiệp hơn. Menu này được tác giả MKR viết ra với style đơn giản, vì vậy mình đã chỉnh sửa style đôi chút và mình sẽ chia sẻ đến độc giả TrollVL cả hai style này.

Cấu trúc HTML

Bạn chèn đoạn HTML sau vào vị trí muốn hiển thị menu trong template của mình. Bạn cũng có thể tạo một widget mới nằm phía trên bài viết và sử dụng HTML bên dưới

<nav>
<a id="tombolmenu" href="#">Menu</a>
  <ul class="menu">
    <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 Dgn DropDown</a>
      <ul class="hidden">
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>  
      </ul>
    </li> 
  </ul>
</nav>

Style cho menu

Bạn có thể lựa chọn một trong hai style bên dưới cho phù hợp với blog của mình. Nên xem demo trước khi quyết định nha!

Demo

• TrollVL Style
• MKR Style

nav{font:normal normal 11px/30px Verdana,Geneva,sans-serif;background-color:#313131}
nav,nav *{display:block}
nav #tombolmenu{display:none}
nav ul,navtvl li{padding:0;margin:0;list-style:none}
nav ul{height:35px;width:1000px}
nav li{float:left;position:relative}
nav li a{display:block;line-height:35px;border-left:1px solid #444;border-right:1px solid #222;color:#aaa;text-decoration:none;padding:0 1.1em}
nav li ul{height:auto;overflow:hidden;background-color:#333;border:0;position:absolute;width:225px;height:auto;z-index:88;-webkit-box-shadow:0 1px 5px #222;-moz-box-shadow:0 1px 5px #222;box-shadow:0 1px 5px #222;display:none}
nav li:hover ul.hidden{display:block}
nav li li{float:none;display:block;width:100%;font:normal 0.8em Arial;text-transform:none;text-shadow:none;display:block;border-top:1px solid #444;border-bottom:1px solid #222;-webkit-transition:all 0.26s ease-out;-moz-transition:all 0.26s ease-out;-ms-transition:all 0.26s ease-out;-o-transition:all 0.26s ease-out;transition:all 0.26s ease-out}
nav li li:hover{border-left:3px solid #fff000}
@media only screen and (max-width:700px){
nav #tombolmenu{display:block;padding:0 15px;background-color:black;text-decoration:none}
nav #tombolmenu.active{background-color:#1D8FC5;color:white}
nav ul{height:auto;display:none}
nav li{float:none}
nav li ul{width:100%}}

nav{font:normal normal 11px/30px Verdana,Geneva,sans-serif;background-color:#313131}
nav,nav *{display:block}
nav #tombolmenu{display:none}
nav ul,nav li{padding:0;margin:0;list-style:none}
nav ul{height:30px}
nav li{float:left;position:relative}
nav li a{display:block;padding:0 10px;color:white;text-decoration:none}
nav li:hover > a{background-color:#1D8FC5}
nav li ul{position:absolute;background-color:black;height:auto;width:160px;display:none}
nav li:hover ul.hidden{display:block}
nav li li{float:none}
@media only screen and (max-width:600px){nav #tombolmenu{display:block;padding:0 15px;background-color:black;text-decoration:none}
nav #tombolmenu.active{background-color:#1D8FC5;color:white}
nav ul{height:auto;display:none}
nav li{float:none}
nav li ul{width:100%}
}

Javascript/jQuery

Để cho thêm hiệu ứng slideup/slidedown ta cần phải sử dụng đoạn javascrip bên dưới

(function () {
    $('nav ul').removeClass('hidden');
    $('nav li').hover(function () {
        $(this).parent('ul.menu').css('overflow', 'visible');
        $(this).children('ul').filter(':not(:animated)').slideDown();
    }, function () {       
        $(this).children('ul').slideUp();
    });

    $('#tombolmenu').toggle(function () {
        $(this).addClass('active');
        $('nav > ul').slideDown();
        return false;
    }, function () {
        $(this).removeClass('active');
        $('nav > ul').slideUp();
        return false;
    });
    function checkWidth() {
        if ($(window).width() > 600) {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {
            $('nav > ul').css('display', 'none');
        }
    }
    $(window).resize(checkWidth);
})();

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

Tham khảo từ nguồn MKR