Hướng dẫn Sử dụng jquery để tạo một menu đơn giản

[PVS]

Sử dụng jquery để tạo một menu đơn giản

Bài viết này sử dụng jquery, và chỉ một câu lệnh đơn giản nhất của nó là .toggleClass, với nó bạn sẽ làm quen được các sử dụng jquery cơ bản và phương thức thay đổi Class nhằm tạo ra các hiệu ứng đẹp mắt.

Để ẩn menu khỏi website có rất nhiều cách, từ việc bạn thay đổi z-index cho đến việc để display:hidden đều có thể được. Ở đây mình sử dụng position, thay đổi vị trí của menu so với website. Do đặc tính của một slide menu thông thường là nằm cố định ở một trong các vị trí trái phải ( thường thất) hay trên dưới (hiếm thấy), có chiều dài hoặc rộng toàn màn hình nên việc sử dụng position trở nên khá dễ dàng.

Đầu tiên ta tiết lập các thẻ cơ bản, như đoạn code demo dưới đây gồm có một thẻ open button, một thẻ chứa menu và close button, và một thẻ “fog-hover” trống có tính năng như một nút close menu.

<button class="button-slide-menu button-slide-menu-style" type="button">Rape me!!!!</button> <!--Button -->

<div class="slide-menu slide-menu-style"> <!--menu-->
    <div class="item-container"> <!--Bên trong menu-->
        <button class="button-slide-menu button-slide-menu-style" type="button">no rape anymore :" </button>   
        <h3>Archives</h3>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
        <nav>10/03/2014</nav>
    </div>
</div> <!--SLIDE MENU-->

<div class="fog-hover"></div> <!--Thẻ fog trống-->

Kết quả:

​

Tiếp theo ca style menu, các đặc điểm nổi bật của một slide-menu là có vị trí cố định ở bên trái- phải (thường thấy) và trên dưới (hiếm thấy) nên việc để position:fixed; height:100%; là các câu lệnh không thể thiếu.

body {
    background-color:#F8F8F8;
    overflow:hidden;
    margin:0;
    padding:0;
    height:100%;
}

/**STYLE BUTTON HERE**/
.button-slide-menu-style {
    background:#33C6EB;
    padding: 9px 15px;
     font-size:14pt;
     border:none;
    font-size:1em;
    color:#fff;
    
}


/**STYLE MENU CONTAINER HERE**/
.slide-menu-style { 
                            width:300px;
                            height:100%;
                            background:#33C6EB;
                            margin:0;
                            padding:0;
                            position:fixed;
                            top:0px;
                  right:0px;
                             z-index:1000; 
                             -webkit-transition: all 0.3s;
                            -moz-transition: all 0.3s;
                            -ms-transition: all 0.3s;
                            -o-transition: all 0.3s;
                            transition: all 0.3s;
                  
                  }
                            
                            
/**SLIDE MENU ON ACTION**/

Kết quả:

​

Các bạn chú ý yếu tố z-index, do menu sẽ hiện chèn lên toàn bộ website nên chúng sẽ có giá trị cao nhất.

Tiếp đó phần quan trọng nhất là right:0px; đây là vị trí khi menu hiện ra, ở đoạn code tiếp theo đây chúng ta sẽ ẩn menu đi bằng cách thay đổi giá trị của right:-300px; (menu sẽ cách rìa bên phải website với khoảng cách bằng độ rộng của nó), kết quả ta được như sau.

​

Công việc cuối cùng khi làm việc với Css đó là các Class phụ, các class này chỉ được thêm vào khi open button được click nhờ jquery.

Sự kiện ở đây sẽ là : khi open button được click -> Class “slide-menu-show” sẽ được thêm vào để đưa vị trí của menu tờ -300px thành 0px – Class “fog” sẽ được thêm vào để tạo hiệu ứng sương mờ nhằm thông báo cho người dùng rằng họ đang làm việc với menu. Kết quả bạn được đoạn code như sau.

body {
    background-color:#F8F8F8;
    overflow:hidden;
    margin:0;
    padding:0;
    height:100%;
}

/**STYLE BUTTON HERE**/
.button-slide-menu-style {
    background:#33C6EB;
    padding: 9px 15px;
     font-size:14pt;
     border:none;
    font-size:1em;
    color:#fff;
    
}


/**STYLE MENU CONTAINER HERE**/
.slide-menu-style { 
                            width:300px;
                            height:100%;
                            background:#33C6EB;
                            margin:0;
                            padding:0;
                            position:fixed;
                            top:0px;
                             z-index:1000; 
                             -webkit-transition: all 0.3s;
                            -moz-transition: all 0.3s;
                            -ms-transition: all 0.3s;
                            -o-transition: all 0.3s;
                            transition: all 0.3s;right:-300px;}
                            
                            
/**SLIDE MENU ON ACTION**/

.slide-menu-show {right:0px;}

.fog { /**CREAT A FOG WHEN MENU ACTIVED **/
        position:fixed;
        display:block;
        background:rgba(0,0,0,0.3); /**YOU CAN CHANGE COLOR AND OPACITY OF THE FOG HERE**/
        z-index:500;
        top:0;
        left:0;
        width:100%;
        height:100%;}

Các bạn chưa thấy có gì thay đổi vì ta chưa có jquery để thêm Class vào. Bước tiếp theo là tạo file jquery và gọi chúng ra, mình dùng .toggleClass(); , câu lệnh này nhằm thêm mới Class vào đối tượng nếu chúng chưa có sẵn hoặc xóa bỏ đối tượng khi chúng đã có. Để người dùng có thể đóng menu ngay cả khi ấn chuột hoặc trỏ tay ở vùng ngoài menu (bây giờ lớp sương mờ đang ở đó) ta chỉ việc togglClass tương tự với thẻ “fog-hover”. Và đây là kết quả

jQuery(document).ready(function(){
    $(".button-slide-menu").on("click", function (){
                            $(".slide-menu").toggleClass("slide-menu-show");
                            $(".fog-hover").toggleClass("fog");                 
        });
    $(".fog-hover").on("click", function (){
                            $(".slide-menu").toggleClass("slide-menu-show");
                            $(".fog-hover").toggleClass("fog");
    });
});

​

Vậy là xong, các bước cơ bản cũng chỉ có thế, việc sử dụng toggleClass, addClass và removeClass là các công cụ cơ bản để các bạn tạo khá nhiều hiệu ứng đẹp, không quá phức tạp, chúc các bạn vui vẻ với bài hướng dẫn này <(“).

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

Nguồn: izwebz.com​