Skip to content
  • Đăng nhập
Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS
  • Đăng nhập
  • Khuyến mại
    • Tên miền
          • Đăng ký tên miền
            Miễn phí Email hoặc Hosting 1 năm
          • Bảng giá tên miền
          • Quy trình đăng ký tên miền
          • Gia hạn tên miền
            Duy trì tên miền với mức giá hợp lý
          • Kiểm tra tên miền
          • Thủ tục chuyển nhượng tên miền VN
          • Quy trình xử lý khiếu nại liên quan đến tên miền
    • Hosting
          • NVME Hosting
            Hosting tốc độ nhanh nhất hiện nay
          • Hosting Linux cPanel
            Giảm giá lên đến 40%
          • Hosting Linux DirectAdmin
            Off 15%: Hosting + Domain
          • Hosting WordPress
            Off 20%: Chuyển dịch vụ về BKNS
          • Hosting SEO
          • Hosting Windows
          • Reseller Hosting DirectAdmin
          • Reseller Hosting Cpanel
    • Email
          • Cloud Email Hosting
            Off 20%: Hosting + Domain + Email
          • Cloud Email Server
            Miễn phí SSL, Giảm giá 20%
          • Email Relay
            White list IP
          • Các hỏi đáp về dịch vụ Email
    • Cloud
          • Cloud VPS SSD
            Giảm giá lên tới 35%
          • VPS Giá Rẻ
          • Cloud VPS SEO
            Dành riêng cho SEO với 5 IP
          • Cloud VPS BK Misa
          • E-meeting
          • Cloud VPN
    • Máy chủ
          • Cho thuê máy chủ
            Thuê máy chủ tặng máy chủ
          • Dịch vụ quản trị máy chủ trọn gói
            Yên tâm, an toàn dữ liệu
          • Thuê chỗ đặt máy chủ
            Miễn phí 400W điện
          • Máy chủ cho MMO
            Tương tác tốt nhất với Youtube, FB, Google và MMO
          • Thuê Máy Chủ Riêng
    • Phần mềm
          • DirectAdmin
          • Softaculous
          • Cloudlinux CloudLinux
          • Cpanel/WHM
          • Imunify360
          • Plesk Obsidian
          • vBulletin
          • LiteSpeed
    • Website
    • Chứng chỉ SSL
    • Đại lý
      • Chính sách đại lý
      • Bảng giá đại lý
      • Các hỏi đáp về đại lý
    • Hướng dẫn
      • Hướng dẫn thanh toán
      • Hướng dẫn dịch vụ
      • Hướng dẫn sử dụng trang id.bkns.vn
      • Cam kết chất lượng mức dịch vụ (SLA)
  • Khuyến mại
Trang chủ » 5 bước tạo menu ngang trong HTML và CSS

5 bước tạo menu ngang trong HTML và CSS

13/01/2023 14:55 | Lượt xem : 46

Menu là một trong những yếu tố quan trọng nhất đối với mọi website. Về cơ bản, đó là một tập hợp các liên kết được tùy biến cho phép khách truy cập trang đi từ trang này đến các trang khác. Một số trang web có menu điều hướng ở trên cùng, có trang thì ở bên phải hay bên trái. Trong bài viết này, BKNS sẽ hướng dẫn bạn tạo menu ngang trong HTML và CSS với 5 bước đơn giản.

Tạo menu ngang trong HTML và CSS chỉ với 5 bước

Tạo menu ngang trong HTML và CSS chỉ với 5 bước

Mục lục

  • 1 Bước 1: Tạo HTML Mark-up
  • 2 Bước 2: Viết CSS cho Menu Division
  • 3 Bước 3: Thêm item vào menu
  • 4 Bước 4: Tạo kiểu cho danh sách
  • 5 Bước 5: Tạo kiểu cho các liên kết
  • 6 Tổng kết

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

Để bắt đầu việc tạo menu ngang trong HTML, hãy tạo một HTML mark-up bằng một link đi đến style sheet ở ngoài (style.css). Nó cũng sẽ được dùng để tạo kiểu cho menu.

<html>

<head>

<title> An  Horizontal Menu  </title>

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

</head>

<body>

<div id=”menu”>

</div>

</body>

</html>

Bước 2: Viết CSS cho Menu Division

Sau khi tạo xong HTML mark-up, bây giờ ta cần viết code CSS cho Menu Divsion.

#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;

}

Trong phần xác định menu, kích thước chiều rộng được đặt là 900px và 100px chiều cao. Màu nền là màu đen, sáng hơn màu tiêu chuẩn (#000). Phần còn lại là xác định phông chữ, kích thước phông chữ và dùng CSS3 border-radius để tạo menu một đường cong nhỏ.

>> Xem thêm: Code web là gì? Tổng hợp kiến thức căn bản cho Newbie vào nghề Coder

Bước 3: Thêm item vào menu

Để tạo menu item, chúng ta cần phải sử dụng thẻ danh sách không có thứ tự (unordered tag list). Hãy thêm phần sau vào trong HTML document giữa các menu division tag.

<div id=”menu”>

<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>

Đối với mỗi tag của item, có một anchor tag () để tạo một liên kết. Tại thời điểm này, mọi thuộc tính href đều trống, do đó ta dùng kí hiệu (#). Để tạo các liên kết thực, hãy xóa kí tự # và nhập URL của trang (Ví dụ: https://vietnix.vn/tai-lieu-ky-thuat).

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

Sau khi thêm xong code HTML, dù có vẻ ổn nhưng chưa được bắt mắt cho lắm, nhưng chúng ta có thể dùng code CSS menu ngang để thay đổi. Trong bước này, chúng ta sẽ tạo kiểu cho danh sách và các liên kết, giúp menu ngang CSS thêm sống động hơn.

Sau khi tạo một danh sách không có thứ tự, mỗi item đều được hiển thị theo thứ tự từ trên xuống, cùng một vòng tròn mờ xung quanh theo mặc định. Chúng ta đang muốn tạo menu ngang trong HTML chứ không phải menu dọc, do đó ta cần thay đổi bố cục mặc định này. Đồng thời cũng cần xóa các bullet đầu dòng khỏi danh sách.

Dùng lệnh sau để tạo menu ngang bằng CSS:

#menu ul

{

margin-top:  42px;

}

#menu ul li

{

list-style-type: none;

display: inline;

margin-left: 50px;

}

#menu ul

Phần margin-top: 42px sẽ trỏ đến danh sách không có thứ tự và di chuyển danh sách này 42px, tính từ trên cùng.

#menu ul li

list-style-type: none sẽ bỏ dấu bullet đầu dòng.

display: inline để thay đổi cách trình bày của từng mục trong danh sách từ dọc thành ngang.

margin-left: 50px sẽ giãn cách các mục trong danh sách ra một chút.

Xem thêm: TOP 5 cách thêm nút gọi điện cực đơn giản cho WordPress

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

Bước cuối cùng trong việc tao menu ngang trong HTML là tạo kiểu cho các liên kết.

Lưu ý rằng trong HTML document, các thẻ (<a></a>) nằm giữa các list item tag (<li></li>) và lần lượt được bao quanh bởi các unordered list tag (<ul></ul>). Ở bên ngoài là menu division (<div id=”menu”></div>).

Cấu trúc này là bắt buộc để có thể tạo kiểu cho các liên kết. Cấu trúc nó như sau:

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

Sau đó, hãy sử dụng code 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);

}

#menu ul li a:link

Đoạn này sẽ áp dụng một style chung cho các liên kết trong menu.

  • Đầu tiên, màu của liên kết được chuyển thành màu trắng (#FFF) để dễ đọc hơn.
  • code text-decoration: none: Xóa phần gạch chân ở dưới các link (theo mặc định) bằng .
  • transform: uppercase: Để tạo chữ viết hoa, chúng ta dùng
  • padding: Xác định khu vực có thể click vào link.

Để thấy rõ hơn tác dụng của padding, bạn có thể thử thêm dòng background-color: red vào trong phần #menu ul li a:link.

Sau đó, xóa phần background-color : red để hoàn thiện.

# menu ul li a:visited

Phần này giúp đảm bảo các link vẫn giữ nguyên định dạng sau khi đã được click vào.

# menu ul li a:hover

Nếu bạn di chuột đến một link nào đó, bạn sẽ thấy màu nền chuyển thành màu xanh lục, văn bản vẫn giữ màu trắng và có một chút bóng ở phía dưới. Đây là những gì code trên đã làm.

Nếu bạn đang sử dụng mã nguồn WordPress thì bạn cũng có thể sửa code WordPress với HTML và CSS trong giao diện của nó.

Tổng kết

Như vậy là ta đã hoàn tất việc tạo menu ngang trong HTML, nhìn đơn giản nhưng vẫn đủ chuyên nghiệp. Bạn hoàn toàn có thể tạo thêm nhiều menu đẹp khác nữa bằng các code CSS và HTML. Chúc các bạn thành công!

Cảm ơn bạn đã đón đọc bài viết. Có thể bạn cũng quan tâm đến:

>> DevOps là gì? Cách thức hoạt động và tính năng của DevOps

>> Lazy Loading là gì? Tại sao nên triển khai Lazy Loading?

>> HTTP Request và HTTP Response trong lập trình Web

Theo dõi BKNS thường gTLDs là gì? Tìm hiểu chi tiết về gTLDsxuyên hơn tại các nền tảng mạng xã hội:

>> Fanpage: https://www.facebook.com/bkns.vn

>> Youtube: https://www.youtube.com/c/BknsVn1

>> Pinterest: https://www.pinterest.com/bknsvn/

>> LinkedIn: https://www.linkedin.com/company/bkns-vn/

Nguyễn Anh Hải

Bài viết liên quan

Top 8 trình duyệt web phổ biến hiện nay cho điện thoại và PC

13/01/2023

48

Để có thể sử dụng Internet hiệu quả thì không thể thiếu là các trình duyệt web tiện ích và hữu dụng. Trong bài viết...
ps trong linux ppid

8 công dụng và cách sử dụng lệnh ps trong Linux

12/01/2023

103

Lệnh ps trong Linux được sử dụng để liệt kê các tiến trình đang chạy. Lệnh ps có thể được sử dụng theo nhiều cách...
Google News là gì?

Google News là gì? 7 bước đưa website của bạn lên Google News

12/01/2023

89

Bên cạnh những tiện ích quen thuộc như Google Sites, Google Trends, Google Meets… thì Google News là một trong những công cụ được đánh...

3 bước sửa lỗi màn hình đen khi Remote Windows Server 2023

12/01/2023

92

Lỗi màn hình đen khi Remote Windows Server khá phổ biến và thường xuyên xảy ra. Do đó, BKNS sẽ hướng dẫn bạn sửa lỗi...
ARP spoofing là gì?

ARP spoofing là gì? Cách để phát hiện tấn công ARP spoofing

12/01/2023

88

—–  -ARP là một giao thức cho phép truyền thông mạng đến một thiết bị cụ thể trên mạng. ARP chuyển địa chỉ IP sang...
Danh mục
  • Các lỗi website
  • Cài đặt SSL
  • Chứng chỉ SSL
  • Cloud Computing
  • Cloud VPS
  • Control Panel
  • cPanel
  • Dedicate Server
  • Dịch vụ CDN
  • DirectAdmin
  • DirectAdmin
  • DNS
  • Email
  • Giới thiệu chung
  • Hosting (Linux, Windows)
  • Hosting Linux
  • Hosting windows
  • Hướng dẫn
  • Hướng dẫn đăng ký dịch vụ
  • Hướng dẫn quản lý dịch vụ
  • Hướng dẫn sử dụng hệ thống hỗ trợ
  • Hướng dẫn thanh toán
  • IP
  • Kiến thức chung
  • Phần mềm
  • Plesk 12/Onyx
  • Server
  • Tên miền
  • Thiết kế website
  • Thông báo
  • Tin tức
  • Tối ưu web
  • Tuyển dụng
  • VPS
  • VPS Windows
  • Website
  • WordPress
Xem tất cả bài viết

Về chúng tôi

  • Giới thiệu
  • Thông báo
  • Hướng dẫn
  • Tuyển dụng
  • Liên hệ

Các dịch vụ

  • Đăng ký tên miền
  • Hosting cPanel
  • Dịch vụ Email
  • Thuê VPS Giá Rẻ – Thuê Máy Chủ VPS
  • Thuê chỗ đặt máy chủ
  • Phần mềm
  • SSL & Bảo mật
  • Thiết kế website

Thông tin cần biết

  • Quy trình đăng ký tên miền
  • Chính sách riêng tư
  • Tư vấn chọn Hosting
  • Tư vấn chọn tên miền đẹp
  • Tư vấn Thiết kế website
  • Ý nghĩa phần đuôi tên miền

Câu hỏi thường gặp

  • Câu hỏi thường gặp
  • Các hỏi đáp về dịch vụ tên miền
  • Các hỏi đáp về dịch vụ hosting
  • Các hỏi đáp về dịch vụ Email
  • Các hỏi đáp về dịch vụ máy chủ
  • Hỏi đáp dịch vụ SSL
  • Các hỏi đáp về đại lý

Hướng dẫn sử dụng

  • Hỏi đáp dịch vụ SSL
  • Các hỏi đáp về đại lý
  • Các hỏi đáp về dịch vụ tên miền
  • Các hỏi đáp về dịch vụ máy chủ
  • Các hỏi đáp về dịch vụ hosting
  • Các hỏi đáp về dịch vụ Email
  • Hướng dẫn thanh toán
Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS

Số ĐKKD: 0104850587, cấp ngày 10/8/2010, tại sở KHĐT Hà Nội

Địa chỉ trụ sở: BT2-VT18, Khu nhà ở Xa La, Phường Phúc La, Quận Hà Đông, Thành phố Hà Nội, Việt Nam

Chịu trách nhiệm nội dung: Giám đốc Thịnh Văn Hạnh

Copyright © Since 2010 BKNS, All rights reserved

Sử dụng dịch vụ tại BKNS.VN có nghĩa là bạn đồng ý với Quy định sử dụng của chúng tôi.

Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS

Công ty cổ phần giải pháp mạng Bạch Kim

LocationTầng 5, Tòa nhà 169, Nguyễn Ngọc Vũ, Phường Trung Hòa, Quận Cầu Giấy, TP Hà Nội.

LocationLầu 2 Tòa nhà 1B1 Thành Thái, Cư Xá Đồng Tiến, Phường 14, Quận 10, TP. Hồ Chí Minh.

Phone Tổng đài 24/7: 1900 63 68 09

Phone Tư vấn dịch vụ: 1800 646 884 (Miễn phí cước)

Email Email liên hệ: info@bkns.vn

Email Email phản hồi dịch vụ: gopy@bkns.vn

Liên hệ với chúng tôi:

Zalo Offcial Account của hệ thống :

Zalo
Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS Nhà cung Cấp Hosting – Tên Miền – Cloud VPS | BKNS
Copyright © 2022 BKNS, All rights reserved
  • Tên miền
    • Đăng ký tên miền
      Miễn phí Email hoặc Hosting 1 năm
    • Bảng giá tên miền
    • Gia hạn tên miền
      Duy trì tên miền với mức giá hợp lý
    • Quy trình đăng ký tên miền
    • Quy trình xử lý khiếu nại liên quan đến tên miền
    • Thủ tục chuyển nhượng tên miền VN
    • Kiểm tra tên miền
  • Hosting
    • NVME Hosting
      Hosting tốc độ nhanh nhất hiện nay
    • Hosting Linux DirectAdmin
      Off 15%: Hosting + Domain
    • Hosting Linux cPanel
      Giảm giá lên đến 40%
    • Hosting WordPress
      Off 20%: Chuyển dịch vụ về BKNS
    • Hosting SEO
    • Hosting Windows
    • Reseller Hosting Cpanel
    • Reseller Hosting DirectAdmin
  • Email
    • Cloud Email Hosting
      Off 20%: Hosting + Domain + Email
    • Email Relay
      White list IP
    • Cloud Email Server
      Miễn phí SSL, Giảm giá 20%
    • Các hỏi đáp về dịch vụ Email
  • Cloud
    • Cloud VPS SEO
      Dành riêng cho SEO với 5 IP
    • Cloud VPS SSD
      Giảm giá lên tới 35%
    • VPS Giá Rẻ
    • Cloud VPS BK Misa
    • E-meeting
    • Cloud VPN
  • Máy chủ
    • Cho thuê máy chủ
      Thuê máy chủ tặng máy chủ
    • Thuê chỗ đặt máy chủ
      Miễn phí 400W điện
    • Dịch vụ quản trị máy chủ trọn gói
      Yên tâm, an toàn dữ liệu
    • Máy chủ cho MMO
      Tương tác tốt nhất với Youtube, FB, Google và MMO
    • Thuê Máy Chủ Riêng
  • Phần mềm
    • DirectAdmin
    • Cloudlinux CloudLinux
    • Plesk Obsidian
    • vBulletin
    • LiteSpeed
    • Softaculous
    • Imunify360
    • Cpanel/WHM
  • Website
  • Chứng chỉ SSL
  • Đại lý
    • Chính sách đại lý
    • Bảng giá đại lý
    • Các hỏi đáp về đại lý
  • Hướng dẫn
    • Hướng dẫn thanh toán
    • Hướng dẫn dịch vụ
    • Hướng dẫn sử dụng trang id.bkns.vn
    • Cam kết chất lượng mức dịch vụ (SLA)
  • WooCommerce not Found
  • Newsletter
  • Đăng nhập
  • Tên miền
    • Đăng ký tên miền
      Miễn phí Email hoặc Hosting 1 năm
    • Bảng giá tên miền
    • Gia hạn tên miền
      Duy trì tên miền với mức giá hợp lý
    • Quy trình đăng ký tên miền
    • Quy trình xử lý khiếu nại liên quan đến tên miền
    • Thủ tục chuyển nhượng tên miền VN
    • Kiểm tra tên miền
  • Hosting
    • NVME Hosting
      Hosting tốc độ nhanh nhất hiện nay
    • Hosting Linux DirectAdmin
      Off 15%: Hosting + Domain
    • Hosting Linux cPanel
      Giảm giá lên đến 40%
    • Hosting WordPress
      Off 20%: Chuyển dịch vụ về BKNS
    • Hosting SEO
    • Hosting Windows
    • Reseller Hosting Cpanel
    • Reseller Hosting DirectAdmin
  • Email
    • Cloud Email Hosting
      Off 20%: Hosting + Domain + Email
    • Email Relay
      White list IP
    • Cloud Email Server
      Miễn phí SSL, Giảm giá 20%
    • Các hỏi đáp về dịch vụ Email
  • Cloud
    • Cloud VPS SEO
      Dành riêng cho SEO với 5 IP
    • Cloud VPS SSD
      Giảm giá lên tới 35%
    • VPS Giá Rẻ
    • Cloud VPS BK Misa
    • E-meeting
    • Cloud VPN
  • Máy chủ
    • Cho thuê máy chủ
      Thuê máy chủ tặng máy chủ
    • Thuê chỗ đặt máy chủ
      Miễn phí 400W điện
    • Dịch vụ quản trị máy chủ trọn gói
      Yên tâm, an toàn dữ liệu
    • Máy chủ cho MMO
      Tương tác tốt nhất với Youtube, FB, Google và MMO
    • Thuê Máy Chủ Riêng
  • Phần mềm
    • DirectAdmin
    • Cloudlinux CloudLinux
    • Plesk Obsidian
    • vBulletin
    • LiteSpeed
    • Softaculous
    • Imunify360
    • Cpanel/WHM
  • Website
  • Chứng chỉ SSL
  • Đại lý
    • Chính sách đại lý
    • Bảng giá đại lý
    • Các hỏi đáp về đại lý
  • Hướng dẫn
    • Hướng dẫn thanh toán
    • Hướng dẫn dịch vụ
    • Hướng dẫn sử dụng trang id.bkns.vn
    • Cam kết chất lượng mức dịch vụ (SLA)
  • Zalo Chat Zalo
  • Messenger Chat Messenger