Việc làm menu dọc với css không phải việc đơn giản và cần sử dụng nhiều kỹ thuật. Nếu là những người đã có nhiều kinh nghiệm thì đây không phải việc khó khăn và có thể hoàn thành nhanh chóng. Tuy nhiên, với những người mới thì đây lại là một công việc không hề đơn giản một chút nào. Đây là một trong những việc cơ bản mà người làm web cần nắm vững Trong bài viết này, hãy cùng chúng tôi đi tìm hiểu về menu dọc và cách làm menu dọc cơ bản với css nhé.
Giới thiệu về menu dọc
Theo công ty lập trình website chuyên nghiệp Mona Media thì Menu của trang web có thể được giữ nguyên trong một khoảng thời gian rất dài. Các trang web có xu hướng phát triển cần thay đổi chức năng được thêm vào cũng như cơ sở người dùng tăng lên. Chính vì vậy, mọi người cần tạo menu có phạm vi cho các mục menu được thêm vào và xóa đi được khi trang tiến triển, các menu có thể được dịch sang các loại ngôn ngữ khác. Do đó, các liên kết sẽ thay đổi về độ dài.
Ngoài ra, mọi người còn thấy được mình đang làm việc trên các website nơi HTML cho phép menu được tự động bằng các loại ngôn ngữ từ phía máy chủ thay vì HTML tĩnh. Tuy vậy, điều này cũng không có nghĩa là biết HTML là lỗi thời, bởi thực tế nó sẽ trở nên quan trọng hơn rất nhiều vì kiến thức này vẫn rất cần thiết để tạo các mẫu HTML cho tập lệnh từ phía máy chủ điền vào.
Trong thiết kế website tương tác hiện đại, menu dọc xuống được xuất hiện rất thường xuyên. Sau khi có một phiên bản css cao hơn, mọi người có thể tạo ra các hiệu ứng bằng cách sử dụng công nghệ HTMl đạt chuẩn.
Menu dọc cơ bản có thể được giữ nguyên trong một khoảng thời gian dài
Hướng dẫn làm menu dọc cơ bản với css
Mặc dù menu ngang được sử dụng nhiều hơn nhưng vẫn có nhiều trường hợp cần phải sử dụng menu dọc. Về cách làm menu dọc thì mọi người cũng có thể làm tương tự như menu ngang. Đó là một danh sách với <ul> rồi xóa list-style-type cho các thẻ <li> là được chứ không cần phải thực hiện quá nhiều bước như menu ngang.
Để bắt đầu mọi người cần một đoạn menu như sau:
|
01
02
03
04
05
06
07
08
|
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Tin tức</a></li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
|
Trước tiên việc cần làm là thêm css vào #menu ul để thêm màu nền cho đẹp hơn, cùng với đó là loại bỏ đi các chấm đầu dòng không cần thiết trong danh sách.
|
01
02
03
04
05
06
07
|
#menu ul {
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
|
Tiếp sau đó là viết thêm thẻ <li> nhằm giúp thêm chiều cao cho nó với height và line-height bằng đúng với chiều cao để nó đứng giữa block.
|
01
02
03
04
05
06
07
|
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}
|
Thêm css vào #menu ul để thêm màu nền cho đẹp hơn
Và cuối cùng là viết css cho thẻ ở bên trong menu, chuyển cho nó trở thành block và thêm vào đó các style cần thiết. Cùng với đó là tạo hiệu ứng khi rê chuột vào mục menu.
|
01
02
03
04
05
06
07
08
09
|
#menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #CDE2CD;
}
|
Kết quả:
Và như vậy là công việc đã hoàn thành, mọi người đã có được một menu nằm dọc.
Tạo dropdown menu dọc (Menu dọc đổ xuống)
Để không cần phải sử dụng tới jQuery trong serie css cơ bản này mọi người có thể sử dụng một menu dọc đổ xuống không có hiệu ứng. Mà thay vào đó thì nó sẽ xổ ra bên ngoài từ menu mẹ khi được chỉ chuột vào.
Để làm được điều này mọi người hãy làm lại các menu đơn giản phía trên rồi tiếp tục bổ sung menu con vào như thế này:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Tin tức</a>
<ul class=”sub-menu”>
<li><a href=”#”>WordPress</a></li>
<li><a href=”#”><a href=”#” data-wpel-link=”internal”>SEO</a></a></li>
<li><a href=”#”><a href=”#” data-wpel-link=”exclude”>Hosting</a></a></li>
</ul>
</li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
|
Rồi tiếp tục sử dụng lại css ở phần trên:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
body {
font-family: sans-serif;
font-size: 15px;
}
#menu ul {
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}
#menu li a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
#menu li:hover {
background: #CDE2CD;
}
|
Bây giờ thì mọi người sẽ có thể thấy được menu con trong phần tin tức bị lỗi hiển thị, vì vậy mọi người cần phải viết thêm css như sau.
Trước tiên là đưa #menu li về hiển thị kiểu relative.
|
01
02
03
|
#menu ul li {
position: relative;
}
|
Tiếp tục chuyển #menu .sub-menu về dạng absolute rồi chỉnh vị trí hiển thị của nó sang phía bên phải là 250px. Đồng thời lúc này tiến hành đưa nó về sát mép top của phần tử mẹ.
|
01
02
03
04
05
|
#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
}
|
Bây giờ thì mọi người chỉ cần viết thêm css để .sub-menu ẩn đi và hiện ra khi được chỉ chuột vào #menu li đang chứa .sub-menu.
|
01
02
03
04
05
06
07
08
09
|
#menu .sub-menu {
position: absolute;
left: 250px;
top: 0;
display: none;
}
#menu li:hover .sub-menu {
display: block;
}
|
Cuối cùng chúng đã có thành quả:
Như vậy mà mọi công việc đã hoàn tất, website đã có được một menu dọc cơ bản. Nếu là người mới thì đây là một công thức khá phức tạp nhưng đối với những người đã có kinh nghiệm thì việc này lại hết sức đơn giản. Với công thức trên mọi người có thể dễ dàng làm menu dọc cơ bản với css và menu dọc có đổ xuống được rồi. Làm đúng theo công thức để có được một menu như mong muốn nhé. Hy vọng những kiến thức Onlycssmenu đã chia sẽ hữu ích!