6 Bước Tạo Menu Ngang Trong Html Chi Tiết, Cực Dễ Làm

Trong bài chia sẻ dưới đây sẽ hướng dẫn bạn các thao tác tạo menu ngang trong HTML, CSS mà không bị biến dạng hoặc nhảy lên, xuống. Điều này giúp cho website trở nên chuyên nghiệp, mang tính thẩm mỹ cao.

Trong bài chia sẻ dưới đây sẽ hướng dẫn bạn các thao tác tạo menu ngang trong HTML, CSS mà không bị biến dạng hoặc nhảy lên, xuống. Điều này giúp cho website trở nên chuyên nghiệp, mang tính thẩm mỹ cao. Mời bạn cùng tham khảo nhé.

tao menu ngang trong html

Cách tạo menu ngang trong HTML và CSS

Menu là yếu tố quan trọng không thể thiếu của website. Nó chính là tập hợp các liên kết được thiết kế tùy biến để người dùng có thể truy cập qua lại giữa các trang. 

Menu được thiết kế nhiều vị trí trên website như dàn hàng ngang, bên trái, bên phải. Tuy nhiên, menu ngang được sử dụng phổ biến và rộng rãi nhất.

Để tạo tạo menu ngang trong HTML và CSS, bạn thực hiện theo 5 bước hướng dẫn sau.

  • Bước 1: Tạo HTML Mark-up

Trước khi tiến hành tạo một menu ngang trong HTML, bạn cần thiết lập HTML mark-up bằng 1 liên kết di chuyển đến style sheet ở ngoài (có dạng style.css). HTML này cũng được sử dụng để tạo kiểu thiết kế cho menu.

Cú pháp câu lệnh tạo HTML mark-up có dạng như sau:

<html>

    <head>

        <title> An  Horizontal Menu  </title>

         <!-- Link to external stylesheet -->

        <link rel="stylesheet" type="text/css" href="style.css" />    

    </head>

    <body>

<div id="menu">

            <!-- A division for the menu -->

        </div>

    </body>

</html>

  • Bước 2: Tiến hành viết CSS cho Menu Division

Khi đã hoàn tất tạo một HTML mark-up, bạn thực hiện tiếp bước viết code CSS cho Menu Divsion. Lúc này, bạn sử dụng đoạn mã bên dưới để viết CSS.

#menu

{

 width: 900px;

 border: 1px solid #000;

 height: 100px;

 background-color: #181818;

 font-family: Helvetica, sans-serif;

 font-size: 13px;

 border-radius: 10px;

 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

}

Tại phần nội dung xác định tạo menu ngang CSS, bạn nhập các thông số như sau:

- Kích thước chiều rộng là 900px, chiều cao là 100px. 

- Màu nền: Chọn màu đen.

- Tiếp đến, bạn xác định font chữ, kích thước chữ.

- Sử dụng CSS3 border-radius để thiết lập một đường cong nhỏ cho menu. 

  • tao menu ngang trong html
  • Bước 3: Thêm item vào menu

Đối với tạo menu ngang trong HTML, bước này giúp bạn định danh từng item để người truy cập website dễ dàng di chuyển, hoặc chọn lựa trang cần xem thông tin. Để tạo menu item, bạn dùng đến unordered tag list (là dạng thẻ danh sách không có thứ tự), và thêm đoạn code bên dưới vào giữa các menu division tag của phần nội dung của HTML document.

<div id="menu"> <!--Start the unordered list after the opening menu division -->

  <ul>

    <li><a href="#">Trang chủ</a></li>

    <li><a href="#">Dịch vụ</a></li>

    <li><a href="#">Sản phẩm</a></li>

    <li><a href="#">Giới thiệu</a></li>

    <li><a href="#">Liên hệ</a></li>

  </ul>  

</div>

Trong mỗi tag của item sẽ có một anchor tag đóng vai trò tạo liên kết. Ở bước này, tất cả các thuộc tính hreft đều chưa có giá trị (tức là còn trống) nên đoạn code trên bạn sử dụng ký hiệu #. Còn khi muốn tạo liên kết thực, bạn xóa dấu # rồi nhập địa chỉ URL của trang web.

  • Bước 4: Tạo kiểu cho danh sách

Khi thêm code HTML xong thì menu ngang đã hình thành nhưng chưa được bắt mắt nên bạn có thể thay đổi, bằng cách sử dụng code CSS menu ngang. Do đó, ở bước 4, bạn tiến hành tạo kiểu cho danh sách và liên kết để menu ngang trở nên sống động.

Khi các item được tạo ra thì chúng sẽ hiển thị theo chiều dọc từ trên xuống và được mặc định có một vòng tròn mờ bao quanh. Trong phạm vi bài viết này là tạo menu trong HTML theo chiều ngang nên bạn cần thay đổi bố cục mặc định, và xóa bullet ở đầu dòng ra khỏi danh sách.

Để thực hiện việc này, bạn sử dụng cú pháp câu lệnh bên dưới:

#menu ul

{

  margin-top:  42px;

}

#menu ul li

{

  list-style-type: none;

  display: inline;

  margin-left: 50px;

}

#menu ul

Trong đó:

- margin-top: 42px đóng vai trò trỏ đến danh sách item không thứ tự, đồng thời di chuyển danh sách một khoảng là 42px tính từ trên cùng. 

- #menu ul li

  + list-style-type: none thực hiện việc bỏ dấu bullet ở đầu dòng.

  + display: inline thực hiện nhiệm vụ thay đổi cách hiển thị của mỗi mục có trong danh sách, cụ thể là chuyển từ trạng thái dọc sang ngang.

  + margin-left: 50px thực hiện nhiệm vụ giãn cách các mục trong danh sách.

  • Bước 5: Tạo kiểu cho các liên kết

Đây là bước cuối cùng của quá trình tạo menu ngang trong HTML.

Trong bước 5, bạn cần lưu ý các thẻ (<a></a>) HTML document sẽ nằm ở vị trí giữa các list item tag (<li></li>). Chúng cũng được các unordered list tag (<ul></ul>) bao quanh. Còn menu division (<div id=''menu''></div>) sẽ nằm ở bên ngoài. 

Để tạo kiểu cho liên kết, bạn bắt buộc phải sử dụng cấu trúc dưới đây. 

“Menu Division > Unordered List > List item > Anchor / Link Tag”

Tiếp theo, bạn dùng cú pháp câu lệnh như sau: 

#menu ul li a:link 

{

   color: #FFF;

   text-decoration: none;

   text-transform: uppercase;

   padding-top: 40px;

   padding-bottom: 40px;

   padding-left: 20px;

   padding-right: 20px;

}           

#menu ul li a:visited

{

   color: #FFF;

   text-decoration: none;

   text-transform: uppercase;

}              

#menu ul li a:hover

{

   color: #FFF;

   background-color: #81B101;

   -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);

   -moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.93);

   box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.93);

}

Trong đó:

- #menu ul li a:link là sytle chung được áp dụng cho các liên kết có trong menu.

- #FFF là màu của liên kết. Màu này là màu trắng mang đến sự trực quan và giúp người dùng dễ đọc.

- code text-decoration: none thực hiện việc xóa phần gạch chân mặc định của các liên kết. 

- transform: uppercase được sử dụng để tạo chữ viết in hoa.  

- padding: Đóng vai trò giúp xác định khu vực để click vào liên kết. 

Ngoài ra, bạn có thể thêm background-color: red vào #menu ul li a:link để thấy rõ hơn vai trò của padding. 

Kế đến, bạn xóa phần background-color : red.

- # menu ul li a:visited có tác dụng đảm bảo giữ nguyên định dạng của các liên kết sau khi được click vào.

- # menu ul li a:hover đóng vai trò chuyển đổi màu nền thành màu xanh lục khi người dùng di chuột đến liên kết, đồng thời văn bản vẫn màu trắng và hơi bóng bên dưới.

Trong trường hợp bạn dùng mã nguồn WordPress và muốn tạo menu ngang trong HTML thì sửa code WordPress với HTML và CSS là được.

tao menu ngang trong html