Chào, chào mừng trở lại.
Đoán xem nào?
Chúng tôi sẽ làm một, và
cuối cùng của chúng tôi, thanh điều hướng với nhau, trong bài đánh giá mã này.
Điều này, tuy nhiên, hơi khác một chút, không chỉ đối với
cách chúng tôi thiết lập mọi thứ, mà bởi vì tôi muốn nói với bạn về
khả năng tiếp cận của số người tạo thanh điều hướng của họ.
Cách mới,
tôi đã sử dụng theo cách này, là tạo liên kết điều hướng của bạn như là một phần của danh sách.
Vì vậy, bạn có thể thấy, chúng ta đã có một chút khác biệt ở đây.
Tôi đã có một danh sách không có thứ tự với một, hai, ba, bốn một danh sách mục, và một
số trong những danh sách đó có danh sách không có thứ tự.
Vì vậy, trong khi điều này là rất phổ biến,
có một số vấn đề về khả năng sử dụng, khi bạn nhận ra, những danh sách này có thực sự không?
Bởi vì nếu không, đó là một thẻ ngữ nghĩa mà chúng tôi đang sử dụng, mà chúng tôi có thể muốn tránh.
Nhưng nó rất phổ biến, tôi muốn cho anh xem nó và để anh chơi với nó và
tự quyết định.
Vấn đề khác khi chúng tôi thực hiện thanh điều hướng thả xuống này,
liên quan đến khả năng truy cập của những người có thể di chuột
qua một số thứ mà bạn muốn kích hoạt.
Tôi nghĩ rằng tất cả chúng ta đã ở đó, khi chúng ta đã ở trong một trang web và
chúng tôi đang cố gắng di chuột qua một cái gì đó để nhấp vào một liên kết.
Và nó tiếp tục bật lên vì bàn tay của chúng ta quá run rẩy hoặc
chúng ta phải di chuột qua ba thứ cùng một lúc.
Vì vậy, một lần nữa, trong khi đây là một kỹ thuật mà tôi muốn chia sẻ với
bạn và giúp bạn hiểu, tôi hy vọng rằng bạn sẽ đảm bảo rằng bất kỳ ứng dụng nào bạn làm,
bạn cố gắng hết sức để đảm bảo rằng nó có thể truy cập càng tốt.
Vì vậy, một lần nữa, chúng ta hãy bắt đầu với mã HTML đơn giản, loại nhàm chán này, và
xem nếu chúng ta không thể làm cho nó trông giống như một cái gì đó thú vị hơn một chút.
Những gì chúng ta có ở đây bây giờ là một thanh
điều hướng ngang sẽ có các yếu tố thả xuống.
Vì vậy, khi tôi đi qua Trang chủ, không có gì thêm để xem, nhưng, khi tôi đi qua
Hình ảnh, bạn có thể thấy rằng tôi có ba liên kết bổ sung tôi có thể cố gắng làm, và
tương tự với Công thức nấu ăn, và Liên hệ, một lần nữa, là tất cả của chính nó.
Vậy làm thế nào tôi làm được điều này?
Làm thế nào tôi có nó để 2015, 14 và 13 không xuất hiện trừ khi tôi lơ lửng?
Và cùng với các công thức nấu ăn?
Chúng ta hãy xem qua.
Được rồi, tôi sẽ bỏ qua cái xác trong điều hướng
bởi vì tôi nghĩ anh biết làm thế nào để làm tất cả những điều này.
Thay vào đó, chúng ta hãy nói về các danh sách khác nhau.
Vì vậy, xin lỗi, danh sách các mục mình trong các liên kết.
Vì vậy, những gì tôi đã làm là tôi đã vào đây, để
bạn có thể nhìn thấy cả hai cùng một lúc.
Và nó rất mờ nhạt, và tôi ước gì tôi đã tạo ra một màu khác bây giờ.
Nhưng tôi có một biên giới giữa mỗi một trong những lựa chọn này.
Bây giờ, sẽ có vẻ hơi kỳ lạ khi
tôi có một đường biên ở đây dọc theo một bên.
Vì vậy, điều tôi cần làm là tôi đi và tôi nói rằng anh biết gì không?
Đối với mục danh sách cuối cùng, mục cuối cùng, chúng ta không đặt một đường viền vào.
Đó là những tinh chỉnh nhỏ bé mà bạn có thể đặt trong mã của bạn
để làm cho nó trông chuyên nghiệp hơn một chút.
Chúng tôi cũng không muốn biên giới trên các mục phụ, phải không?
Bởi vì chẳng có gì cả.
Vì chúng bị chặn, chúng ta không cần biên giới ở bên cạnh.
Vì vậy, tôi đã làm điều tương tự ở đây, nơi tôi nói, anh biết không?
Tôi không muốn sử dụng bất kỳ biên giới nào ở đây.
Tôi hy vọng là khá thẳng về phía trước.
Bây giờ, hãy nhìn lại lần nữa.
Tôi đã tạo kiểu đơn giản trên các liên kết điều hướng của tôi, được chứ?
Một điều tôi đã đưa vào đó là, một lần nữa,
tôi muốn cho bạn thấy một ví dụ về việc sử dụng quá trình chuyển đổi.
Quá trình chuyển đổi ở đây là những gì từ từ thay đổi màu sắc khi bạn di chuột qua,
chứ không phải là một sự thay đổi nhanh chóng.
Vì vậy, bạn có thể thấy, nó dần dần hơn một chút so với đột ngột, được chứ?
Hoạt động cũng giống như lần trước.
Bây giờ, đây là một phần thú vị.
Chúng ta sẽ nói về các menu phụ, được chứ?
Vì vậy, làm thế nào để trình duyệt biết khi nào một cái gì đó là một menu phụ?
Vâng, nó có thể nhìn vào DOM, và nó có thể nhìn xuống và đi, oh, tôi đang điều hướng.
Và bây giờ tôi đang ở trong một danh sách không có thứ tự, và ở đây tôi đang ở trong một mục danh sách.
Nếu nó tìm thấy một mục danh sách khác thấp hơn xuống, nó là loại chuỗi xuống,
nó biết, oh, oh, tôi đang ở trong một menu phụ.
Vì vậy, ngay tại đây, nó biết tôi đang ở trong nav, Tôi đang ở trong một danh sách,
và tôi chỉ tìm thấy một danh sách không có thứ tự bên trong của đó.
Vì vậy, làm thế nào chúng tôi có nó thiết lập để nó không hiển thị ở đầu là tôi đã
thiết lập vị trí tuyệt đối, và tôi đã thiết lập hiển thị để không có.
Vì vậy, nó sẽ không hiển thị theo mặc định.
Sẽ không xảy ra đâu.
Được chứ?
Vậy, làm thế nào để tôi có được nó
để nó đột nhiên xuất hiện nếu chúng ta muốn làm gì đó dọc theo đường dây đó?
Vâng, chúng tôi muốn tìm hiểu làm thế nào để thay đổi nó ở đây, khi tôi di chuột qua một mục danh sách
có một danh sách không có thứ tự bên dưới nó, thay đổi hiển thị đó từ không có để chặn.
Vì vậy, hai dòng mã ngay tại đây, điều này thực sự là thiết lập nó lên.
Vì vậy, khi tôi đi qua đây, theo mặc định,
hiển thị là không có, nhưng khi tôi di chuột, hiển thị sẽ trở thành khối.
Đó là một đoạn mã rất đơn giản, rất ngắn, khái niệm rất mạnh mẽ để hiểu.
Vì vậy, tôi đã chỉ cho bạn một vài cách khác nhau để bạn có thể tạo kiểu cho thanh điều hướng của mình.
Chúng ta có chiều ngang, chúng ta có chiều dọc, chúng ta có thả xuống.
Tôi thực sự hy vọng rằng bạn sẽ chọn một trong những bạn cảm thấy thoải mái nhất với, hoặc
thực sự, vui mừng nhất về, và tạo ra một cho
dự án cuối cùng của bạn ở đây trong lớp CSS này.
Đừng lo lắng nếu bạn gặp vấn đề.
Đăng lên bảng thảo luận.
Truy cập trực tuyến và tìm kiếm câu trả lời.
Nhưng điều tôi thực sự hy vọng là bạn có thể tạo ra một thứ mà bạn tự hào,
vừa đẹp vừa dễ tiếp cận.
Chúc may mắn.