Sử dụng jQuery plugin Sidr tạo Menu Slide Left một cách dễ dàng

Hiện nay xu thế phát triển web responsive rất phát triển, có nhiều framework hỗ trợ người lâp trình viên phát triển ứng dụng web một cách nhanh chóng. Với cá nhân mình, mình lựa chọn sử dụng boostrap để xây dựng các ứng dụng web responsive vì nó đáp ứng khá đầy đủ nhu cầu thực tế và dễ sử dụng. Tuy nhiên trong một số dự án, mình nhận thấy navbar của bootstrap cung cấp hiện thị trên mobile chưa ưng ý với khi làm những menu có cấu trúc phức tạp. jQuery plugin Sidr là một giải pháp hay để giải quyết vấn đề này, nó hoạt động tốt cùng với boostrap và tạo ra được một menu slide khá đẹp mắt và đặc biệt rất phù hợp với web dành cho mobile...

Tất nhiên Sidr plugin không phải thiết kế dành riêng cho bootstrap, nó là một plugin jquery hoạt động độc lập. Tuy nhiên ở ví dụ này mình dùng nó cùng với bootstrap để xem nó sự xung đột gì không khi áp dụng vào những cái mình đang làm. Và thật tuyệt nó hoạt động rất mượt mà...

1. Chuẩn bị.

- Chúng ta hãy download plugin Sidr tại đây, giải nén và copy vào website bạn đang làm.

- Trong ví dụ trên có khá nhiều phần linh tinh thuộc về bootstrap, để tìm hiểu rõ hơn về bootstrap các bạn xem tại đây. Còn ở ví dụ này mình chỉ cần quan tâm tới slidr plugin, nó ở trong thư mục sidr-parkage-1.2.1 như hình trên

2. Tích hợp plugin Sidr vào website

- Đầu tiên ta cần thêm css của slidr vào header website, nó có hai themes là dark & light, mình dùng cái light cho nó sáng sủa

<!--Sidr Menu-->
<link href="sidr-package-1.2.1/sidr-package-1.2.1/stylesheets/jquery.sidr.light.css" rel="stylesheet" />

- Tích hơp script của Sidr plugin, các script trên website ta nên bỏ vào footer của web sẽ tốt hơn, ở đây mình bỏ ngay trên thẻ đóng </body>

<!--Sidr Script-->
<script src="sidr-package-1.2.1/sidr-package-1.2.1/jquery.sidr.min.js"></script>

- Tiếp theo là phần HTML của menu, ở đây mình làm ví dụ slide left là menu, slide right là 1 form contact

<!--Menu Slide-->
    <div class="container-fluid">
        <div class="col-md-12">
            <!--Link Open menu-->
            <ul>
                <li>
                    <a id="left-menu" href="#sidr-left">
                        <span class="glyphicon glyphicon-hand-right"></span>
                        Open Left Menu
                    </a>
                </li>
                <li>
                    <a id="right-menu" href="#sidr-right">
                        <span class="glyphicon glyphicon-hand-left"></span>
                        Open Right Menu
                    </a>
                </li>
            </ul>
        </div>
    </div>

 

- Phần HTML của nội dung Menu Left và Contact Form bên phải, chú ý phần này để ngoài div container-fluid (Nếu bạn đang dùng bootstrap). Mình có thử để trong nhưng trên IE nó bị lỗi.

<!-- Content Menu Left -->
    <div id="sidr-left">
        <div class="col-md-12">
            <ul>
                <li class="active"><a href="http://thuyvk.com/category/html-css-34" target="_blank">HTML & CSS</a></li>
                <li><a href="http://thuyvk.com/category/cong-nghe-37" target="_blank">Công nghệ</a></li>
                <li><a href="http://thuyvk.com/category/aspnet-asp-mvc-3" target="_blank">Asp.Net</a></li>
                <li><a href="http://thuyvk.com/category/javascript-jquery-19" target="_blank">Javascript & jQuery</a></li>
            </ul>
        </div>
        <div class="col-md-12">
            <button type="button" class="btn btn-warning btn-xs pull-right" id="close-left-menu">
                Close
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
    </div>
    <!--Contact Form Right-->
    <div id="sidr-right">
        <div class="col-md-12">
            <form role="form">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <div class="col-md-12">
            <button type="button" class="btn btn-warning btn-xs pull-right" id="close-right-menu">
                Close
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
    </div>

- Quan trọng ở đây là 2 thẻ div có id "sidr-left" và "sidr-right", hai div này sẽ slide toggle khi mình click vào open menu, còn nội dung trong đó các bạn có thể chỉnh sửa tùy ý. Tiếp theo là phần script open & close 2 cái menu trên.

<!--Custom javascript-->
    <script>
        $(document).ready(function () {
            //open left menu
            $('#left-menu').sidr({
                name: 'sidr-left',
                side: 'left' // By default
            });
            //close left menu
            $('#close-left-menu').click(function () {
                $.sidr('close', 'sidr-left');
            });
            //open right menu
            $('#right-menu').sidr({
                name: 'sidr-right',
                side: 'right'
            });
            //close left menu
            $('#close-right-menu').click(function () {
                $.sidr('close', 'sidr-right');
            });
        });
    </script>

3. Kết luận.

- Mình test thử trên một số trình duyệt thấy chạy khá ổn, với IE cũ thì một số thuộc tính css3 nó không hiểu nên hiện chưa đẹp lắm, nhưng nói chung vẫn chạy tốt.

- Các bạn có thể download mã nguồn của ví dụ này để nghiên cứu thêm ở file đính kèm, hoặc xem demo tại đây

Download Source

Related Post


Tạo Style Cho Các Dropdown Sử Dụng DropKick
Tuesday, March 18, 2014
Khi nói đến việc tạo style cho các trang web, không có gì khó như làm style cho các form. Và khi nói đến style của các form – gần như không có gì phức tạp như tạo style cho input <select>.Chúng ta có thể tạo một style cho <select> với CSS, nhưng có thể có những hạn chế lớn để chúng ta đạt được mục đích với việc chỉ sử dụng CSS
CSS Transparency Cho Tất Cả Các Trình Duyệt
Tuesday, March 18, 2014
Transparency ( độ trong suốt ) là một trong những thuộc tính của CSS đòi hỏi rất nhiều các thuộc tính và giá trị khác nhau để đảm bảo khả năng tương thích với các trình duyệt. Để làm được điều này, bạn cần một nhóm các câu lệnh CSS...
Search

Đăng ký nhận bài mới


Category

Blog Archive