1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Tìm hiểu thêm.

[Hướng Dẫn] Tạo Menu Responsive với thư viện Bootstrap - Fixed navbar

Thảo luận trong 'WordPress' bắt đầu bởi Hoàng Nam, 30/10/14. Trả lời: 6 Xem: 3,235.

Chia sẻ trang này

Thị Trường Xe Máy

  1. Hoàng Nam

    Hoàng Nam New Member
    New Member

    Tham gia ngày:
    5/4/14
    Bài viết:
    27
    Đã được thích:
    48
    Xin chào bạn khanhsak3r !

    Như bạn đã hỏi ở trên hôm nay mình sẽ hướng dẫn bạn thực hiện một Menu Responsive với thư viện Bootstrap - Fixed navbar.

    Đầu tiên: Bạn tạo một project như hình dưới.

    - Gồm có index.html

    [​IMG]

    Ở file index.html bạn cần chú dến 2 vị trí quan trọng:
    Thứ nhất ở thẻ <head> bạn cần có đoạn code như sau để lấy thư viện Bootstrap

    Mã:
    <!-- Meta Responsive -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap core CSS -->
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css" rel="stylesheet">
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="./js/ie-emulation-modes-warning.js"></script><style type="text/css"></style>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    Trong đó đoạn code:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Đoạn này cho trình duyệt biết trang của bạn có sử dụng Responsive chú ý nhé, đây là điều quan trọng !

    Và vị trí thứ 2 là ở dưới cùng trước thẻ đóng </body> (Thật ra thì để ở trên <head> cũng ko sao !)

    Mã:
    <!-- Bootstrap core JavaScript -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
    Nằm ở thư mục /js

    Đoạn code trên gọi 3 file js từ thư mục /js trong project của chúng ta, 3 file này mình đã thêm trong bản Demo mà mình để ở dưới cùng bài. Bạn chỉ cần gọi ra thôi, không cần quan tâm lắm tới 3 file trên, nhưng buộc phải có nhé !


    - File style.css

    [​IMG]

    Bước 2: Bạn thêm đoạn code Menu này vào sau thẻ <body>

    [​IMG]

    Đây là code html bạn copy vào file /index.html:

    Mã:
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Đây là menu mobile</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://congdongit.org">Cộng Đồng IT</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="./index.html">Home</a></li>
                    <li><a href="#">Themes</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Plugins 1</a></li>
                            <li><a href="#">Plugins 2</a></li>
                            <li><a href="#">Plugins 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tools</a></li>
                    <li><a href="#">Donate</a></li>
                    <li><a href="#">Contact</a></li>              
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    Bước 3: Thay đổi style của menu ban đầu.

    Đây là menu bình thường

    [​IMG]

    Đây là menu ở chế độ xem mobile

    [​IMG]

    Để có được style như trên (ở đây mình style theo đúng hình mà bạn khanhsak3r đã yêu cầu hướng dẫn)

    Bạn copy đoạn code css sau vào file /css/style.css:

    Mã:
    .navbar-default {
        background-color: rgba(0, 0, 0, 0.8);
        border-color: #FFF;
    }
    
    .navbar-default .navbar-brand {
        color: #FFF;
    }
    
    .navbar-default .navbar-brand:hover {
        color: #FFB800;
    }
    
    .navbar-default .navbar-nav > .active > a {
        color: #FFF;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .navbar-default .navbar-nav > li > a {
        color: #999;
    }
    
    .dropdown-menu > li > a,
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #FFF;
    }
    
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }
    
    .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .dropdown-menu > li > a:hover {
        color: #555!important;
    }
    
    @media (max-width:768px){
        .navbar-default .navbar-nav .open .dropdown-menu> li > a:hover,
        .dropdown-menu > li > a:hover {
            color: #FFF!important;
        }
    }
    Như vậy chúng ta đã có một Menu Responsive với thư viện Bootstrap - Fixed navbar rất đẹp mắt và tiện lợi, có thể tùy biến theo thiết bị xem của người dùng.

    Xem Demo | Donwload Demo

    Mọi thông tin hoặc yêu cầu hướng dẫn các bạn hãy đăng tại Cộng Đồng IT để nhận được hướng dẫn nhé !

    Chúc các bạn thành công !
     
    #1 Hoàng Nam, 30/10/14
    Last edited by a moderator: 30/10/14
    Tags: Không có
    4 people like this.
  2. gatrep81

    gatrep81 New Member
    New Member

    Tham gia ngày:
    14/3/14
    Bài viết:
    90
    Đã được thích:
    93
    Khanh Sake ok rồi nhé.
     
    4 people like this.
  3. khanhsak3r

    khanhsak3r New Member
    New Member

    Tham gia ngày:
    16/7/14
    Bài viết:
    22
    Đã được thích:
    4
    Bài hướng dẫn rất chi tiết :D
     
  4. khanhsak3r

    khanhsak3r New Member
    New Member

    Tham gia ngày:
    16/7/14
    Bài viết:
    22
    Đã được thích:
    4
    Có thể bổ sung thêm ô tìm kiếm ko anh
     
  5. Hoàng Nam

    Hoàng Nam New Member
    New Member

    Tham gia ngày:
    5/4/14
    Bài viết:
    27
    Đã được thích:
    48
    Thêm đoạn này vào vị trí bạn cần:
    HTML:
    <ul class="nav navbar-nav navbar-right">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Tìm kiếm...">
                            </div>
                            <button type="submit" class="btn btn-default">Tìm</button>
                        </form>
                    </ul>
    Thêm một tí css:
    Mã:
    @media (max-width:768px){
        form.navbar-form.navbar-left {
            padding: 10px 25px;
        }
    }
     
    4 people like this.
  6. khanhsak3r

    khanhsak3r New Member
    New Member

    Tham gia ngày:
    16/7/14
    Bài viết:
    22
    Đã được thích:
    4
    Đã thêm và search ko ra kết quả gì luôn
     
  7. Hoàng Nam

    Hoàng Nam New Member
    New Member

    Tham gia ngày:
    5/4/14
    Bài viết:
    27
    Đã được thích:
    48
    Tìm kiếm của bạn là Wordpress? Đây chỉ là demo nên bạn cần phải chuyển thành wp thì mới tìm kiếm được !
     

Chia sẻ trang này

Users Viewing Thread (Users: 0, Guests: 0)