Hướng dẫn tạo Navigation Menu Full-screen với CSS3 và JQuery

0
142

Chắc hẳn bạn đã nhìn thấy rất nhiều website hoặc template được thiết kế trong những năm gần đây được thiết kế với những navigation chuyển động rất đẹp mắt đúng không ? Trong bài viết hôm nay, mình sẽ chia sẻ cho các bạn cách tạo 1 navigation menu full-screen với CSS3 và một chút jQuery nhé. Mình sẽ sử dụng thêm font Montserrat rất đẹp được hỗ trợ trong thư viện Google Fonts và thư viện font icon Ionicons.

HTML

Bước đầu tiên chúng ta sẽ đi xây dựng cấu trúc HTML. Những gì chúng ta cần là:

  • 1 navigation bar, nơi mà chúng ta sẽ đặt logo ở bên trái, 2 nút bao gồm 1 nút Sign In và 1 nút gọi đến Menu ở phía bên phải màn hình
  • Menu full-screen với nền bóng mờ và nút Close
    Code sẽ như thế này:

CSS

Style cho body và navigation bar. Chúng ta sẽ thêm những style cơ bản cho thẻ body và background image nhìn cho cool 🙂

CSS cho Navigation

Navigation bar có class .navbar sẽ có height: 90px và width: 100%. Set display: flex và thuộc tính justify-content: space-between, với thuộc tính này cho phép 2 thẻ con là h1 có class .logo nằm về phía trái trang web còn thẻ div class .navbar-buttons sẽ nằm về phía bên phải trang. Và không quên style cho nút Sign In.

CSS cho Overlay

Bây giờ đên lượt style cho phần menu chính có overlay của chúng ta

Set nó overflow: hiddenposition: fixed cho cố định, không quên thêm transition để bóng mở này xuất hiện với thêm hiệu ứng.

Với .overlay.open là trạng thái xuất hiện của menu nên ta set nó visibility: visibleopacity: 1 để có thể nhìn thấy được.

Great ! Bây giờ sẽ style cho phần tiêu đề Menu và các item với cái style cơ bản

Thêm một vài hiệu ứng hover cho các item của menu and các button có trên trang. Tiếp theo là một dòng gạch ngang chữ khi hover, focus và active trên item menu. Chúng ta sẽ sử dụng element pseudo của CSS:

Còn dưới đây là hiệu ứng fade cho menu khi class .open được gọi đến

Cũng làm animate cho các nút còn lại trên trang khi hover qua và thêm một chút scale cho button khi hover qua nhé

jQuery

Chúng ta cần jQuery khi click .open-menu sẽ gọi đến sự kiện mở .overlay, và ngược lại click .close-menu sẽ tắt overlay đi. Do đó, chúng ta sẽ viết 1 đoạn jQuery giống như dưới này

Như vậy là bạn đã có được một hiệu ứng full-screen menu đẹp mắt mà rất hấp dẫn. Dưới đây là toàn bộ soure code cũng như demo nhé. Cảm ơn các bạn đã theo giõi !

Download

See the Pen Full-screen navigaion menu by huy kon (@huykon225) on CodePen.26877

ĐỂ LẠI BÌNH LUẬN