Nhờ việc rút dây kinh nghiệm từ chính bản thân, mình xin chia sẻ các cách tạo một menu theo hướng dễ hiểu nhất dành cho người mới bắt đầu. Ở bài này mình sẽ hướng dẫn bạn tạo một menu ngang và có thêm hướng dẫn tạo menu đổ xuống (dropdown menu), bài sau mình sẽ nói qua menu dọc.
Để tạo được một menu, mình yêu cầu các bạn xem lại toàn bộ các bài trước của serie này vì chúng ta sẽ vận dụng gần như hầu hết các kiến thức đó để tránh việc bạn sẽ không hiểu những gì mình nói ở bài này.
Tóm Tắt
Mục lục nội dung
Cách tạo menu ngang đơn thuầnLựa chọn 1 : Kiểu inline-block ( khuyến khích )Lựa chọn 2 : Kiểu floatCách tạo menu dropdown đơn thuầnXem tiếp bài trong serie
Cách tạo menu ngang đơn giản
Để tạo menu ngang, chúng ta sẽ sử dụng thẻ để tạo khu vực menu và để tạo từng mục trong menu đó. Do vậy, trước tiên chúng ta có đoạn cấu trúc menu bằng HTML như sau, mình sẽ đặt menu vào trong một cái thẻ
với id là #menu.
Kế tiếp là ta có thêm một đoạn CSS sau để reset CSS cho dễ viết CSS về sau, và thêm một số ít style cho toàn website như dùng font chữ có chân ví dụ điển hình ./ * = = Reset CSS = = * / * { margin : 0 ; padding : 0 ; } / * = = Style cơ bản cho website = = * / body toàn thân {font-family : sans-serif ; color : # 333 ; }Được rồi, giờ đây tất cả chúng ta sẽ triển khai giải quyết và xử lý cái menu .Trước tiên là phần bảo phủ menu ( tức là thẻ trong # menu ), tất cả chúng ta sẽ sử dụng thuộc tính list-style-type để xóa những dấu đầu dòng, thêm màu nền và đưa văn bản bên trong ra giữa cho đẹp nha ./ * = = Style cho menu = = = * / # menu ul { background : # 1F568 B ; list-style-type : none ; text-align : center ; }Kết quả ta tạm có như sau :
Kế tiếp, tất cả chúng ta sẽ muốn cho những mục con nằm dàng ngang nên sẽ dùng gì nè ? Vâng, bạn hoàn toàn có thể sử dụng float : left cho toàn bộ thẻ hoặc đưa về kiểu hiển thị inline-block .Lựa chọn 1: Kiểu inline-block (khuyến khích)Lựa chọn 1 : Kiểu inline-block ( khuyến khích )# menu li { color : # f1f1f1 ; display : inline-block ; width : 120 px ; height : 40 px ; line-height : 40 px ; margin-left : – 5 px ; }Lựa chọn 2: Kiểu floatLựa chọn 2 : Kiểu float# menu li { color : # f1f1f1 ; float : left ; width : 120 px ; height : 40 px ; line-height : 40 px ; }Sở dĩ kiểu float mình không có margin-left : – 5 px là vì cái 5 px kia là kiểu display : inline-block nó tự sinh ra nên phải xóa nó đi bằng cách này .Nếu float thì nên thêm một vài thuộc tính như sau cho # menu ul .Xem thêm : Hla Là Gì – Kháng Nguyên Bạch Cầu Người ( Hla ) Hệ Thống# menu ul { background : # 1F568 B ; list-style-type : none ; overflow : hidden ; width : 100 % ; }Kết quả sau khi làm kiểu Inline .
Và sau cuối là thêm style cho những thẻ bên trong, quan trọng nhất là sẽ đưa kiểu hiển thị cho những thẻ này thành block để nó được phủ kín cái # menu ul .# menu a { text-decoration : none ; color : # fff ; display : block ; } # menu a : hover {background : # F1F1F1 ; color : # 333 ; }Kết quả khi hoàn thành xong :
Xem live:
Xem thêm: 20 web font HTML tốt nhất năm 2022
Cách tạo menu dropdown đơn giản
Bây giờ ta cũng có một menu giống như cái ở trên, nhưng mình muốn ở phần Tin tức sẽ có thêm một vài menu con nữa, như vậy mình sẽ đặt thêm một thẻ lồng bên trong item Tin tức và thẻ này sẽ mang class sub-menu để sau này dễ tái sử dụng .
Tin tức
Và đoạn CSS y hệt bên trên để làm cái menu đơn thuần trước cái đã ./ * = = Reset CSS = = * / * { margin : 0 ; padding : 0 ; } / * = = Style cơ bản cho website = = * / body toàn thân {font-family : sans-serif ; color : # 333 ; } / * = = Style cho menu = = = * / # menu ul {background : # 1F568 B ; list-style-type : none ; text-align : center ; } # menu li {color : # f1f1f1 ; display : inline-block ; width : 120 px ; height : 40 px ; line-height : 40 px ; margin-left : – 5 px ; } # menu a {text-decoration : none ; color : # fff ; display : block ; } # menu a : hover {background : # F1F1F1 ; color : # 333 ; }Bây giờ hiệu quả hiển thị ra là bạn sẽ thấy những menu con của thằng Tin tức bị hiển thị thế này :
Okay, vậy thứ nhất, tất cả chúng ta cần phải cho. sub-menu ẩn đi cái đã ./ * = = Dropdown Menu = = * /. sub-menu li { display : none ; }Bây giờ, tất cả chúng ta muốn tùy biến lại cái. sub-menu sẽ hiển thị ( nếu có hiển thị ) nằm bên ngoài cái phần # menu ul để nó không bị đẩy lên như vậy. Như bài trước ta đã học rồi, để tùy biến vị trí một thành phần mà không ảnh hưởng tác động đến những thành phần khác thì sẽ sử dụng thuộc tínhposition. Nhưng mà tất cả chúng ta muốn cái. sub-menu nó phải nằm gần menu mẹ, vậy thì tất cả chúng ta phải thiết lập # menu li thành kiểu relative vì # menu li là những item cấp lớn nhất, mình gọi đó là menu mẹ .# menu li { position : relative ; } Và tiếp theo là cho cái. sub-menu thành kiểu absolute để nó luôn luôn nằm trong khoanh vùng phạm vi menu mẹ, tức là nằm trong # menu li ấy. Chúng ta viết lại đoạn. sub-menu như sau :. sub-menu { display : none ; position : absolute ; } Và sau cuối, là tất cả chúng ta sẽ cho thằng. sub-menu sẽ hiển thị ra khi ta rê chuột vào menu mẹ, như vậy ta sẽ tích hợp với một pseudo-class là : hover để thao tác này. Để hiển thị ra tất cả chúng ta gán display : block cho nó .# menu li : hover. sub-menu { display : block ; } Đoạn # menu li : hover. sub-menu nghĩa là khi tất cả chúng ta rê chuột vào # menu li thì nó sẽ thực thi những đổi khác cho. sub-menu .Thêm một chút ít CSS cho cái menu con bên trong để nó xóa cái margin không thiết yếu đi .. sub-menu li { margin-left : 0 ! important ; } Bèm !
Bạn đã nắm được chưa nào ? Nhìn chung cũng đơn thuần thôi nhưng hãy cứ thử làm vài lần cho đến khi nào không cần xem tutorial nữa là được, vì nó rất quan trọng sau này khi bắt tay vào làm những giao diện cơ website hoàn hảo đó. ?
Xem tiếp bài trong serieXem tiếp bài trong seriePhần trước : Một vài Pseudo Class đơn giảnPhần tiếp nối : Kỹ thuật tạo menu dọc cơ bản
Source: https://final-blade.com
Category: Kiến thức Internet
