Trang chủ Web DevelopmentHTML/CSS [Học CSS] Kỹ thuật tạo menu ngang cơ bản

[Học CSS] Kỹ thuật tạo menu ngang cơ bản

bởi Thạch Phạm
41 bình luận 29307 views
Khuyến mãi hosting

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

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.

Cách tạo menu ngang đơn giản

Để tạo menu ngang, chúng ta sẽ sử dụng thẻ <ul> để tạo khu vực menu và <li> để 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ẻ <div> với id là #menu.

<div id="menu">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Diễn đàn</a></li>
    <li><a href="#">Tin tức</a></li>
    <li><a href="#">Hỏi đáp</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</div>

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ố style cho toàn trang web như dùng font chữ có chân chẳng hạn.


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

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

Được rồi, bây giờ chúng ta sẽ tiến hành xử lý cái menu.

Trước tiên là phần bao bọc menu (tức là thẻ <ul> trong #menu), chúng ta sẽ sử 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à đưa văn bản bên trong ra giữa cho đẹp nha.

/*==Style cho menu===*/
#menu ul {
  background: #1F568B;
  list-style-type: none;
  text-align: center;
}

Kết quả ta tạm có như sau:

css-menu-basic-01

Kế tiếp, chúng ta sẽ muốn cho các mục con nằm dàng ngang nên sẽ dùng gì nè? Vâng, bạn có thể sử dụng float: left cho tất cả thẻ <li> hoặc đưa về kiểu hiển thị inline-block.

Lựa chọn 1: Kiểu 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: Kiểu float

#menu li {
  color: #f1f1f1;
  float: left;
  width: 120px;
  height: 40px;
  line-height: 40px;
}

Sở dĩ kiểu float mình không có margin-left: -5px là vì cái 5px 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.

#menu ul {
  background: #1F568B;
  list-style-type: none;
  overflow: hidden;
  width: 100%;
}

Kết quả sau khi làm kiểu Inline.

css-menu-basic-02

Và cuối cùng là thêm style cho các thẻ <a> bên trong, 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 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:

css-menu-basic-0

Xem live:

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ẻ <ul> lồng bên trong item Tin tức và thẻ <ul> này sẽ mang class sub-menu để sau này dễ tái sử dụng.

<div id="menu">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Diễn đàn</a></li>
    <li><a href="#">Tin tức</a>
      <ul class="sub-menu">
        <li><a href="#">WordPress</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Hosting</a></li>
      </ul>
    </li>
    <li><a href="#">Hỏi đáp</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</div>

Và đoạn CSS y hệt bên trên để làm cái menu đơn giản trước cái đã.

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

/*==Style cơ 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ờ kết quả hiển thị ra là bạn sẽ thấy các menu con của thằng Tin tức bị hiển thị thế này:

basic-dropdown-menu-01

Okay, vậy trước tiên, chúng ta cần phải cho .sub-menu ẩn đi cái đã.

/*==Dropdown Menu==*/
.sub-menu li {
  display: none;
}

Bây giờ, 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 phần tử mà không ảnh hưởng đến các phần tử khác thì sẽ sử dụng thuộc tínhposition. Nhưng mà chúng ta muốn cái .sub-menu nó phải nằm gần menu mẹ, vậy thì chúng ta phải thiết lập #menu li thành kiểu relative vì #menu li là các 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 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à cuối cùng, là 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ẽ kết 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ẽ thực hiện các thay đổi cho .sub-menu.

Thêm một chút CSS cho cái 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 đã nắm được chưa nào? Nhìn chung cũng đơn giả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 các giao diện cơ website hoàn chỉnh đó. 😀

41 bình luận

Có thể bạn quan tâm

41 bình luận

minh tuyen 09/05/2020 - 1:13 Chiều

cho em hỏi là làm sao để dùng song song css và dreamwear z ak …em đang dùng dreamwear ak

Reply
hiếu 20/04/2020 - 10:39 Sáng

anh ơi cho em hỏi là muốn chèn logo vào thì phải làm như nào ạ ? em chèn được vào rồi nhưng mà dùng đủ các thẻ để căn lề bên css nhưng nó vẫn không chịu ra bên trái, mong anh chỉ em khắc phục hic

Reply
huy 15/04/2020 - 5:00 Chiều

Bên web của mình nó bị cái menu sidebar nó chi chít không thân thiện với di động. Có cách nào khắc phục không ạ?

Reply
Wordpress – Envisafety 11/02/2018 - 2:05 Sáng

[…] Kĩ thuật tạo đường liên kết theo cấu trúc. https://thachpham.com/web-development/html-css/ky-thuat-tao-menu-ngang-css.html […]

Reply
Huy Nguyễn 21/06/2017 - 3:38 Chiều

Em nghĩ ở phần
.sub-menu li {
margin-left: 0;
}
nên là padding-left: 5px;
Tại vì lúc em để margin-left: 0; thì cái sub-menu nó bị dư ra 5px trên trái với thiếu đi 5px bên phải.

Reply
Huy Nguyễn 21/06/2017 - 3:16 Chiều

Anh ơi! Em đã thêm cái margin-left: 0; vào rồi mà nó vẫn dư ra 5px ở bên trái và thiếu mất 5px ở bên phải cái sub-menu là sao anh.

Reply
hoàng 16/06/2017 - 2:28 Chiều

em làm theo nhưng cái thành phần submenu nó lại ko có background và color luôn làm em cứ tưởng sai ý ạ, chỉ có hover vào submenu thì backg và color nó đúng, còn bình thường hover vào thẻ li trên menu là backgr của submenu và chữ màu trắng hết làm em tưởng ko hiện ý. tất nhiên thêm vào là xong nhưng có ai giúp em hiểu vì sao đc ko ạ

Reply
Duong Yen 12/04/2017 - 4:28 Chiều

Chào bạn!
Bạn cho mình hỏi hiện mình đang dùng asp.net trong vs 2005 để viết web, nhưng không thể sử dụng CSS theo bài hướng dẫn của bạn để làm menu 2 cấp. Vậy bạn có cách nào làm không xin chỉ giúp mình với. Cảm ơn bạn!

Reply
Hoàng 27/03/2017 - 9:39 Sáng

E làm y như trong hướng dẫn video của a, nhưng khi rê chuột vào menu con. thì nó xổ ra hàng ngang, ko phải hàng dọc như trong video. E đã kiểm tra kĩ code giống y chan trong clip hướng dẫn. E xài dreamweaver

Reply
Hân 20/05/2017 - 7:02 Chiều

thêm đoạn css này nha bạn #menu li {
position: relative;
}

Reply
duc 04/01/2017 - 4:45 Chiều

Anh ơi cho em hỏi là tại sao trong video ấy thì phải dùng vùng chọn thứ cấp ạ. Em thử không dùng vùng chọn thứ cấp (bỏ dấu lớn hơn) và có 2 sub-menu vẫn sổ ra được sub-menu ạ. Hai cách như thế thì nó khác nhau ở đâu ạ? Em xin cảm ơn ạ

Reply
son 29/11/2016 - 7:01 Chiều

Em cảm ơn thầy nhiều ạ. Hình như thầy thiếu background-color ở sub-menu.

Reply
Long 23/10/2016 - 10:53 Sáng

Thầy ơi sao em coppy y hệt code của thầy thì đc nhưng làm thêm 1 cái Img ở dưới thì nó lại k được .

Reply
võ vũ 01/10/2016 - 11:17 Sáng

sao e rê chuột vào menu li nó k xuất hiện sub-menu vậy a, giúp e với ạ!!

Reply
tony 09/11/2016 - 1:14 Sáng

là do bạn sai đoạn code này nhé:
Tin tức

WordPress
SEO
Hosting

để ý của mục tin tức kết thúc ở dưới cùng nhé

Reply
võ vũ 01/10/2016 - 11:09 Sáng

sao em rê chuột vào menu li nó k xuất hiện sub-menu vậy anh??

Reply
Thanh Lâm 23/09/2016 - 9:56 Chiều

Nếu muốn các menu con hiện ra theo hàng ngang luôn thay vì hàng dọc thì làm sao vậy anh?

Reply
Hoàng Nam 21/09/2016 - 5:21 Chiều

khó hiểu cái thuộc tính position thật.
hi vọng có bài hướng dẫn phần responsive cho menu nữa của anh.

Reply
Phạm Anh 15/09/2016 - 5:12 Chiều

Muốn các menu con hiện ngang chứ ko phải dọc, thì làm như thế nào hả a?

Reply
Ninh 09/11/2016 - 9:26 Chiều

Dùng thuộc tính display nha bạn

Reply
Sơn 10/09/2016 - 10:26 Chiều

Cái phần tin tức, e k trỏ chuột vào 3 phần tử wordpress…đc a ơi :'(

Reply
Sơn 10/09/2016 - 10:42 Chiều

đc rồi a 😀

Reply
Khánh 06/09/2016 - 2:23 Chiều

cho em hỏi muốn thêm menu 1 cái sub-menu xổ xuống thì làm ntn vậy a.

Reply
thiện 05/09/2016 - 12:06 Chiều

rất hay cảm ơn thầy

Reply
trần mai vũ 28/08/2016 - 8:36 Sáng

thay oi cho em hoi viet vao notepad luu lam sao de 2 code css va html chay vay thay

Reply
Phạm Anh 15/09/2016 - 5:13 Chiều

chỉ lần trong phần head , thẻ

Reply
Phạm Anh 15/09/2016 - 5:15 Chiều

link href=” địa chỉ dẫn file css ” rel = ” stylesheet”

Reply
Thạch Phạm 17/09/2016 - 2:07 Sáng

Nếu bạn viết code trong comment thì bỏ code vào cặp shortcode này là được:

[code]

[/code]

Reply
hung 07/04/2017 - 9:43 Chiều

đặt file css là gì đó đuôi là .css
VD : style.css
Rồi gọi nó bằng cách vào phần
ghi

Reply
dũng 26/08/2016 - 8:28 Chiều

quá kĩ lưỡng !!! thanhks ad

Reply
Phạm Anh Sơn 12/08/2016 - 10:26 Sáng

chỗ này display thầy để là block mà sao nó vẫn không xuống dòng nhỉ
#menu a {
text-decoration: none;
color: #fff;
display: block;
}

Reply
Phúc Bình 09/08/2016 - 9:29 Sáng

các thành phần trong sub-menu của em sao nó không tự động xuống hàng được vậy anh

Reply
Hoang 29/07/2016 - 2:15 Sáng

Thầy ơi em áp dụng vào trong blogspot mà không được ạ!

Reply
nguyen tran anh 21/07/2016 - 2:06 Chiều

thầy ơi, khi dùng cách 2 foat nó cũng ra kiểu inline nhưng mà tất cả các item lệch hết sang bên trái, và cái dâu list vẫn còn ạ 🙁

Reply
Thạch Phạm 23/07/2016 - 6:36 Sáng

Bạn phải thêm một thuộc tính list-style-type: none vào để mất cái dấu list đi nhé.

Reply
nguyễn hoàng vũ 20/07/2016 - 12:00 Chiều

#menu li:hover .sub-menu {
display: block;

Vậy thì trỏ chuột đến bất cứ li nào thì sub-menu đều hiện thị đúng không anh ?

Reply
Thạch Phạm 24/07/2016 - 5:20 Sáng

Đúng rồi bạn.

Reply
Linh 11/07/2016 - 3:49 Chiều

Thầy ơi! nếu submenu mà trong các thẻ li có chữ nó dài hơn thì nó tự động xuống dòng, mình khác phục sao thầy?

Reply
Thạch Phạm 13/07/2016 - 2:25 Chiều

Cách duy nhất là viết ngắn lại hoặc thu nhỏ size chữ lại bạn nhé.

Reply
Phạm Hữu Nam 08/06/2016 - 5:55 Chiều

sao lại có margin-left: -5px; vậy a?

Reply
Thạch Phạm 08/06/2016 - 9:56 Chiều

Để cho các phần tử li nó xích lại gần nhau hơn xíu đó mà. 😀

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.