Đăng nhập

Hướng dẫn cách tạo Responsive Navigation

  • 02/01/2015 - 9:49 AM
  • 1864 Views

Một trong những phần khó khăn nhất của responsived trên website là “The Navigation”, Nó rất quan trọng đối với việc truy cập website, vì đây là một trong những cách để người dùng có thể di chuyển sang các Pages khác của website. Thực sự thì có rất nhiều cách để có thể tạo ra responsive site navigation và một vài Jquery plugins cho phép bạn làm việc này đó vài giây.

huong-dan-cach-tao-responsive-navigation-1

Tuy nhiên, thay vì áp dụng một phương pháp tức thời như vậy, trong bài này, tôi sẽ hướng dẫn bạn làm thế nào có thể xây dựng được một navigation đơn giản nhất từ A-Z và sử dụng CSS3 media queries kết hợp một chút Jquery để hiển thị nó trên một màn hình có kích thước nhỏ ví như cái smartphone chẳng hạn.

Html

Đầu tiên, chúng ta cần thêm dòng meta viewport sau vào trong head tag. Meta viewport tag cần phải có để cho trang page để nó hiểu đúng các kích thước screen, đặc biệt là trong mobile.

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

Và tiếp đó thêm đoạn menu dưới đây vào bên trong thẻ body:

<nav class="clearfix"> 
          <ul class="clearfix"> 
                     <li><a href="#">Home</a></li> 
                     <li><a href="#">How-to</a></li> 
                     <li><a href="#">Icons</a></li> 
                     <li><a href="#">Design</a></li> 
                     <li><a href="#">Web 2.0</a></li> 
                     <li><a href="#">Tools</a></li> 
            </ul> 
            <a href="#" id="pull">Menu</a> 
</nav>

Như bạn thấy ở bên trên, chúng ta có 6 links menu chính và có add thêm một link vào sau nó. Link phụ này sẽ được sử dụng để điều hướng menu navigation khi chúng bị ẩn đi trong màn hình hiển thị có kích thước bé.

Style

Trong phần này, chúng ta bắt đầu đi style cho navigation. The style ở đây chỉ để style , bạn có thể chọn bất kỳ màu sắc nào mà bạn muốn. Nhưng trong trường hợp này, tôi muốn body có một màu mềm mại và mịn.

body { 
         background-color: #ece8e5; 
}

The “nav” tag xác định navigation sẽ có kích thước 100% độ rộng của cửa sổ trình duyệt, trong khi đó “ul” bao gôm các menu links sẽ có độ rộng là 600px.

    nav { 
            height: 40px; 
            width: 100%; 
            background: #455868; 
            font-size: 11pt; 
            font-family: 'PT Sans', Arial, sans-serif; 
            font-weight: bold; 
            position: relative; 
            border-bottom: 2px solid #283744; 
    } 
    nav ul { 
            padding: 0; 
            margin: 0 auto; 
            width: 600px; 
            height: 40px; 
    }

Tiếp đó, chúng ta sẽ float menu links sang bên trái, vì vậy chúng được hiển thị theo chiều ngang cạnh nhau, nhưng floating cũng sẽ gây ra việc hiển thị phân cấp cha con không đúng trong menu.

nav li { 
           display: inline; 
           float: left; 
}

Nếu bạn chú ý ở bên trên đoạn HTML., bạn sẽ thấy chúng ta đã add clearfix trong thẻ class atribute cho cả nav và ul, việc này sẽ giúp chúng ta clear những thứ xung quanh nó khi chúng ta float các yếu tố bên trong nó sử dụng CSS clearfix hack. Vì vậy, bạn hãy add tiếp đoạn style dưới đâu vào bên trong style sheet.

.clearfix:before, 
.clearfix:after { 
            content: " "; 
            display: table; 
} 
.clearfix:after { 
           clear: both; 
} 
.clearfix { 
           *zoom: 1; 
}

Chúng ta có 6 menu links và cũng đã xác định kích thước container là 600px, bây giờ chúng ta sẽ cho mỗi links sẽ có 100px chiều rộng.

nav a { 
            color: #fff; 
            display: inline-block; 
            width: 100px; 
            text-align: center; 
            text-decoration: none; 
            line-height: 40px; 
            text-shadow: 1px 1px 0px #283744; 
}

Các menu links sẽ được ngăn cách bên phải nhau với 1px, ngoại trừ menu link cuối cùng.

nav li a { 
          border-right: 1px solid #576979; 
          box-sizing:border-box; 
          -moz-box-sizing:border-box; 
          -webkit-box-sizing:border-box; 
} 
nav li:last-child a { 
           border-right: 0; 
}

Tiếp đến, menu sẽ có màu sắc tươi sáng hơn khi :hover hoặc :active

nav a:hover, nav a:active { 
            background-color: #8c99a4; 
}

Và cuối cùng, kiên kết thêm vào cuối sẽ được ẩn đi (đối với màn hình của máy tính để bàn)

nav a#pull { 
            display: none; 
}

huong-dan-cach-tao-responsive-navigation-2

Tại thời điểm này, chúng ta mới chỉ style the navigation và nó chưa có bất kỳ điều gì xảy ra khi resize kích thước của cửa sổ trình duyệt. Vì vậy, chúng ta hãy tiếp tục sang bước kế tiếp.

Media Queries

CSS3 media queries được sử dụng để xác định cách style sẽ được thay đổi ở một số kích thước nhất định, đặc biệt là kích thước màn hình điệnthoại. Vì navigation của chúng ta có kích thước fix là 600px, trước tiên chúng ta cần xác định styles nó được view ở 600px hoặc thấp hơn kích thước màn hình. Vì vậy thực tế mà nói, đây chính là điểm xác định đầu tiên của chúng ta. Trong kích thước màn hình này, cứ 2 menu links sẽ được hiển thị cạnh nhau, vì vậy kích thước ul ở đây là 100% trên cửa sổ trình duyệt sẽ được giảm xuống còn là 50%.

@media screen and (max-width: 600px) { 
 nav { 
         height: auto; 
 } 
 nav ul { 
          width: 100%; 
          display: block; 
          height: auto; 
 } 
 nav li { 
         width: 50%; 
         float: left; 
         position: relative; 
 } 
 nav li a { 
        border-bottom: 1px solid #576979; 
        border-right: 1px solid #576979; 
 } 
 nav a { 
        text-align: left; 
        width: 100%; 
        text-indent: 25px; 
 } 
}

Và tiếp theo, chúng ta cũng làm như vậy cho navigation khi được hiển thị ở màn hình nhỏ hơn : 480px hoặc thấp hơn nữa Trong kích thước màn hình này, Link bổ sug mà chúng ta dã thêm vào trước đó sẽ bắt đầu được nhìn thấy và chúng ta cũng thêm cho nó một biểu tượng bên phải để cho nó đẹp hee, sử dụng :after , trong khi các menu links sẽ được ẩn đi để tiết kiệm không gian dọc trên màn hình.

@media only screen and (max-width : 480px) { 
 nav { 
         border-bottom: 0; 
 } 
 nav ul { 
           display: none; 
          height: auto; 
 } 
 nav a#pull { 
        display: block; 
         background-color: #283744; 
         width: 100%; 
         position: relative; 
 } 
 nav a#pull:after { 
         content:""; 
          background: url('nav-icon.png') no-repeat; 
           width: 30px; 
           height: 30px; 
          display: inline-block; 
          position: absolute; 
          rightright: 15px; 
          top: 10px; 
 } 
}

Cuối cùng là đối với màn hình có kích thước nhỏ hơn: 320px và menu sẽ được xuất hiện theo chiều dọc từ trên xuống

@media only screen and (max-width : 320px) { 
 nav li { 
          display: block; 
          float: none; 
          width: 100%; 
 } 
 nav li a { 
         border-bottom: 1px solid #576979; 
 } 
}

Now, bạn có thể thử resizing cho trình duyệt. Nó bây giờ có thể thích ứng với các kích thước màn hình.

Showing The Menu

Trong phần này, menu sẽ vẫn bị ẩn và sẽ chỉ hiển thị khi cần bằng cách kích vào “Menu” link và chúng ra có thể làm được việc này một cách hiểu quả bằng cách sử dụng Jquery slideTogge().

$(function() { 
            var pull = $('#pull'); 
            menu = $('nav ul'); 
            menuHeight = menu.height(); 
 
           $(pull).on('click', function(e) { 
                 e.preventDefault(); 
                  menu.slideToggle(); 
          }); 
});

Tuy nhiên, khi bạn resize trình duyệt ngay khi bạn vừa xem trong một màn hình nhỏ thì menu vẫn bị ẩn đi, giống như việc display:none style bở Jquery vẫn còn được attached trong phần tử. Vì vậy, chúng ta cần xóa cái style này đi khi thay đổi kích thước của màn hình, bằng đoạn code sau:

$(window).resize(function(){ 
          var w = $(window).width(); 
             if(w > 320 && menu.is(':hidden')) { 
                    menu.removeAttr('style'); 
             } 
});

All right, tất cả những đoạn codes bên trên là những gì chúng ta cần, ngay bây giờ bạn có thể view navigation từ link Demo bên dưới, và bạn hãy thử test nó trên trang tool the Responsinator để thấy được điều chúng ta vừa làm.

Link demo: http://demo.cntech.vn/responsive-navigation-demo