Code tạo menu ngang trong html

Các các bạn có tin không? Đối với ai mình ngần ngừ chứ so với mình, việc tạo menu (dù ngang giỏi dọc) vào CSS rất cực nhọc khăn so với mình ở thời hạn đầu. Bởi để tạo được một menu với CSS thì rất cần được vận dụng không ít kiến thức về CSS tuy nhiên nó chỉ là những kiến thức cơ bản nhưng từng ấy thôi đã rất có thể gây cực nhọc dễ cho những người mới rồi.

Bạn đang xem: Code tạo menu ngang trong html

Nhờ việc rút dây kinh nghiệm từ chính bản thân, bản thân xin chia sẻ các bí quyết tạo một menu theo hướng dễ nắm bắt nhất dành cho người mới bắt đầu. Ở bài bác này mình sẽ hướng dẫn bạn tạo một thực đơn ngang và có thêm hướng dẫn tạo nên menu đổ xuống (dropdown menu), bài xích sau mình sẽ nói qua menu dọc.

Để tạo nên một menu, mình yêu cầu chúng ta xem lại toàn bộ các bài xích trước của serie này vì họ sẽ vận dụng gần như đa số các kiến thức và kỹ năng đó để tránh việc các bạn sẽ không hiểu các gì bản thân nói ở bài này.

Cách tạo thành menu ngang solo giản

Để sản xuất menu ngang, chúng ta sẽ áp dụng thẻ  để tạo khu vực menu cùng  để tạo ra từng mục trong thực đơn đó. Vì vậy, trước tiên họ có đoạn kết cấu menu bằng HTML như sau, mình đã đặt menu vào trong một chiếc thẻ
 với id là #menu.

Kế tiếp là ta có thêm một đoạn CSS sau để reset CSS mang lại dễ viết CSS về sau, và thêm một vài style đến toàn trang web như sử dụng font chữ bao gồm chân chẳng hạn.

/*==Reset CSS==*/* margin: 0; padding: 0;

/*==Style cơ phiên bản cho website==*/body font-family: sans-serif; color: #333;Được rồi, hiện giờ chúng ta sẽ thực hiện xử lý chiếc menu.

Trước tiên là phần bao bọc menu (tức là thẻ  trong #menu), bọn họ sẽ áp dụng thuộc tính list-style-type để xóa các dấu đầu dòng, thêm màu nền và gửi văn bạn dạng bên trong ra giữa cho đẹp nha.

/*==Style đến menu===*/#menu ul background: #1F568B; list-style-type: none; text-align: center;Kết quả ta tạm gồm như sau:

Kỹ thuật tạo menu ngang cơ bản 17">

Kế tiếp, bọn họ sẽ muốn cho những mục con nằm dàng ngang phải sẽ cần sử dụng gì nè? Vâng, bạn cũng có thể sử dụng float: left cho toàn bộ thẻ  hoặc đưa về hình dáng hiển thị inline-block.

Lựa chọn 1: hình dạng inline-block (khuyến khích)

#menu li color: #f1f1f1; display: inline-block; width: 120px; height: 40px; line-height: 40px; margin-left: -5px;Lựa chọn 2: hình dáng float#menu li color: #f1f1f1; float: left; width: 120px; height: 40px; line-height: 40px;Sở dĩ kiểu float mình không tồn tại margin-left: -5px là vì chưng cái 5px kia là hình dạng display: inline-block nó từ bỏ sinh ra phải phải xóa nó đi bằng cách này.

Nếu float thì cần thêm một vài thuộc tính như sau cho #menu ul.

Xem thêm: So Sánh 2 Mô Hình Osi Và Tcp/Ip, So Sánh Mô Hình Osi Và Tcp/Ip

#menu ul background: #1F568B; list-style-type: none; overflow: hidden; width: 100%;Kết quả sau khi làm phong cách Inline.

Kỹ thuật tạo ra menu ngang cơ bạn dạng 18">

Và ở đầu cuối là thêm style cho các thẻ  bên trong, đặc biệt quan trọng nhất là sẽ đưa kiểu hiển thị cho các thẻ này thành block để nó được phủ kín đáo 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:

Kỹ thuật chế tác menu ngang cơ bản 19">

Xem live:

Cách sản xuất menu dropdown đơn giản

Bây tiếng ta cũng có thể có một menu y như cái ở trên, nhưng mình thích ở phần Tin tức sẽ sở hữu thêm một vài ba menu nhỏ nữa, do vậy mình đã đặt thêm 1 thẻ  lồng phía bên trong item Tin tức với thẻ  này sẽ có class sub-menu để về sau dễ tái sử dụng.

Và đoạn CSS y hệt bên trên để làm mẫu menu đơn giản dễ dàng trước mẫu đã.

/*==Reset CSS==*/* margin: 0; padding: 0;

/*==Style cơ phiên bản cho website==*/body font-family: sans-serif; color: #333;

/*==Style cho menu===*/#menu ul background: #1F568B; list-style-type: none; text-align: center;#menu li color: #f1f1f1; display: inline-block; width: 120px; height: 40px; line-height: 40px; margin-left: -5px;#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à các bạn sẽ thấy những menu bé của thằng tin tức bị hiển thị nắm này:

Kỹ thuật chế tác menu ngang cơ bạn dạng 20">

Okay, vậy trước tiên, họ cần bắt buộc cho .sub-menu ẩn đi mẫu đã.

/*==Dropdown Menu==*/.sub-menu li display: none;Bây giờ, họ muốn tùy đổi thay lại cái .sub-menu sẽ hiển thị (nếu bao gồm hiển thị) nằm bên ngoài cái phần #menu ul nhằm nó ko bị đẩy lên như vậy. Như bài bác trước ta vẫn học rồi, nhằm tùy biến đổi vị trí một phần tử mà lại không ảnh hưởng đến các bộ phận khác thì sẽ áp dụng thuộc tínhposition. Tuy nhiên mà chúng ta muốn cái .sub-menu nó cần nằm ngay sát menu mẹ, vậy thì bọn họ phải thiết lập #menu li thành hình trạng relative vì #menu li là các item cấp khủng nhất, mình điện thoại tư vấn đó là menu mẹ.

#menu li position: relative;Và tiếp sau là cho chiếc .sub-menu thành hình trạng absolute để nó luôn luôn bên trong phạm vi thực đơn mẹ, có nghĩa là nằm vào #menu li ấy. Họ viết lại đoạn .sub-menu như sau:

.sub-menu display: none; position: absolute;Và cuối cùng, là bọn họ sẽ mang lại thằng .sub-menu sẽ hiển thị ra lúc ta rê con chuột vào menu mẹ, bởi thế ta đã kết phù hợp với một pseudo-class là :hover để làm việc này. Để hiển thị ra 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 chúng ta rê chuột vào #menu li thì nó sẽ tiến hành các biến hóa cho .sub-menu.

Thêm một chút ít CSS cho mẫu menu con bên trong để nó xóa cái margin không cần thiết đi.

.sub-menu li margin-left: 0 !important;

Bèm!

Bạn đã cầm cố được chưa ạ? Nhìn tầm thường cũng đơn giản và dễ dàng thôi nhưng mà hãy cứ thử có tác dụng vài lần cho đến khi nào không buộc phải xem tutorial nữa là được, vày nó rất đặc trưng sau này khi hợp tác vào làm các giao diện cơ website hoàn chỉnh đó. :D