Cách tạo menu điều hướng dọc bằng danh sách CSS

Cho dù menu điều hướng của website của các bạn là một hàng ngang ở trên cùng hay một hàng dọc ở bên dưới, thì đó cũng chỉ là một danh sách. Khi kiến trúc  điều hướng website , menu điều hướng là một nhóm các link. Khi lập trình điều hướng bằng XHTML + CSS, bạn có thể tạo một menu nhỏ để tải xuống (XHTML) & dễ tùy chỉnh (CSS).

Hardik pethani / Getty Hình ảnh 

Khởi đầu

Để kiến trúc một danh sách để điều hướng, bạn cần sử dụng một danh sách. Nó có thể là một danh sách không có thứ tự tiêu chí đã được xác nhận là điều hướng. Chẳng hạn:

  • Trang Chủ
  • Các sản phẩm
  • Dịch vụ
  • Liên hệ http://phptravels.vn/

Khi nhìn vào HTML, link Trang chính có ID là

bạn đang ở giai đoạn này

Điều này cho phép bạn tạo một menu xác nhận địa điểm hiện thời cho đọc giả của các bạn. Ngay cả khi bạn không định có loại đề xuất trực quan đó trên website của mình ngay giờ đây, bạn có thể bao gồm thông tin đó. Nếu bạn quyết định thêm đề xuất sau, bạn sẽ có ít mã hóa hơn để chuẩn bị website của mình.

Không có bất kỳ kiểu CSS nào , menu XHTML này trông giống như một danh sách chuẩn không có thứ tự. Có các dấu đầu dòng & các mục trong danh sách hơi thụt vào. Khi sử dụng các link giữ chỗ , chủ yếu các trình duyệt không hiển thị các link dưới dạng có thể nhấp được (gạch chân & có màu xanh lam). Khi bạn dán HTML vào một website, điều hướng của các bạn trông giống như sau:

  • Trang Chủ
  • Các sản phẩm
  • Dịch vụ
  • Liên hệ http://phptravels.vn/

Đây không giống như một menu. Ngoài ra, với một vài kiểu CSS được thêm vào danh sách, bạn có thể tạo một menu khiến bạn tự hào.

Xem Thêm  Bố cục CSS - Thuộc tính vị trí - css vị trí tuyệt đối đúng

Nếu bạn mong muốn có thêm chẳng hạn về menu dọc, hãy thực hiện tìm kiếm trên website cho những điều sau:

  • Một menu dọc được tạo kiểu
  • Mẫu menu dọc căn bản
  • Menu dọc được tạo kiểu với You Are Here
  • Một mẫu menu dọc căn bản với You Are Here

Menu điều hướng dọc

Menu điều hướng dọc không quá khó viết vì nó hiển thị giống như một danh sách bình bình: lên & xuống. Các mục danh sách hiển thị theo chiều dọc của trang.

Khi tạo kiểu menu, hãy khởi đầu ở bên ngoài & làm việc trong. Trước tiên, hãy tạo kiểu cho điều hướng:

ul # điều hướng

Sau đó, chuyển đến các phần tử & link. Trước tiên, xác nhận chiều rộng của menu. Điều này bảo đảm rằng nếu các mục menu dài, các mục sẽ không đẩy phần sót lại của bố cục lên trên hoặc gây ra cuộn ngang.

ul # navigation {width: 12em; }

Sau khoảng thời gian bạn đặt chiều rộng, hãy làm việc trên các mục danh sách. Điều này cho phép bạn seting những thứ như màu nền, đường viền, chỉnh sửa văn bản & lề.

ul # navigation li { 
list-style: none;
màu nền: # 039;
border-top: solid 1px # 039;
text-align: left;
lề: 0;
}

Sau khoảng thời gian bạn seting những điều căn bản cho các mục trong danh sách, hãy làm việc trên giao diện của menu trong khu vực link. Trước tiên tạo kiểu điều hướng:

UL # điều hướng LI ?

Sau đó, tạo kiểu như sau:

?: link 
?: đã truy cập
?: di chuột
?: hoạt động

So với các link, hãy đặt các link thành một phần tử khối (thay vì nội dòng mặc định). Điều này buộc các link phải chiếm toàn thể không gian của LI & hoạt động giống như một đoạn văn, khiến cho các link đơn giản được tạo kiểu như các nút menu. Sau đó, xóa những thứ sau:

Xem Thêm  SQL Server chuyển đổi số nguyên thành chuỗi + 12 Ví dụ - chuyển đổi int thành chuỗi sql server

gạch dưới, bày trí văn bản: không có; như

Điều này khiến cho các nút trông giống các nút hơn. Kiến trúc của các bạn có thể khác.

ul # navigation li α { 
display: block;
văn bản-trang trí: không có;
đệm lót: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}

Với màn hình hiển thị: khối; đặt trên các link, toàn thể hộp của mục menu có thể nhấp được, không những các chữ cái. Điều này cũng tốt cho khả năng sử dụng. Đặt màu link (link, đã truy cập, di chuột & đang hoạt động) nếu bạn mong muốn các link khác với màu xanh lam, đỏ & tím mặc định.

α: backlinks, α: visit {color: #fff; } 
α: hover, α: active {color: # 000; }

Bạn cũng có thể tạo sự cảnh báo cho hiện trạng di chuột bằng cách biến đổi màu nền.

α: hover {background-color: #fff; }

Menu điều hướng ngang

Tạo menu điều hướng ngang hơi khó hơn menu điều hướng dọc vì bạn phải bù đắp thực tiễn là danh sách HTML thích hiển thị theo chiều dọc. Giống như với menu ngang, hãy tạo danh sách menu điều hướng:

  • Trang Chủ
  • Các sản phẩm
  • Dịch vụ
  • Liên hệ http://phptravels.vn/

Để tạo menu ngang, hãy làm việc cũng giống như bạn đã làm với menu dọc. Khởi đầu với bên ngoài & làm việc trong. Để khởi đầu điều hướng ở góc bên trái, hãy đặt nó bằng 0 lề trái & khoảng đệm, & thả nó sang bên trái.

Tập thói quen seting chiều rộng để menu của các bạn không chiếm nhiều hơn hoặc ít không gian hơn bạn dự kiến. So với menu ngang, đây thường là toàn thể chiều rộng của kiến trúc. Bạn cũng có thể thêm  màu nền  vào danh sách để dễ đọc hơn.

ul # navigation { 
float: left;
lề: 0;
đệm: 0;
chiều rộng: 100%;
màu nền: # 039;
}

Âm thầm cho menu điều hướng ngang nằm trong các mục danh sách. Các mục trong danh sách thường là các phần tử khối, có nghĩa là các mục này có một dòng mới được đặt trước & sau mỗi một. Bằng cách chuyển màn hình từ khối sang nội dòng, bạn buộc các phần tử danh sách xếp hàng ngang cạnh nhau.

Xem Thêm  Bảng đầy đủ các ký tự ASCII, mã, ký hiệu và dấu hiệu, Mã tiêu chuẩn Mỹ để trao đổi thông tin, Bảng ASCII hoàn chỉnh, các ký tự, chữ cái, nguyên âm có dấu, phụ âm, sig - danh sách các ký tự ascii

ul # navigation li {display: inline; }

Giải quyết các link giống hệt như menu điều hướng dọc, với màu sắc & bày trí văn bản giống nhau. Thêm đường viền trên cùng để phân định các nút khi người dùng di chuột qua một nút. Sau đó, loại bỏ display: block;  vì điều đó đặt các dòng mới trở lại & hủy hoại menu ngang.

Bạn đang ở giai đoạn này Thông tin địa điểm

Một góc cạnh khác của HTML là mã định danh này:

bạn đang ở giai đoạn này

Nếu bạn mong muốn sửa đổi menu của mình để cho biết địa điểm hiện thời của người dùng, hãy sử dụng ID này để xác nhận màu nền khác hoặc kiểu khác. Di chuyển ID tính chất đó đến mục menu đúng đắn trên các trang khác để trang hiện thời luôn được đánh dấu.

Nếu bạn đặt các kiểu đó lại với nhau trên trang của mình, bạn có thể tạo thanh menu ngang hoặc dọc phù phù hợp với website của các bạn & tải xuống mau lẹ & đơn giản update. Sử dụng XHTML + CSS biến danh sách của các bạn thành một dụng cụ khỏe khoắn để kiến trúc.

Nếu bạn mong muốn có thêm chẳng hạn về menu ngang, hãy tìm kiếm trên website những điều sau:

  • Một menu ngang được tạo kiểu
  • Mẫu menu ngang căn bản
  • Menu ngang được tạo kiểu với You Are Here
  • Mẫu menu ngang căn bản với You Are Here

Viết một bình luận