Hướng dẫn từng bước
Cho dù menu điều hướng của bạn là một hàng ngang trên đầu hoặc một hàng dọc bên cạnh, nó vẫn chỉ là một danh sách. Khi thiết kế điều hướng web, thường dễ quên rằng menu điều hướng chỉ là một nhóm liên kết được tôn vinh. Nhưng nếu bạn lập trình điều hướng của mình bằng XHTML + CSS, bạn có thể tạo một menu nhỏ để tải xuống (XHTML) và dễ dàng tùy chỉnh (CSS).
Bắt đầu
Để bắt đầu thiết kế danh sách điều hướng, bạn cần sử dụng danh sách.
Nó có thể là một danh sách không theo thứ tự tiêu chuẩn đã được xác định là điều hướng:
Nếu bạn nhìn kỹ vào HTML, bạn sẽ nhận thấy rằng liên kết “Trang chủ” cũng có ID của bạn ở đây. Điều này sẽ cho phép bạn tạo một menu xác định vị trí hiện tại cho người đọc của bạn. Ngay cả khi bạn không có kế hoạch có loại gợi ý trực quan trên trang web của mình ngay bây giờ, bạn có thể bao gồm thông tin đó. Nếu bạn quyết định thêm gợi ý sau, bạn sẽ có ít mã hóa hơn để chuẩn bị trang web của mình.
Không có bất kỳ kiểu dáng CSS nào, trình đơn XHTML này trông giống như một danh sách không theo thứ tự tiêu chuẩn. Có đạn và các mục danh sách được thụt vào một chút. Vì tôi đang sử dụng liên kết trình giữ chỗ , hầu hết các trình duyệt sẽ không hiển thị các liên kết dưới dạng có thể nhấp (được gạch dưới và có màu xanh lam). Nếu bạn dán HTML ở trên vào trang Web, điều hướng của bạn sẽ trông như sau:
- Nhà
- Các sản phẩm
- Dịch vụ
- Liên hệ chúng tôi
Điều này khá nhàm chán và trông không giống một thực đơn. Nhưng chỉ 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 giúp bạn tự hào.
Menu điều hướng dọc
Menu điều hướng dọc rất dễ viết vì nó hiển thị giống như danh sách bình thường: lên và xuống.
Các mục danh sách hiển thị theo chiều dọc xuống dưới trang.
Khi tôi tạo kiểu menu, tôi thích bắt đầu ở bên ngoài và làm việc. Bằng cách này, tôi có nghĩa là lần đầu tiên tôi định kiểu chuyển hướng ul # rồi di chuyển đến các phần tử li và sau đó là các liên kết, v.v. đầu tiên bạn xác định chiều rộng của menu. Điều này sẽ đảm bảo rằng ngay cả khi các mục menu dài, chúng sẽ không đẩy phần còn lại của bố cục lên hoặc gây ra cuộn ngang.
ul # navigation {width: 12em; }
Một khi tôi đã có bộ chiều rộng, tôi có thể chơi với các mục danh sách. Điều này cho phép tôi thiết lập những thứ như (để loại bỏ đạn), màu nền, đường viền, căn chỉnh văn bản và lề.
ul # navigation li {
kiểu danh sách: none;
màu nền: # 039;
border-top: solid 1px # 039;
text-align: left;
lề: 0;
}
Một khi bạn đã thiết lập những điều cơ bản cho các mục danh sách, bạn có thể bắt đầu chơi với cách trình đơn trông trong khu vực liên kết. Đầu tiên phong cách UL # chuyển hướng LI A và sau đó là A: liên kết, A: viếng thăm, A: di chuột, và A: hoạt động (nếu bạn muốn họ). Đối với các liên kết, tôi muốn tạo liên kết thành phần tử khối (thay vì nội tuyến mặc định). Điều này buộc chúng chiếm toàn bộ không gian của LI — và chúng hoạt động giống như một đoạn văn, khiến chúng dễ dàng tạo kiểu như các nút menu. Điều khác tôi luôn làm là loại bỏ gạch chân (văn bản trang trí: không;), vì điều này làm cho các nút trông giống nút hơn với tôi.
Nhưng tất nhiên, thiết kế của bạn có thể khác.
ul # navigation li a {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Lưu ý rằng với display: block; đặt trên các liên kết, toàn bộ hộp của mục menu có thể nhấp được, không chỉ các chữ cái. Điều này cũng tốt cho khả năng sử dụng. Đảm bảo đặt màu liên kết (liên kết, đã truy cập, di chuột và đang hoạt động) nếu bạn muốn chúng khác với màu xanh, đỏ và tím mặc định.
a: link, a: visited {color: #fff; }
a: hover, a: active {color: # 000; }
Tôi cũng muốn cho trạng thái di chuột chú ý hơn một chút bằng cách thay đổi màu nền.
a: hover {background-color: #fff; }
Nếu bạn muốn có thêm ví dụ về menu dọc, hãy tham khảo danh sách bên dưới.
- Menu dọc theo kiểu
- Mẫu menu dọc cơ bản
- Một menu dọc theo kiểu với bạn đang ở đây
- Một mẫu menu dọc cơ bản với bạn đang ở đây
Menu điều hướng ngang
Việc tạo các menu điều hướng ngang hơi khó khăn hơn các menu điều hướng dọc vì bạn phải bù đắp thực tế là các danh sách HTML thích hiển thị theo chiều dọc. Như với menu ngang, trước tiên hãy tạo danh sách menu điều hướng của bạn:
Để tạo menu ngang, hãy làm việc giống như bạn đã làm với trình đơn dọc. Bắt đầu với bên ngoài và làm việc. Vì tôi muốn điều hướng của tôi bắt đầu ở góc trái, tôi đặt nó bằng 0 lề trái và đệm, và tôi thả nó sang bên trái. Bạn cũng nên có thói quen thiết lập chiều rộng để menu của bạn không chiếm nhiều không gian hơn bạn dự định. Đối với các menu ngang, đây thường là chiều rộng đầy đủ của thiết kế. Tôi cũng đã thêm màu nền vào toàn bộ danh sách để dễ đọc hơn.
ul # navigation {
float: trái;
lề: 0;
padding: 0;
chiều rộng: 100%;
màu nền: # 039;
}
Nhưng bí mật cho menu điều hướng nằm ngang nằm trong các mục danh sách. Các mục danh sách thường là các phần tử khối, có nghĩa là chúng sẽ có một dòng mới được đặt trước và sau mỗi phần tử. Bằng cách chuyển đổi hiển thị từ khối thành nội tuyến, bạn buộc các phần tử danh sách xếp hàng cạnh nhau theo chiều ngang.
ul # navigation li {display: inline; }
Tôi xử lý các liên kết chính xác như tôi đã xử lý chúng trong menu điều hướng dọc, với cùng màu sắc và trang trí văn bản. Tôi đã thêm một đường viền trên để phân định các nút khi chúng được di chuột qua. Điều duy nhất tôi xóa là màn hình: khối; vì điều đó sẽ đặt các dòng mới trở lại và phá hủy menu ngang.
ul # navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: link, a: visited {color: #fff; }
ul # navigation li a: hover {
màu nền: #fff;
màu: # 000;
}
Bạn đang ở đây
Một khía cạnh khác của HTML là mã định danh youarehere. Nếu bạn muốn sửa đổi trình đơn của mình để cho biết vị trí hiện tại của người dùng, chỉ cần sử dụng ID này để xác định màu nền khác hoặc kiểu khác. Di chuyển thuộc tính ID đó vào đúng mục menu trên các trang khác để trang hiện tại luôn được tô sáng.
ul # navigation li # youherehere {background-color: # 09f; }
Nếu bạn đặt các kiểu này 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 hoạt động với trang web của mình nhưng tải xuống nhanh chóng và rất dễ cập nhật trong tương lai. Sử dụng XHTML + CSS biến danh sách của bạn thành một công cụ rất mạnh mẽ cho thiết kế.
Nếu bạn muốn có thêm ví dụ về các menu ngang, hãy tham khảo ý kiến sau đây.
- Menu ngang được tạo kiểu
- Mẫu menu ngang cơ bản
- Một menu ngang theo kiểu với bạn đang ở đây
- Một mẫu menu ngang cơ bản với bạn đang ở đây