Để làm một website hay một blog điều đầu tiên ta cần thiết kế giao diện cho chúng sao cho thân thiện với người sử dụng. Việc tạo menu là một trong những phần quan trọng, làm sao để người dùng dễ dàng cho người dùng tìm kiếm thông tin trên trang web của bạn. Hôm nay, mình sẽ chia sẻ cách tạo menu ngang ba cấp bằng html và css khá đơn giản. Để hiểu được code tất nhiên ta phải có một kiến thức nền tảng nhất định và html và css, còn nếu chưa thông lắm về cái này thì bạn cứ áp code vào temp trang web của mình. Đầu tiên ta tạo menu, tốt nhất cứ cho code nằm dưới thẻ </header> bằng cách nhấn ctrl + F rồi dán </header>nhấn Enter để tìm. Mã: <div class="nav"> <ul> <li><a href="">Trang chủ</a></li> <li><a href="">Thư mục</a> <ul> <li><a href="">Menu cấp 1</a> <ul> <li><a href="">Menu cấp 2</a> <ul> <li><a href="">Menu cấp 3</a></li> <li><a href="">Menu cấp 3</a></li> <li><a href="">Menu cấp 3</a></li> </ul> </li> </ul> </li> <li><a href="">Menu cấp 1</a></li> <li><a href="">Menu cấp 1</a></li> </ul> </li> <li><a href="">Tài liệu</a> <ul> <li><a href="">Menu cấp 1</a> <ul> <li><a href="">Menu cấp 2</a></li> <li><a href="">Menu cấp 2</a> <ul> <li><a href="">Menu cấp 3</a></li> <li><a href="">Menu cấp 3</a></li> <li><a href="">Menu cấp 3</a></li> </ul> </li> </ul> </li> <li><a href="">Menu cấp 1</a></li> </ul> </li> <li><a href="">Liên hệ</a></li> <li><a href="">Đăng kí</a></li> </ul> </div> Nếu các bạn muốn nhiều cấp menu hơn nữa có thể thêm tương tự, ta cứ theo quy luật thẻ ul chứa nhiều thẻ li mỗi thẻ li chứa một thẻ a, trong li có thể chứa thẻ ul để tạo thêm 1 cấp nữa, cứ như vậy ta tạo được menu nhiều cấp. Bây giờ, ta đến phần css cho menu: Lưu ý: Ta cho phần code dưới này vào trên thẻ ]]></b:skin> cũng bằng cách nhấn ctrl + F rồi dán ]]></b:skin> nhấn Enter để tìm. Mã: .nav{background:#F5F5F5; width:100%; height:50px; margin-top:0px; border-top:1px solid rgba(0, 0, 0, .1); border-bottom:1px solid rgba(0, 0, 0, .1);} .nav ul{list-style:none;margin:0;padding:0;margin-left: 0px;display:block;line-height:50px;} .nav ul li{width:220px; height:50px;display:inline-block;width:220px;background:#DDDDDD;text-align: center;position:relative;} .nav ul li a{display:block;padding:7px 10px;color:#333333; padding-left: 20px; padding-right: 20px;line-height: 36px;} .nav ul li ul{position:absolute;display:none; z-index:100;right: 0px;top: 50px;} .nav ul li a:hover{background-color:#111111;color:#FFFFFF;} .nav ul li:hover >ul{display:block} .nav ul li ul li{width:220px;height:50px;display:block;background:#DDDDDD; border-top:1px solid #444444;} .nav ul li ul li ul{position:absolute;display:none; z-index:100;} .nav ul li ul li ul{left: 220px; top: 0px;} .nav ul li ul li ul li ul{left: 220px; top: 0px;} .nav ul li:hover >a:before { content:"\f0a4 "; font-family:fontawesome; } Code css ở trên phù hợp với trang của mình, khi về trang của bạn có thể bị lệch do kích thước không tương ứng, vì vậy có thể cần phải chỉnh sửa một số thông số. Mình xin giải thích qua một vài thuộc tính để mọi người tự điều chỉnh, ví dụ: width, height là chiều rộng và dài, margin: lề, border :biên, list-style:none để loại bỏ dấu chấm đầu dòng kiểu danh sách, padding: vùng đệm, display: hiển thị , position: vị trí tương đối. Những thuộc tính này bạn có thể tìm trên mạng để hiểu chi tiết. Sau khi bạn thực hiện 2 bước đơn giản trên ta sẽ có menu ngang đa cấp như ý muốn. Mọi thắc mắc xin để lại bình luận ở bài viết nhé. Chúc các bạn thành công. Thân ^^
