Home » Chia Sẻ Code » CSS » Tự Code Menu cố định bằng HTML và CSS

Tự Code Menu cố định bằng HTML và CSS

Trong một bài viết trước chúng ta đã tự code một Menu Sidebar Responsive khá ấn tượng. Và cũng trong bài viết đó tôi đã nói sơ qua về tầm quan trọng của Menu trên website. Trong bài viết này chúng ta cũng tạo một Menu nhưng sẽ thêm tính năng cố định khi người dùng scroll chuột. Cụ thể chúng ta chỉ sử dụng HTML và CSS mà thôi.

Đầu tiên chúng ta sẽ tạo một cấu trúc menu với HTML như sau:

Bây giờ chúng ta sẽ tiến hành CSS cho menu với Code sau:

Trong toàn bộ đoạn Code bên trên các bạn chỉ cần lưu ý đến giá trị fixNav.  Nếu như đối tượng nào được gán giá trị fixed, thì sẽ luôn luôn cố định tại một vị trí nhất định. Vị trí đó sẽ phụ thuộc vào giá trị top, left, bottom, right tùy vào các bạn gán thuộc tính như thế nào. Trong đoạn Code bên trên tôi đã khai báo top và left đều bằng 0 để nó luôn nằm trên cùng, bên trái. Bên trên tôi để width:100% nên menu sẽ kéo dài toàn màn hình.

Xong rồi đấy, giờ là lúc chúng ta hưởng thành quả của đoạn Code bên trên. Mời các bạn cùng Demo.

See the Pen Self-fixed menu with HTML and CSS by Lại Văn Đức (@laivanduc) on CodePen.16775