Thực đơn năng động. Menu người dùng động. Thay đổi lớp menu bằng jQuery

Nhiều yêu cầu từ những độc giả kiên trì của tôi và những người dùng chỉ tò mò đã có tác dụng. Cuối cùng tôi đã tạo ra một bài học trong đó chúng ta sẽ học cách tạo menu VKontakte động bằng tác dụng của các nút nhấn! Bằng cách tương tự với các trang Internet thông thường, khi một liên kết đã truy cập được đánh dấu một cách đặc biệt(nút nhấn, gạch chân, v.v.) - chúng tôi sẽ tạo ra thiết kế tương tự trên VKontakte, sử dụng các trang và thiết kế đồ họa đã tạo. Để bắt đầu, chúng tôi sẽ tạo các mẫu đồ họa trong Photoshop - chúng tôi sẽ tạo tiêu đề menu và hai loại nút. Sau đó, chúng tôi sẽ tạo một số trang VKontakte, theo các mục trong menu của chúng tôi. Và cuối cùng chúng ta sẽ làm lừa, trên thực tế, điều này sẽ tạo cho chúng ta ảo tưởng là đang đi theo liên kết. Bài học khá phức tạp và phù hợp với những ai cảm thấy tin tưởng vào chức năng của Vkontakte. Tôi sẽ thực hiện tất cả các thao tác bằng cách sử dụng một ví dụ nhóm VKontakte của bạn, nơi hiệu ứng này được hiện thực hóa trực tiếp. Vì vậy, chúng ta hãy bắt tay vào làm việc!

Bước 1. Tạo tiêu đề menu trong Photoshop
Tạo một tài liệu trong Photoshop với chiều rộng 600 pixel. Chiều cao có thể khác nhau, theo ý của bạn. Bạn có thể đặt bất kỳ bức ảnh, ảnh ghép, biểu ngữ thông tin cụ thể nào và các hình ảnh đồ họa khác vào tiêu đề. Trong trường hợp này tôi đã sử dụng cái này biểu ngữ quảng cáo kích thước 600x172 pixel.

Bước 2. Tạo thanh điều hướng trong Photoshop
Bây giờ chúng ta cần tạo một thanh điều hướng. TRONG trong ví dụ này Tôi chỉ sử dụng văn bản làm nút. Nhưng theo ý mình, bạn có thể tạo các nút màu và viết chữ lên chúng. Chúng tôi thực hiện việc này - tạo một hình chữ nhật có kích thước 600x56 pixel trong Photoshop và trong trường hợp này tô nó với màu trắng. Sau đó, chúng tôi viết các mục menu trên dòng - khoảng 5-6 mục, không nhiều hơn. Số lượng lớn các mặt hàng sẽ trông bị ép.

Bước 3. Tạo thanh điều hướng nhấn trong Photoshop
Bây giờ chúng ta cần tạo các liên kết hoạt động, như thể chúng được nhấp vào. Tôi đã sử dụng gạch chân thông thường, nhưng bạn có thể sử dụng văn bản hoặc màu nền khác để đánh dấu liên kết đã truy cập.

Bước 4. Cắt ảnh làm sẵn
TRÊN ở giai đoạn này chúng ta cần cắt các hình ảnh từ Bước 2 và Bước 3. Chúng ta nên có hai bộ năm nút, mỗi bộ - một nút không có gạch chân, nút còn lại có gạch chân. Các nút bấm cho từng mục riêng lẻ (có gạch chân và không gạch chân) phải được cùng cỡ. Hình ảnh dưới đây cho thấy tất cả của chúng tôi thiết kế đồ họa- mười nút và một tiêu đề menu.

Bước 5. Tạo trang Menu VKontakte
Bây giờ chúng ta hãy đến VKontakte. Nhiệm vụ của chúng ta là tạo ra trang riêngđược gọi là "Thực đơn". Để làm điều này, chúng tôi sẽ sử dụng đoạn mã sau
http://vk.com/pages?oid=-XXX&p=Page_Name
trong đó thay vì XXX, chúng tôi sẽ thay thế id của nhóm mình và thay vì văn bản “Tên trang”, chúng tôi sẽ viết Menu. Bây giờ chúng ta cần tìm ra id nhóm. Làm thế nào để làm nó? Chúng ta hãy đi đến trang chủ nhóm và xem các bài đăng của chúng tôi trên tường - ngay dưới khối “Thêm bài đăng”, nó sẽ ghi “Tất cả các bài đăng” – nhấp vào liên kết này.

Bước 6. Xác định id nhóm và chỉnh sửa mã
Chúng ta vào trang và thấy một URL như thế này https://vk.com/wall-78320145?own=1, trong đó các số 78320145 trong ví dụ này là id nhóm. Chúng tôi thay thế dữ liệu của mình thành nguồn và chúng tôi nhận được một bản ghi như thế này:
http://vk.com/pages?oid=-78320145&p=Menu(với số của bạn!). Dán dòng này vào thanh địa chỉ trình duyệt và nhấn Enter. Đây là cách chúng tôi tạo ra trang mới VKontakte và ban đầu nó trông như thế này.

Bước 7. Tạo các trang điều hướng VKontakte còn lại
Theo cách tương tự, chúng tôi tạo thêm bốn trang điều hướng: Giá cả, Cách đặt hàng, Thông số kỹ thuật và Câu hỏi. Nghĩa là, chúng tôi sao chép mã tương ứng bốn lần nữa vào thanh địa chỉ của trình duyệt (với số id của bạn trong ví dụ bên dưới, số của tôi):

http://vk.com/pages?oid=-78320145&p=Prices

http://vk.com/pages?oid=-78320145&p=How_để đặt hàng

http://vk.com/pages?oid=-78320145&p=Thông số kỹ thuật

http://vk.com/pages?oid=-78320145&p=Questions
Xin lưu ý rằng trong tiêu đề trang gồm hai từ (Cách đặt hàng), khoảng cách giữa các từ được thay thế bằng thứ tự How_to gạch dưới. Bây giờ chúng tôi có năm trang làm sẵn cho mỗi mục menu. Chúng tôi không tạo trang Portfolio vì nó nằm trên trang Menu

Bước 8. Tải ảnh lên trang đầu tiên của menu
Trên cái đã tạo, chưa Trang trống(xem Bước 6) Menu nhấp vào liên kết Chỉnh sửa hoặc liên kết Điền nội dung. Sau này chúng ta thấy bảng chỉnh sửa. Ở đây chúng ta cần nhấn vào biểu tượng camera có chức năng Tải ảnh lên. Quan trọng! Hãy đảm bảo rằng bạn đang ở chế độ đánh dấu wiki. Việc chuyển đổi chế độ được điều chỉnh bằng biểu tượng ở cạnh phải của trang.

Bước 9. Kết quả sau khi tải ảnh
Chúng tôi tải các hình ảnh mà chúng tôi đã tạo ở Bước 1 và Bước 2. Sau khi tải, chúng tôi thấy mã như trong hình bên dưới và bản thân menu trông như thế này. Sau mỗi lần đổi mã, đừng quên nhấn Lưu trang rồi nhấn Xem trước để xem kết quả.

Bước 10. Chỉnh sửa mã hình ảnh
Bây giờ nhiệm vụ của chúng ta là thay thế tất cả thuộc tính noborder bằng thuộc tính nopadding. Và đặt bức ảnh đầu tiên kích thước thực tế, vì VKontakte đã nén hình ảnh xuống 400 pixel khi tải lên. Sau tất cả những thay đổi, chúng ta sẽ nhận được mã và menu sau.

Bước 11. Thêm liên kết vào hình ảnh
Bây giờ chúng ta cần đặt link cho từng bức ảnh. Liên kết phải được chèn sau khi nopadding| thay vì khoảng trắng trước dấu ngoặc đơn đóng. Đối với hình ảnh đầu tiên (tiêu đề menu từ Bước 1), bạn có thể cung cấp liên kết đến trang chính của nhóm hoặc bạn có thể sử dụng thuộc tính nolink (đặt xuyên suốt; sau khi không có khoảng đệm). Đối với thẻ thứ 2 điền địa chỉ trang định dạng trang-78320145_49821289. Nghĩa là, URL đầy đủ của hình ảnh https://vk.com/page-78320145_49821289, phần đầu tiên có tên miền có thể được bỏ qua. Nhưng đối với các liên kết đến các trang bên ngoài thì URL của liên kết phải được chỉ định đầy đủ.

Bước 12. Copy mã vào các trang điều hướng còn lại
Thế là đủ rồi bước đơn giản, chúng tôi sao chép mã mới nhất từ bước trước và dán vào các trang đã tạo còn lại - Giá cả, Cách đặt hàng, Điều khoản tham chiếu và Câu hỏi. Chúng tôi đang ở trên trang, nhấp vào Chỉnh sửa hoặc Điền nội dung (chúng tôi đang ở chế độ đánh dấu wiki), dán mã và nhấp vào Lưu. Và sau đó cũng trên Trang tiếp theo. Tức là bây giờ chúng tôi có năm trang, trên mỗi trang có menu trông giống hệt nhau. Nhưng bạn đã có thể điều hướng qua menu - khi bạn nhấp vào một liên kết, chẳng hạn như Giá, chúng tôi sẽ được chuyển đến trang Giá, v.v.

Bước 13. Tạo hiệu ứng nhấn nút
Bây giờ chúng ta phải thay đổi một hình ảnh trên mỗi trang trong số năm trang (thay nút không có gạch chân bằng nút có gạch chân). Ví dụ: ở trang đầu tiên của Menu chúng ta tải một hình ảnh mới rồi thay thế địa chỉ trong mã Hình cũ sang một cái mới (gạch chân màu đỏ). Sau đó vào trang Giá, tải lên hình ảnh có Giá được gạch chân và thay đổi địa chỉ trong mã bức tranh mới. Sau đó chúng ta đi đến các trang Cách đặt hàng, Điều khoản tham chiếu và Câu hỏi và thực hiện thao tác tương tự theo cách tương tự.

Trận chung kết.
Kết quả là chúng tôi nhận được hiệu ứng điều hướng khi bạn nhấp vào liên kết menu và nó sẽ hoạt động. Nhưng vì thiết kế đồ họa trên tất cả các trang gần như giống nhau, ngoại trừ liên kết hoạt động, ảo giác điều hướng được tạo ra, mặc dù trên thực tế nó đang chuyển sang một trang khác.

Menu được thiết kế theo cách này không phù hợp với thiêt bị di động. Khi kích thước màn hình giảm, các hình ảnh bắt đầu trượt xuống dưới hình kia. Để làm thiết kế thích ứng, bạn cần sử dụng bảng cho phiên bản cứng. Nhưng đây là một câu chuyện khác và một kỹ thuật tiên tiến hơn. Trong lúc đó, hãy nhìn vào Các tùy chọn khác nhau thiết kế đồ họa của menu.

Bạn đã bao giờ nghe câu nói rằng "bạn không thể tạo menu thả xuống động chỉ bằng CSS trong IE" chưa? Tôi chắc chắn như vậy. Vậy bạn có thực sự tin vào điều này không? Đúng rồi, tốt nhất là đừng tin.

Mục tiêu chúng tôi muốn đạt được trong bài viết này

Mục tiêu của bài viết này là tạo một menu thả xuống cho IE được làm hoàn toàn bằng CSS. Bắt đầu với cài đặt này, tôi đã mở rộng nhiệm vụ để làm cho menu như vậy hoạt động trong các trình duyệt nổi tiếng nhất khác (khoảng trên mỗi: từ các nhận xét, hóa ra các trình duyệt này là Opera 7.x và phiên bản mới nhất Firefox).

Mục tiêu mà chúng tôi muốn đạt được trong bài viết này về nguyên tắc ít nhiều mang tính giáo dục phổ thông, tức là. đưa ra khái quát chung về một số tính năng “ẩn” và hiếm khi được sử dụng của trình duyệt.
Ngoài ra, những người đặc biệt tò mò có thể tìm thấy trong bài viết này một số thủ thuật mà bạn có thể đạt được một số kết quả không chuẩn. Chà, đối với các nhà phát triển, bài viết này có thể trở thành lý do để suy nghĩ hoặc nguồn cho những ý tưởng mới.

Chúng ta hình dung trình độ của người đọc như thế nào?

Tôi thực sự đang nghĩ đến việc gắn nhãn bài viết này là "nâng cao". Nhưng tôi chắc chắn rằng ngay cả những nhà phát triển giàu kinh nghiệm nhất cũng sẽ không hiểu rõ những gì được viết trong bài viết. Nói tóm lại, người đọc chỉ cần biết những điều cơ bản về CSS và
HTML.

Thực đơn này khác với những thực đơn khác như thế nào?

Tôi đã dành một thời gian dài tìm kiếm trực tuyến các menu được tạo bằng CSS, nhưng tôi không tìm thấy một giải pháp nào có thể hoạt động mà không gặp trục trặc trong IE. Tuy nhiên, tôi tìm thấy rất nhiều ý tưởng thú vị, điều này dẫn tôi đến kết quả sẽ được mô tả ở đây. Đúng, mã của tôi cũng không hoàn hảo, nhưng đơn giản là tôi không có thời gian để sửa tất cả các lỗi. Thú vị nhất giải pháp thay thế trong số tất cả những cái tôi đã thấy (sử dụng CSS) đều dựa trên việc sử dụng lớp giả di chuột trên các phần tử LI. Nhưng tôi chưa bao giờ nghĩ rằng điều này là có thể, tôi cũng không nghĩ rằng có thể tạo một menu thả xuống cho IE mà không cần tập lệnh...

Sự khác biệt chính giữa menu của tôi và các menu khác là menu của tôi chạy trong IE. Tất cả các giải pháp tôi đã thấy đều sử dụng phần tử LI làm thành phần chính cho lớp giả :hover, tuy nhiên Microsoft đã quyết định rằng lớp giả này chỉ có thể được sử dụng cho
yếu tố A. Hầu hết các trang web đều đưa ra tuyên bố từ chối trách nhiệm rằng menu của họ chỉ hoạt động ở Trình duyệt Opera 7.x hoặc Mozilla. Nhưng những trình duyệt này chỉ được 5% người dùng sử dụng! Có, các menu như vậy rất tốt trong các trình duyệt này, nhưng tiếc là chúng không thể hiển thị trong hầu hết các trình duyệt phổ biến nhất. Bây giờ chúng ta sẽ sửa chữa sự hiểu lầm này.

Menu được tạo chỉ bằng CSS là gì?

Đây là một menu động được tạo chỉ bằng CSS và không có tập lệnh (ví dụ: được viết bằng JavaScript).

Cái gì, bạn không thể tin được à?

Hãy nhìn vào mã:

< STYLE type = text / css id = "default" title = "mặc định" name = "default" >
*::- moz - bất kỳ - liên kết br ,*:- moz - bất kỳ - liên kết br (
/*một giải pháp cho mozilla*/
không trưng bày;
}

div #menu * (
con trỏ: con trỏ; /*vì IE hiển thị con trỏ văn bản
nếu liên kết không hoạt động*/
}

Tàn tật (
màu đỏ ! quan trọng ;
bối cảnh: không có! quan trọng ;
}

Div #menu (
nền: #F5F5DC;

chiều cao: 15px;
khoảng trắng : nowrap ;
chiều rộng: 100%;
}

Div #menu .a (
nền: #F5F5DC;
đường viền : 1px liền khối #F5F5DC;
màu: #000000;
trang trí văn bản : không có ;
}

Div #menu .a bảng (
hiển thị: khối;
phông chữ: 10px Verdana, sans-serif;
khoảng trắng : nowrap ;
}

phân chia #bảng menu, div#bảng menu a (
không trưng bày;
}

phân chia #menu .a:hover, div#menu div.menuitem:hover (
nền: #7DA6EE;
đường viền : 1px liền khối #000080;
màu: #0000FF;
lề - phải :- 1px; /*giải quyết vấn đề với Opera
không hiển thị đường viền bên phải*/
}

phân chia #menu .a:bảng di chuột, div#menu div.menuitem:bảng di chuột(
nền: #FFFFFF;
đường viền : 1px liền khối #708090;
hiển thị: khối;
vị trí: tuyệt đối;
khoảng trắng : nowrap ;
}

phân chia #menu .a:di chuột bảng a, div#menu div.menuitem:di chuột bảng a (
đường viền - trái : 10px liền khối #708090;
đường viền - bên phải: 1px màu trắng; /*giải quyết vấn đề nhảy*/
màu: #000000;
hiển thị: khối;
phần đệm: 1px 12px;
trang trí văn bản : không có ;
khoảng trắng : nowrap ;
chỉ số z: 1000;
}

phân chia #menu .a:bảng di chuột a:hover, div#menu div.menuitem:bảng di chuột a:hover (
nền: #7DA6EE;
đường viền : 1px liền khối #000000;
đường viền - trái : 10px liền khối #000000;
màu: #000000;
hiển thị: khối;
phần đệm: 0px 12px;
trang trí văn bản : không có ;
chỉ số z: 1000;
}

Td(
đường viền - chiều rộng: 0px;
phần đệm: 0px 0px 0px 0px;
}

mục thực đơn (
nổi: trái;
lề : 1px 1px 1px 1px ;
phần đệm: 1px 1px 1px 1px;
}

Mục thực đơn*(
phần đệm: 0px 0px 0px 0px;
}

#khác (

}

#moz(

}

#moz::-moz-cell-content(
chiều cao: tự động; khả năng hiển thị: có thể nhìn thấy;
}

#other::-moz-cell-content(
chiều cao: 1px; khả năng hiển thị: ẩn;
}

#người giữ (
chiều rộng: 100%;
}

< TABLE id = holder >
< TR >
< TD id = "other" >
< DIV id = "menu" >
< DIV class= "menuitem" >
< a class= "a" href = "#" >Tài liệu< BR >
< TABLE >
< TR >
< TD >< a href = #2>nhấp vào đây

< TR >
< TD >< a href = #3>Cứu

< TR >
< TD >< a href = #4>Đóng

< DIV class= "menuitem" >
< A class= "a" href = "#11" >Giúp đỡ< BR >
< TABLE >
< TR >
< TD >< a class= "disabled" >..

< TR >
< TD >< a href = #13>Mục lục

< TR >
< TD >< a href = "#14" >Về

< TR >
< TD id = "moz" >Trình đơn cụ thể của Mozilla!
< DIV id = "menu" >
< DIV class= "menuitem" >
< a class= "a" href = "#" >Filezilla
< TABLE >
< TR >
< TD >< a href = #2>Mở

< TR >
< TD >< a href = #3>Cứu

< TR >
< TD >< a href = #4>Đóng

< DIV class= "menuitem" >
< A class= "a" href = "#11" >Trợ giúp
< TABLE >
< TR >
< TD >< a class= "disabled" >..

< TR >
< TD >< a href = #13>Mục lục

< TR >
< TD >< a href = "#14" >Về

< BR >

Chuyện gì đang xảy ra vậy, tại sao mọi thứ vẫn hoạt động?

Hãy đặt chỗ ngay nhé ở bài viết này tôi sẽ không dạy bạn đâu sử dụng CSS. Do đó, chúng tôi ngay lập tức chuyển sang xem xét nguyên tắc hoạt động của menu - với lớp giả ":hover". Vâng, đây chính xác là lớp học. Những thứ kia. bộ chọn có thể kế thừa một bộ chọn khác bao gồm ":hover". Trong trường hợp của chúng tôi, "A:hover TABLE" chọn "

V.
yếu tố , mà con trỏ chuột đang di chuột qua. Sau đây là một thủ thuật với một bảng có thuộc tính "display" được đặt thành "none" (nghĩa là nó vô hình). Bảng nằm giữa các thẻ neo ( ,). Qua theo Microsoft, điều này có thể khiến IE phản ứng không thích hợp, nhưng tôi không nhận thấy điều gì như vậy.

Tại sao chúng ta sử dụng bảng? Nhưng vì nó tách biệt rất rõ các neo lồng nhau mà chúng ta muốn sử dụng với neo chính. Giải pháp này không hoạt động trong Mozilla 0.7 và thậm chí với sử dụng JavaScript Tôi chưa tìm ra cách để thực hiện điều này. Việc lồng trực tiếp các neo không được Microsoft cho phép, vì vậy thành phần bảng là một loại hack đối với IE. Và theo như tôi biết, chỉ có bảng mới cho phép bạn “chạy” IE theo cách này.

vậy chúng ta có gì ở đây nào? 2 bàn có chốt neo bên trong.

< A class= "a" href = "#11" >Giúp đỡ< BR >
< TABLE cellpadding = "0" cellspacing = "0" border = "0" >
< TR >
< TD >< a href = "#12" >Làm cách nào để

< TR >
< TD >< a href = "#13" >Mục lục

< TR >
< TD >< a href = "#14" >Về

Những gì được ẩn.

div #menu .a bảng (
không trưng bày;
z - chỉ số :- 1 ;
}

Trình duyệt hiển thị nội dung của neo khi di chuột qua và áp dụng kiểu dáng phù hợp khi thực hiện như vậy:

div #menu .a:hover (
nền: #7DA6EE;
đường viền: màu đen đặc 1px;
màu đen; chỉ số z: 0;
}

Đối với bảng thả xuống mà chúng ta sử dụng cho menu con: đây là bảng khóa, là danh sách thả xuống.

div #menu .a:bảng di chuột(
nền: Trắng;
hiển thị: khối;
vị trí: tuyệt đối;
chiều rộng: 125px; chỉ số z: 0;
đường viền : 1px liền khối #708090;
}

Đối với các liên kết bên trong menu con:

div #menu .a:di chuột bảng a (
hiển thị: khối;
màu đen;
trang trí văn bản : không có ;

}

Nếu chúng ta di chuột qua một trong các liên kết trong menu con, trình duyệt sẽ áp dụng kiểu sau:

Đối với các liên kết bên trong menu con:

div #menu .a:hover bảng a:hover (
hiển thị: khối;
nền: #7DA6EE;
màu đen;
trang trí văn bản : không có ;
phần đệm: 0px 11px;
đường viền: màu đen đặc 1px; chỉ số z: 1000;
khả năng hiển thị: có thể nhìn thấy;
}

Kiểu liên kết menu thả xuống:

div #menu .a:di chuột bảng a (
hiển thị: khối;
màu đen;
trang trí văn bản : không có ;
phần đệm: 1px 12px; chỉ số z: 1000;
}

Bạn có thể nhận thấy rằng tôi đã sử dụng nhiều thuộc tính "z-index" trên một số phần tử. Chúng là những mẹo khắc phục một số vấn đề mà tôi phát hiện khi kiểm tra menu.

Cải tiến

Để thêm các cấp độ con vào menu thả xuống, bạn chỉ cần chèn một phần tử div ".menuitem" khác (cùng với nội dung và cấu trúc tương tự của nó) thay vì một liên kết trong bảng cha.
Bây giờ bạn đã có các cấp độ phụ trong menu, bạn sẽ cần xóa các thẻ
để đưa ra menu "trả phòng bình thường". Ngoài ra, bạn sẽ cần tạo nhiều bản sao của các lớp .menuitem và .a có cùng thuộc tính, nhưng tên khác nhau cho mỗi menu con.
Có, có vẻ như có rất nhiều việc phải làm, NHƯNG bạn chỉ cần thêm bộ chọn của chúng vào phần thích hợp của biểu định kiểu.

Mô tả đầy đủ Lần sau tôi sẽ làm như thế nào.
Trong lúc chờ đợi, tôi sẽ nói rằng bạn có thể thay đổi menu này theo cách bạn muốn, điều chỉnh nó cho phù hợp với bạn. Và có vô số khả năng cho việc này - chỉ trí tưởng tượng của bạn mới có thể giới hạn chúng...

Chuyển đổi phong cách (Skins)

Nếu bạn muốn thêm giao diện cho menu của mình với khả năng người dùng thay đổi chúng, bạn sẽ cần thêm bảng bổ sung style và đặt tên cho chúng bằng id="some_name" (đối với IE) và với name="some_name" (đối với các trình duyệt khác). Để ngăn áp dụng cả hai kiểu, bạn cần tắt tất cả trừ kiểu mặc định bằng cách thêm tùy chọn "đã tắt" vào kiểu của thẻ (cho dù bạn liên kết nó hay sử dụng cú pháp tuyến tính). Mozilla và Opera cho phép bạn chuyển đổi các kiểu được đặt tên từ bên trong trình duyệt. Thông thường, các trình duyệt này không áp dụng tất cả các kiểu được xác định bởi name="..." và bỏ qua id="...". Họ cũng biết cách sử dụng name="default" làm biểu định kiểu mặc định và name="alternate" làm biểu định kiểu thay thế. Bạn có thể xác định tên kiểu mà người dùng sẽ xem là thuộc tính title="...". Ví dụ: menu demo trên trang này bao gồm các định nghĩa sau:

< STYLE type = text / css id = "alternate" title = "Màu xanh da trời" name = "alternate" disabled >
...< STYLE >
< STYLE type = text / css id = "default" title = "Mặc định" name = "default" >
...< STYLE >

Hãy chú ý đến thứ tự đặt tên, tôi thực sự khuyên bạn nên tuân thủ nghiêm ngặt.

IE không có tính năng chuyển đổi tích hợp Kiểu CSS, vì vậy chúng ta sẽ phải tự làm điều đó (không phải không sử dụng JavaScript):

Chọn một trong các kiểu bằng cách nhấp vào kiểu thích hợp và quay lại để xem
thay đổi:

onclick = "document.styleSheets("default").disabled=false;document.styleSheets("alternate").disabled=true;"> Phong cách
mặc định

Onclick = "document.styleSheets("alternate").disabled=false;document.styleSheets("default").disabled=true;"> Màu xanh

Onclick = "document.styleSheets("alternate").disabled=true;document.styleSheets("default").disabled=true;"> Không có
phong cách

Điều này được thực hiện như thế này:

< ul >
< li onclick = "document.styleSheets("mặc định").disabled=false;
document.styleSheets("alternate").disabled=true;">
< a >Mặc định

< li onclick = "document.styleSheets("thay thế").disabled=false;
>
< a >Màu xanh da trời

< li onclick = "document.styleSheets("thay thế").disabled=true;
document.styleSheets("default").disabled=true;">
< a >Không có biểu định kiểu

Cảnh báo! Đây chỉ là một ví dụ nhỏ!
Tải lại trang sẽ đặt lại bảng định kiểu về mặc định. Do đó, vì mục đích thực tế, cần phải sử dụng cookie hoặc tập lệnh máy chủ để ghi nhớ các lựa chọn của người dùng, điều này một lần nữa không phải là chủ đề của bài viết này.
Tôi sẽ chỉ nói thêm rằng đoạn mã trên sẽ chỉ hoạt động trong
I E.

Phần kết luận

Tôi khuyên mọi người nên sử dụng menu trên Dựa trên CSS trên các trang web của bạn (và các ứng dụng web) vì bằng cách này bạn có thể tránh được nhiều vấn đề xuất hiện khi sử dụng menu trên Dựa trên JavaScript. Những vấn đề như vậy thường phát sinh khi các sự kiện được xử lý không chính xác trong IE. Hơn nữa, một số trình duyệt có khả năng vô hiệu hóa tập lệnh và hơn thế nữa, nhiều trình duyệt không hỗ trợ Microsoft JS.

Nếu trình duyệt không hỗ trợ CSS thì ít nhất nó sẽ hiển thị tất cả các liên kết.

Lỗi đã biết

Theo mặc định, các liên kết trong menu con không hoạt động trong Mozilla. Nhưng tôi đã tìm thấy một giải pháp ít nhiều có thể chấp nhận được cho lỗi này. Nó dựa trên việc chèn menu đặc biệt, một lần nữa mà không sử dụng tập lệnh. Hãy xem xét cẩn thận những vị trí trong mã mà Mozilla (hoặc "moz") được đề cập. Bạn sẽ thấy rằng các phần HTML không có các neo lồng nhau (thẻ cuối cùng được đặt ở vị trí cần thiết). Trong phần đầu tiên của CSS, tôi sử dụng các bộ chọn không có giấy tờ - đây là bộ chọn đặc biệt cho Mozilla và thêm bộ chọn:hover cho những thứ đó phần tử div, được Mozilla hỗ trợ. Và sau đó, hành vi này vẫn không hoàn toàn chính xác.

Có một lưu ý trong phần nhận xét (từ Nick Young) rằng menu không hoạt động trong Netscape. Tôi chắc chắn vấn đề ở đó cũng giống như ở Mozilla. Phải tìm kiếm Thông tin thêm về nó. Giải pháp có thể yêu cầu một số thay đổi vì mã thay thế cũng sẽ hoạt động tốt trong Netscape.

Ghi chú:

Trang này đã được thử nghiệm trên các phiên bản IE 5, 5.5, 6, Opera 7.23 và Mozilla 0.71. Rất có thể, menu sẽ hoạt động tốt hơn phiên bản trước các trình duyệt được chỉ định.

Điều đầu tiên cần làm rõ là không có thuật ngữ nào chính thức như vậy. Nói chung, menu động có thể được hiểu là menu có nội dung thay đổi trong khi người dùng đang làm việc, tùy thuộc vào hoàn cảnh bên ngoài.

Trong trường hợp này Chúng ta đang nói về về một chủ đề, mặc dù thuộc công thức mơ hồ này, nhưng lại đơn giản và tầm thường hơn. Nếu menu như vậy được đặc trưng bởi tính năng động (hãy nhớ rằng việc cài đặt một chương trình sẽ dẫn đến những thay đổi trong đó) và thậm chí còn có menu “Tài liệu” có thể thay đổi đặc biệt do Microsoft phát minh, thì tôi đề xuất nói về cách tổ chức menu chứa chính xác dữ liệu của bạn và thay đổi bạn trong quá trình làm việc.

Với việc phát hành Windows 95, công ty Microsoftđã cố gắng chuyển sự nhấn mạnh từ các gizmos dành cho lập trình viên hệ thống như “tệp” sang những thứ mà bất kỳ ai cũng có thể hiểu được doanh nhân"tài liệu". Để làm được điều này, mối quan hệ giữa các loại tệp đã được củng cố và chúng tôi đặc biệt khuyến khích mở chúng nhấn đúp chuột di chuột trực tiếp lên biểu tượng tài liệu chứ không phải từ ứng dụng được khởi chạy trước. Chà, đây không phải là một điều mới và về nguyên tắc, nó là một điều tiện lợi hơn so với việc trèo đĩa trong cửa sổ “Mở”.

Để làm mồi nhử, công ty đã đặt mục "Tài liệu" trong menu, được thiết kế để cung cấp khả năng truy cập nhanh hơn vào các tệp được mở gần đây nhất. Sự đổi mới này đã bị chỉ trích, hãy để tôi chỉ nhắc bạn về những phàn nàn chính: hệ thống thực hiện kém việc hiển thị chính xác những cái đã mở trong menu tài liệu mới nhất, menu ngổn ngang, tài liệu không được sắp xếp và không thể cấu trúc theo chủ đề, và cuối cùng, đơn giản là chúng không được trình bày hết.

Tôi đã cố gắng hiện đại hóa menu "Tài liệu" mười lần nhưng không có điều gì đặc biệt hữu ích xảy ra. Tôi có thể đưa ra một lựa chọn khác. Hãy tưởng tượng rằng trong menu hệ thốngở cấp độ đầu tiên, có một hoặc một số mục cung cấp quyền truy cập vào hệ thống menu con tương ứng với việc phân chia tài liệu thành các nhóm mà bạn đã chấp nhận (theo chủ đề, thời gian, loại, v.v.) và menu con chứa tất cả các tệp tài liệu ở cấp độ đầu tiên của bạn. xử lý, thành phần của chúng được cập nhật khi chúng được tạo hoặc xóa, chúng được chuyển từ menu này sang menu khác, tự động theo dõi chuyển động của các tệp trên đĩa.

Tùy chọn bình thường truy cập nhanh, xem và tìm kiếm tài liệu? Sau đó, hãy nhớ rằng việc thực hiện một menu động như vậy cũng dễ như bóc vỏ quả lê. Bạn chỉ cần đặt các thư mục làm việc của mình vào thư mục trên đĩa tương ứng với menu chính. Đây là những thư mục chứa các tập tin trực tiếp, không phải các phím tắt. Làm điều này và bạn sẽ ngay lập tức có quyền truy cập thông qua menu vào từng tài liệu được lưu trữ ở đó.

Nhưng để làm cho mọi thứ trông có vẻ tích tắc, bạn vẫn phải mày mò. Phải được sử dụng tên dài, thì menu tài liệu tùy chỉnh của bạn sẽ có giao diện giống con người. Điều này sẽ yêu cầu bạn phải từ bỏ những con mực nang DOS yêu thích của mình như Docs, Doc1, v.v. Không sao, bạn cần phải làm quen với việc gọi thuổng là thuổng và quên đi những biệt danh ngầm tám chữ cái.

Bạn sẽ phải suy nghĩ về những cái tên. Như tôi đã nói, số lượng thư mục lồng nhau không được vượt quá 3, tối đa là 4 cấp độ. Tên của chúng không nên quá dài, cũng như tên của các tài liệu chứa trong đó. Nếu không, menu của bạn sẽ di chuyển ngang qua màn hình từ trái sang phải, sau đó lại uốn cong về phía trước và phía sau. Bạn sẽ cảm thấy mệt mỏi khi di chuyển chuột. Tránh trùng lặp từ ngữ. Nếu thư mục và menu con theo đó được gọi là “Thỏa thuận”, thì không cần thiết phải gọi các tài liệu có trong đó là “Thỏa thuận số 139-45 ngày…”. Rõ ràng đây là một thỏa thuận vì nó nằm trong thư mục chứa các thỏa thuận. Ngoài ra, hãy thử sử dụng một số từ được phân bổ theo số phận (hoặc chiều rộng của màn hình, nếu bạn thích) để mô tả tài liệu, phản ánh nội dung của nó. Con số và ngày tháng là thông tin tuyệt vời, nhưng không chắc bạn sẽ nhớ ngay tài liệu này nói về cái gì.

Với chi phí nỗ lực bổ sung, bạn có thể đạt được thỏa thuận trong chuỗi được hình thành bởi tên của menu con và tài liệu cuối cùng, trường hợp, cách chia động từ và các linh hồn ma quỷ khác. Sẽ dễ chịu hơn và giúp bạn bớt mệt mỏi hơn khi đọc các cụm từ được xây dựng khéo léo trên màn hình thay vì giao tiếp với máy tính bằng tiếng Nga không chuẩn, như thể bạn đang nói chuyện với một người đại diện cho một ngoại ngữ. thực thể pháp lý. Ví dụ: nếu tài liệu được mô tả bằng biểu thức “Thỏa thuận năm 1996 về việc thuê kho tại nhà ga”, thì bạn có thể soạn thảo chuỗi tiếp theo menu: "Thỏa thuận" - "cho năm 1996" - "cho thuê" - "kho tại nhà ga." Có lẽ ai đó sẽ cảm thấy khó chịu với tên tập tin “kho ở nhà ga”, nhưng nếu tính đến chuỗi tên thư mục xếp hàng trước nó, mọi thứ đều diễn ra chính xác.

Một hệ thống năng động được tổ chức theo cách này thực đơn tùy chỉnh cũng có những nhược điểm. Thứ nhất, hệ thống không phải lúc nào cũng cập nhật menu ngay sau khi có tệp mới (tệp hiện có sẽ bị xóa). Rõ ràng, ở đâu đó trong mê cung đa luồng và đa nhiệm, lệnh về nhu cầu làm mới menu bị kẹt. Hơi khó chịu một chút nhưng nó không xảy ra thường xuyên và sau khi khởi động máy, menu chắc chắn sẽ tương ứng với những gì được ghi trên đĩa. (Điều này không có nghĩa là tôi gọi mỗi lần trường hợp tương tựđể khởi động lại máy, bạn thường có thể thực hiện bằng cách đọc lại thư mục trong Explorer bằng phím.) Thứ hai, việc lưu trữ các tệp công việc của bạn bên trong thư mục Windows là không tốt. Bạn sẽ phải lấy thư mục "Menu chính" từ đó ra và theo dõi nó, vì bạn nên lo lắng về sự an toàn Thông tin người dùng- LÀM bản sao lưu, làm sạch các mảnh vụn, v.v. Rắc rối thứ ba có bản chất tâm lý - lúc đầu, rất bất thường khi thấy các thư mục làm việc của bạn không nằm trong bảng nội dung gốc của đĩa mà ở đâu đó trong “Menu chính”. Nhưng nó sẽ trôi qua - bạn sẽ quen với nó.

Các mục menu ẩn

Một cách khác để đơn giản hóa nội dung của menu và do đó tăng hiệu quả sử dụng nó là ẩn một phần của nó trong quá trình hoạt động bình thường.

TRONG Trình đơn Windows 95 có đầy đủ những thứ mà hoạt động binh thương không cần sử dụng nó. Chúng bao gồm các phím tắt từ các chương trình gỡ cài đặt ứng dụng, tập tin khác nhau Readme và những thứ khác thông tin văn bản từ các nhà sản xuất, các chương trình đăng ký và các hình thức nộp e-mail. Điều này cũng bao gồm các tiện ích tiện ích mà bạn chỉ sử dụng khi phần mềm bắt đầu phàn nàn hoặc hoạt động đáng ngờ. Để thực hiện các quy trình vệ sinh máy tính hàng ngày, cách thuận tiện nhất (và đủ) là sử dụng các dịch vụ của tiện ích thực thi tự động System Agent từ đặt Plus, thay vì chạy quét đĩa và chống phân mảnh theo cách thủ công. Và nếu vậy thì không có lý do gì để liên tục giữ những chương trình này trong menu.

Tuy nhiên, bạn không nên xóa khỏi menu mọi thứ có trong khoảnh khắc này dường như không cần thiết. Ví dụ: khi gỡ cài đặt nhiều ứng dụng, họ chuyển sang phím tắt Gỡ cài đặt trong menu chứ không phải chính chương trình. Xin Chúa hãy phán xét họ, nhưng nếu bạn xóa phím tắt thì bạn sẽ không thể nhấp vào ứng dụng theo cách thông thường. Ngoài ra còn có một cách đơn giản và dễ dàng để đơn giản hóa menu mà không cần vứt bỏ bất cứ thứ gì.

Trong Windows 95, giống như trong DOS, có khái niệm về các tập tin và thư mục ẩn. Tại công việc thường xuyên bạn không nhìn thấy chúng trên màn hình vì hệ thống không hiển thị những tệp và thư mục đã chọn hộp kiểm "Ẩn". Cờ này được kiểm tra và đặt lại trong cửa sổ thuộc tính tệp. Để xem các đối tượng như vậy, bạn cần vào menu “Xem” / “Tùy chọn” trong “Explorer” và bật chế độ “Hiển thị tất cả các tệp”.

Thử cái này xem sao. Không xóa bất cứ thứ gì, hãy tập hợp trong menu hệ thống một cấu trúc gồm các cấp độ lồng nhau và các mục sẽ phù hợp với bạn trong công việc hàng ngày. Ẩn phần nhân còn lại đi, đánh dấu là phím tắt riêng cả tệp và toàn bộ thư mục và đặt thuộc tính thích hợp trên chúng. Tốt hơn nên thực hiện việc này ở chế độ hiển thị cho tất cả các loại tệp. Sau khi kết thúc bài tập, chuyển chế độ hiển thị về bình thường, trong đó Các tệp ẩn vô hình, và nhìn vào kết quả lao động của bạn.

Nếu menu đã trở nên đơn giản và tiện lợi hơn thì bạn đã thành công trong việc thay đổi Giao diện Windows 95 một cái nữa cài đặt hữu ích nhất. Khi bạn phải bắt đầu khắc phục các sự cố hệ thống (và điều này, than ôi, xảy ra khá thường xuyên), chỉ cần bật hiển thị tất cả các tệp trong Explorer và bạn sẽ có tùy ý sử dụng trọn bộ các mục menu.

Về nguyên tắc, cách tiếp cận tương tự có thể được sử dụng cho máy tính để bàn, nội dung của nó được liên kết với thư mục C:\Windows\Desktop. Tuy nhiên, đối với máy tính để bàn, hệ thống không chỉ lưu trữ các phím tắt mà còn cả thứ tự đặt chúng (nó ẩn sâu trong sổ đăng ký cấu hình), vì vậy khi chuyển chế độ hiển thị trên máy của tôi, hệ thống đã thu thập biểu tượng trong thứ tự ABC. Điều đó, tất nhiên, không phù hợp với tôi. Vấn đề tạo nhiều bố cục màn hình có thể được giải quyết, nhưng tốt hơn là theo một cách khác.

Khả năng sắp xếp menu và màn hình nền trong Windows 95 (không giống như cuộc trò chuyện ngày nay) không dừng lại ở đó. Bất kỳ người dùng nào cũng có thể tìm ra những cách tiếp cận mới để tối ưu hóa nơi làm việc nếu họ dành thời gian thử nghiệm và cố gắng sử dụng những phương pháp tiêu chuẩn và nổi tiếng theo một cách hơi khác thường. công cụ hệ thống từ kho vũ khí của Microsoft.

La Mã Sabalenko

06.06.06 26.3K

Giới thiệu

Bạn đã bao giờ nghe câu nói rằng “bạn không thể tạo menu thả xuống động chỉ bằng CSS cho IE” chưa? Tôi chắc chắn như vậy. Vậy bạn có thực sự tin vào điều này không? Đúng rồi, tốt nhất là đừng tin.

Mục tiêu chúng tôi muốn đạt được trong bài viết này

Mục tiêu của bài viết này là tạo một menu thả xuống cho IE được làm hoàn toàn bằng CSS. Bắt đầu với cài đặt này, tôi đã mở rộng nhiệm vụ làm cho menu như vậy hoạt động trong các trình duyệt nổi tiếng nhất khác (từ các nhận xét, hóa ra những trình duyệt này là Opera 7.x và các phiên bản Firefox mới nhất).

Chúng ta hình dung trình độ của người đọc như thế nào?

Thực đơn này khác với những thực đơn khác như thế nào?

Tôi đã dành một thời gian dài tìm kiếm trực tuyến các menu được tạo bằng CSS, nhưng tôi không tìm thấy một giải pháp nào có thể hoạt động mà không gặp trục trặc trong IE. Tuy nhiên, tôi đã tìm thấy nhiều ý tưởng thú vị dẫn tôi đến kết quả sẽ được mô tả ở đây. Đúng, mã của tôi cũng không hoàn hảo, nhưng đơn giản là tôi không có thời gian để sửa tất cả các lỗi. Giải pháp thay thế thú vị nhất mà tôi từng thấy (sử dụng CSS) dựa trên việc sử dụng lớp giả di chuột cho các phần tử LI. Nhưng tôi chưa bao giờ nghĩ rằng điều này là có thể, cũng như tôi chưa bao giờ nghĩ rằng thậm chí có thể tạo một menu thả xuống cho IE mà không cần tập lệnh...

Sự khác biệt chính giữa menu của tôi và các menu khác là menu của tôi chạy trong IE. Tất cả các giải pháp tôi đã thấy đều sử dụng phần tử LI làm thành phần chính cho lớp giả :hover, tuy nhiên Microsoft đã quyết định rằng lớp giả này chỉ có thể được sử dụng cho
phần tử A. Hầu hết các trang web đều đặt trước rằng menu của họ chỉ hoạt động trong trình duyệt Opera 7.x hoặc Mozilla. Nhưng những trình duyệt này chỉ được 5% người dùng sử dụng! Có, các menu như vậy rất tốt trong các trình duyệt này, nhưng tiếc là chúng không thể hiển thị trong hầu hết các trình duyệt phổ biến nhất. Bây giờ chúng ta sẽ sửa chữa sự hiểu lầm này.

Menu được tạo chỉ bằng CSS là gì?

Đây là một menu động được tạo chỉ bằng CSS và không có tập lệnh (ví dụ: được viết bằng JavaScript).

Cái gì, bạn không thể tin được à?

Hãy nhìn vào mã:

Trình đơn cụ thể của Mozilla!

Chuyện gì đang xảy ra vậy, tại sao mọi thứ vẫn hoạt động?

Hãy đặt chỗ ngay rằng trong bài viết này tôi sẽ không hướng dẫn bạn cách sử dụng CSS. Do đó, chúng ta hãy chuyển ngay sang xem xét nguyên tắc hoạt động của menu - đến lớp giả ':hover'. Vâng, đây chính xác là lớp học. Những thứ kia. bộ chọn có thể kế thừa một bộ chọn khác bao gồm ':hover'. Trong trường hợp của chúng tôi, ‘A:hover TABLE’ chọn ‘

V.
yếu tố , mà con trỏ chuột đang di chuột qua. Sau đây là một thủ thuật với một bảng có thuộc tính "display" được đặt thành "none" (nghĩa là nó vô hình). Bảng nằm giữa các thẻ neo ( ,). Theo Microsoft, điều này có thể khiến IE phản ứng không thích hợp, nhưng tôi chưa nhận thấy điều gì như vậy.

Tại sao chúng ta sử dụng bảng? Nhưng vì nó tách biệt rất rõ các neo lồng nhau mà chúng ta muốn sử dụng với neo chính. Giải pháp này không hoạt động trong Mozilla 0.7 và ngay cả với JavaScript, tôi vẫn chưa tìm được cách triển khai giải pháp này. Việc lồng trực tiếp các neo không được Microsoft cho phép, vì vậy thành phần bảng là một loại hack đối với IE. Và theo như tôi biết, chỉ có bảng mới cho phép bạn “chạy” IE theo cách này.

vậy chúng ta có gì ở đây nào? 2 bàn có chốt neo bên trong.

Giúp đỡ

Làm cách nào để

Mục lục

Về

Những gì được ẩn.

div#menu .a bảng ( display: none; z-index:-1; )

Trình duyệt hiển thị nội dung của neo khi di chuột qua và áp dụng kiểu dáng phù hợp khi thực hiện như vậy:

div#menu .a:hover ( nền: #7DA6EE; đường viền: 1px màu đen; color: black;z-index:0; )

Đối với bảng thả xuống mà chúng ta sử dụng cho menu con: đây là bảng khóa, là danh sách thả xuống.

div#menu .a:bảng di chuột( nền: Trắng; hiển thị: khối; vị trí: tuyệt đối; chiều rộng: 125px; chỉ mục z: 0; đường viền: 1px rắn #708090; )

Đối với các liên kết bên trong menu con:

Nếu chúng ta di chuột qua một trong các liên kết trong menu con, trình duyệt sẽ áp dụng kiểu sau:

Đối với các liên kết bên trong menu con:

div#menu .a:hover table a:hover ( display: block; nền: #7DA6EE; color: black; text-trang trí: none; phần đệm: 0px 11px; đường viền: 1px màu đen đặc; z-index:1000; khả năng hiển thị: dễ thấy; )

Kiểu liên kết menu thả xuống:

div#menu .a:hover bảng a ( display: block; color: Black; text-trang trí: none; phần đệm: 1px 12px; z-index:1000; )

Bạn có thể nhận thấy rằng tôi đã sử dụng nhiều thuộc tính 'z-index' trên một số phần tử. Chúng là những mẹo khắc phục một số vấn đề mà tôi phát hiện khi kiểm tra menu.

Cải tiến

Để thêm các cấp độ con vào menu thả xuống, bạn chỉ cần chèn một phần tử div '.menuitem' khác (cùng với nội dung và cấu trúc tương tự của nó) thay vì một liên kết trong bảng cha.
Bây giờ bạn đã có các cấp độ phụ trong menu, bạn sẽ cần xóa các thẻ
để đưa ra menu "trả phòng bình thường". Ngoài ra, bạn sẽ cần tạo nhiều bản sao của các lớp .menuitem và .a có cùng thuộc tính nhưng có tên khác nhau cho mỗi menu con.
Có, có vẻ như có rất nhiều việc phải làm, NHƯNG bạn chỉ cần thêm bộ chọn của chúng vào phần thích hợp của biểu định kiểu.

Tôi sẽ mô tả đầy đủ về cách thực hiện việc này vào lần tới.
Trong lúc chờ đợi, tôi sẽ nói rằng bạn có thể thay đổi menu này theo cách bạn muốn, điều chỉnh nó cho phù hợp với bạn. Và có vô số khả năng cho việc này - chỉ trí tưởng tượng của bạn mới có thể giới hạn chúng...

Chuyển đổi phong cách (Skins)

Nếu bạn muốn thêm giao diện cho menu mà người dùng có thể thay đổi, bạn sẽ cần thêm các biểu định kiểu bổ sung và đặt tên chúng bằng id=’some_name’ (đối với IE) và name=’some_name’ (đối với các trình duyệt khác). Để ngăn áp dụng cả hai kiểu, bạn cần tắt tất cả trừ kiểu mặc định bằng cách thêm tùy chọn "đã tắt" vào kiểu của thẻ (cho dù bạn liên kết nó hay sử dụng cú pháp tuyến tính). Mozilla và Opera cho phép bạn chuyển đổi các kiểu được đặt tên từ bên trong trình duyệt. Thông thường, các trình duyệt này không áp dụng tất cả các kiểu được xác định bởi name="..." và bỏ qua id="...". Họ cũng biết cách sử dụng name=’default’ làm biểu định kiểu mặc định và name=’alternate’ làm biểu định kiểu thay thế. Bạn có thể xác định tên kiểu mà người dùng sẽ xem là thuộc tính title="...". Ví dụ: menu demo trên trang này bao gồm các định nghĩa sau: