Thực đơn năng động. Menu thả xuống động. Thay đổi lớp menu bằng jQuery
Tóm tắt: Mục đích. Học cách áp dụng phần tử HTML(danh sách và siêu liên kết), và Thuộc tính CSS(mô hình hiển thị, các lớp giả siêu liên kết) để tạo thành hệ thống điều hướng trên trang web.
Đặt một menu với một tập hợp các siêu liên kết trên một trang là một trong những nhiệm vụ quan trọng trong quá trình thực hành của một nhà thiết kế web. Để không làm mất sự chú ý của người dùng khi xem toàn bộ, các liên kết thường được nhóm thành các danh mục và chỉ các danh mục mới được đưa vào menu chính. Chỉ khi bạn chọn một danh mục thì các liên kết (hoặc danh mục phụ) tương ứng mới được hiển thị.
Theo quy định, các menu động như vậy thường được tạo bằng cách sử dụng Ngôn ngữ Javascript, cho phép bạn thực hiện các thao tác với các thành phần của trang web có độ phức tạp bất kỳ. Tuy nhiên, cũng có một giải pháp CSS - khá đơn giản và đẹp mắt, mặc dù nó không đáp ứng được trí tưởng tượng của mọi nhà thiết kế. Chúng ta hãy nhìn vào nó từng bước một.
- Món ăn phổ biến
- Ẩm thực Ý
- Đồ ăn nhẹ
- Đồ ăn nhẹ
- Kẹo
- trái cây
- Quà tặng dịp lễ
- Ngày kỷ niệm
- Cho trẻ em
- Sinh nhật
- Chúc mừng!!!
- Lựa chọn theo giá
- Ít hơn 1000 chà.
- Từ 1000 đến 1500 rúp
- Từ 1500 đến 2000 rúp
- Từ 2000 đến 3000 rúp
- Đắt
- Hoa quả và rau
- Trái cây và quả hạch khô
- Giỏ trái cây
- Núi trái cây
- Thực phẩm lành mạnh
- Không có thuốc trừ sâu
- Những bông hoa
- Hoa tự nhiên
- vườn hoa
- Hoa "biết nói"
- Những món quà của công ty
Hãy tự mình nghĩ ra tên của các liên kết và danh mục. Điều quan trọng là thuộc tính id danh sách bên ngoài có giá trị MainMenu - khi đó nó sẽ được gán một kiểu đặc biệt dựa trên mã định danh này).
#MainMenu > li ( float: left; list-style-type: none; )
Theo dõi các thay đổi đối với cách hiển thị tài liệu của bạn bằng cách chia cửa sổ soạn thảo thành một dạng xem mã nguồn và nhà thiết kế. Sau khi áp dụng quy tắc kiểu đã chỉ định, các mục danh sách bên ngoài ( li ) được đặt theo chiều ngang (do gói):
Cơm. 7.1.
#MainMenu li:hover ul ( display:block; )
Lưu tài liệu bạn đang phát triển, mở nó trong trình duyệt và đảm bảo rằng menu hoạt động chính xác.
- Chỉ định các điểm neo của bất kỳ cấp độ lồng nhau nào trong menu (quy tắc #MainMenu a ) màu (màu sắc), kiểu chữ (phông chữ) mong muốn và cũng xóa phần gạch chân (trang trí văn bản).
- Gán các mục trong danh sách vào các danh mục (quy tắc #MainMenu > li ) màu nền(lý lịch), phần đệm(phần đệm) và khung bên phải (viền bên phải).
- Cung cấp cho các mục danh sách liên kết lồng nhau (quy tắc #MainMenu li li ) cùng màu nền với danh sách danh mục và vết lõm nhỏ và một khung bên dưới. Ngoài ra, hãy xóa các dấu danh sách (list-style-type ).
- Xóa lề và phần đệm khỏi danh sách liên kết (quy tắc #MainMenu li ul ).
Một vấn đề nhỏ là một số mục trong danh sách danh mục sẽ tăng chiều rộng khi bạn di chuột qua chúng. Điều này là do chiều rộng của phần tử danh sách được xác định bởi chiều rộng của toàn bộ nội dung - bao gồm cả danh sách lồng nhau. Tuy nhiên, nếu bạn ném danh sách lồng nhau ra khỏi luồng thông thường và định vị nó một cách tuyệt đối thì chiều rộng của nó sẽ không còn ảnh hưởng đến chiều rộng nữa. phần tử cha. Vì vậy, chỉ định cho danh sách các liên kết định vị tuyệt đối và đối với các thành phần danh sách danh mục - tương đối. Kiểm tra trong trình duyệt của bạn. Sau đó tinh chỉnh vị trí của danh sách phụ so với vùng chứa của nó bằng cách đặt thuộc tính left và top (không hạ thấp danh sách thả xuống quá thấp, nếu không nó sẽ biến mất khi bạn cố gắng chọn một liên kết trong đó).
Tại sao cần phải định vị các mục trong danh sách danh mục một cách tương đối? Hãy xóa quy tắc tương ứng và mọi thứ sẽ trở nên rõ ràng với bạn.
Kết quả cuối cùng sẽ tương tự như sau.
Bạn có thể đã từng thấy các menu động và sinh động trên một số trang web thay đổi khi bạn cuộn xuống. Bằng cách thu nhỏ menu điều hướng chính, bạn sẽ có nhiều không gian hơn cho nội dung. Trong hướng dẫn này, chúng tôi sẽ giải thích cách bạn có thể tự tạo một menu bằng cách sử dụng HTML5, CSS3 và một chút jQuery.
Nếu bạn muốn tập trung đặc biệt vào nội dung của trang web, cũng như cho phép bạn tạo điều hướng lớn hơn và ấn tượng hơn khi người dùng truy cập trang web lần đầu, thì loại menu này là hoàn hảo cho bạn. Bạn có thể giới thiệu hoàn hảo thương hiệu hoặc biểu tượng của mình và sau cái nhìn đầu tiên về trang web, hãy giảm bớt một số yếu tố, cho phép người dùng tập trung vào nội dung của bạn.
Có nhiều hướng khác nhau để làm điều đó. Trong hướng dẫn này, chúng tôi sẽ giải thích cách tạo một menu cố định, có chiều rộng đầy đủ, có thể thay đổi kích thước theo chiều cao cùng với logo của bạn, tạo một phiên bản thu nhỏ của bản gốc. Nếu muốn, bạn cũng có thể thay thế logo bằng một tùy chọn khác, chẳng hạn như tên viết tắt hoặc biểu tượng, nhưng hãy nhớ rằng tính nhất quán ở đây rất quan trọng để người dùng hiểu phần tử đã thay đổi như thế nào và nó có ý nghĩa gì. mục tiêu chính vẫn là điều hướng trang web.
Sự sáng tạo cấu trúc cơ bản trong HTML5
Chúng ta sẽ bắt đầu bằng cách tạo mã HTML cơ bản mà chúng ta cần. Để bắt đầu, chúng ta sẽ sử dụng cấu trúc HTML5 rất đơn giản.
Bây giờ mã HTML ban đầu của chúng ta đã được viết, chúng ta sẽ thêm mã cho menu cũng như một số chi tiết khác cho tiêu đề của tệp HTML.
Cách tạo menu động | Tạp chí Thiết kế Web 
- trang chủ
- Bài viết
- Đây là một trang web rất thú vị!
Cuộn xuống và xem menu thay đổi như thế nào
Tất cả! Chúng tôi đã đến nơi!
Trong phần: Chúng tôi đã thêm thẻ meta cho tác giả để chỉ ra người tạo tài liệu, sau đó chúng tôi đưa vào “Đặt lại CSS” nổi tiếng của Eric Meyer, thẻ này sẽ đặt lại hầu hết mọi thành phần trong tệp HTML, giúp bạn làm việc với tài liệu rõ ràng hơn và dễ dàng hơn với. Và vì sau này chúng ta sẽ sử dụng JQuery nên ở dòng cuối cùng của phần tử chính, chúng ta sẽ nhập nó qua JQuery CDN.
Trong thẻ của chúng tôi, chúng tôi đã sử dụng phần tử HTML5 mặc định. Phần của chúng tôi sẽ có toàn bộ chiều rộng của trang và sẽ chịu trách nhiệm về những thay đổi giữa phiên bản lớn và nhỏ của menu. Chúng tôi đang cung cấp cho lớp của mình một lớp có tên là “lớn” để chúng tôi có thể thay đổi một số thuộc tính cụ thể trong CSS nhằm biến menu của chúng tôi thành một phiên bản nhỏ hơn. Đây là menu chứa hình ảnh logo trang web của chúng tôi và một danh sách menu không có thứ tự đơn giản với ba liên kết.
Vì chúng tôi không có bất kỳ nội dung nào ở đây nên nội dung này sẽ được sử dụng để kéo dài trang và buộc cuộn có hiệu lực.
Và đó là tất cả cho phần HTML. Bây giờ chúng ta cần tạo kiểu cho các thành phần bằng CSS và làm cho menu động.
Tạo kiểu cho menu và trang
/* Nhập phông chữ Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Kiểu chính */ body( nền-color: #ebebeb; ) ul( float: right; ) li( display: inline; float: left;) img.logo(float: left;) /* Kích thước menu và căn giữa * / nav( chiều rộng: 960px; lề: 0 tự động;)
Một chút CSS này sẽ làm cho menu của chúng ta rộng 960px ở giữa, đồng thời sắp xếp menu của chúng ta ở bên phải và logo ở bên trái. Chúng tôi cũng sẽ nhập phông chữ Amaranth từ Google Web Fonts để sử dụng cho văn bản của chúng tôi trên trang.
Phần.stretch( float: left; chiều cao: 1500px; chiều rộng: 100%; ) phần.stretch p( font-family: "Amaranth", sans-serif; font-size: 30px; color: #969696; text-align: giữa; vị trí: tương đối; lề trên: 250px; ) phần.stretch p.bottom( trên cùng: 100%; )
Ở đây, chúng tôi chỉ làm cho trang giãn ra để khuyến khích người dùng cuộn và định vị văn bản để cho biết phần đầu và phần cuối của nội dung.
Tiêu đề( nền: #C7C7C7; viền dưới: 1px rắn #aaaaaa; float: trái; chiều rộng: 100%; vị trí: cố định; chỉ mục z: 10; ) tiêu đề a( màu: #969696; trang trí văn bản: không có; họ phông chữ: "Amaranth", sans-serif; chuyển đổi văn bản: chữ hoa; cỡ chữ: 1em; ) tiêu đề a.active, tiêu đề a:hover( color: #3d3d3d; ) tiêu đề li( lề-phải: 30px; ) /* Kích thước cho menu lớn hơn */ header.large( chiều cao: 120px; ) header.large img( chiều rộng: 489px; chiều cao: 113px; ) header.large li( lề-top: 45px; )
Đây là nơi chúng ta hoàn thành kiểu dáng cơ bản của tiêu đề. sẽ đóng vai trò là nơi chứa menu của chúng tôi. Nó sẽ chứa phần tử của chúng tôi và sẽ đóng vai trò là phần tử nơi chúng tôi xác định màu nền, chiều cao menu, kiểu menu liên kết, v.v. Nó sẽ thích ứng với chiều rộng màn hình với thuộc tính chiều rộng: 100% và sẽ vẫn cố định trên các thành phần khác trên trang web. Điều quan trọng cần nhớ là đặt chỉ mục z để phần tử chồng lên phần còn lại của trang, cũng như vị trí: đã sửa để làm cho div được neo ở trên cùng để nó giữ nguyên vị trí trong khi người dùng cuộn qua trang mạng. Như bạn có thể thấy, ngoài việc đặt kiểu cho tiêu đề, chúng tôi còn đặt một số kiểu cụ thể cho lớp “lớn” bằng cách sử dụng header.large. Trạng thái ban đầu của menu của chúng tôi sẽ lớn và vì vậy chúng tôi chỉ xác định các kiểu cần thiết ở đây để làm cho nó trông giống như chúng tôi muốn khi người dùng lần đầu vào trang.
Thay đổi kích thước menu động
Thực đơn của chúng tôi đã được hoàn thiện và tạo kiểu, nhưng chúng tôi vẫn muốn giữ nó ở mức tối thiểu. Để tạo "trạng thái" này, chúng tôi sẽ tạo một lớp CSS mới có tên là "nhỏ", lớp này sẽ chịu trách nhiệm thay đổi các thuộc tính mà chúng tôi cần sửa đổi. Chúng ta đã xác định một menu lớn, vì vậy bây giờ chúng ta chỉ cần làm cho menu ngắn hơn, hình ảnh của chúng ta nhỏ hơn theo tỷ lệ và (lề trên) mà chúng ta sử dụng trong các phần tử của mình
/* Kích thước cho menu nhỏ hơn */ header.small( chiều cao: 50px; ) header.small img( chiều rộng: 287px; chiều cao: 69px; lề-top: -10px; ) header.small li( lề-top: 17px; )
Vì vậy, như bạn có thể thấy, các kiểu này gần giống với các kiểu trong menu lớn hơn, chúng tôi chỉ thay đổi lớp “lớn” thành “nhỏ” và thay đổi các giá trị mà chúng tôi đã sử dụng thành các giá trị nhỏ hơn. Chúng tôi sử dụng phần trên cùng của lề âm trên hình ảnh để tập trung hình ảnh vào vùng chứa vì hình ảnh có bóng mỏng và cao hơn chữ viết để chứa nó. Bây giờ chúng tôi có tất cả các kiểu cần thiết để tùy chỉnh menu thay đổi kích thước và nếu bạn cố gắng thay đổi nó trong , bạn sẽ thấy trong trình duyệt rằng menu sẽ trở nên nhỏ hơn. Nhưng chúng ta cần nó phải năng động.
Thay đổi lớp menu khi trợ giúp về jQuery
Với tất cả kiểu dáng đã có sẵn, chúng ta chỉ cần thêm một số JavaScript để chuyển đổi giữa các lớp "lớn" và "nhỏ". Vì chúng tôi muốn thay đổi điều này dựa trên thao tác cuộn của người dùng, nên chúng tôi sẽ sử dụng hàm .ScrollTop() trong jQuery. Chức năng này sẽ cho phép chúng ta lấy hoặc đặt vị trí cuộn theo pixel. Vị trí cuộn là số pixel đã được cuộn trong cửa sổ trình duyệt. Trong trường hợp này, chúng ta chỉ cần biết người dùng đã cuộn bao nhiêu pixel để có thể gọi mã của mình và chuyển đổi giữa các lớp:
$(document).on("scroll",function())( if($(document).scrollTop()>100)( $("header").removeClass("large").addClass("small") ; ) else( $("header").removeClass("small").addClass("large"); ) ));
Nếu người dùng đã cuộn hơn 100 pixel thì lớp "lớn" mà chúng tôi đã tạo sẽ bị xóa và lớp "nhỏ" mới của chúng tôi sẽ được thêm vào. Bằng cách này, menu sẽ thay đổi kích thước như chúng tôi đã xác định trước đó trong CSS. Hãy dùng thử, bây giờ nó sẽ hoạt động, nhưng bạn có thể nhận thấy rằng sự chuyển đổi giữa các lớp có vẻ rất đột ngột.
Chuyển đổi CSS cho hoạt ảnh menu
Để chuyển đổi suôn sẻ giữa các lớp trong menu của chúng tôi, chúng tôi sẽ sử dụng chuyển tiếp CSS. Chỉ cần sử dụng đoạn mã này bên cạnh phần CSS còn lại của bạn.
Header,nav, a, img, li( transition: tất cả 1s; -moz-transition: tất cả 1s; /* Firefox 4 */ -webkit-transition: tất cả 1s; /* Safari và Chrome */ -o-transition: tất cả 1 giây; /* Opera */ )
Ở đây chúng tôi đã xác định các chuyển đổi cho tất cả các thuộc tính CSS. Và
Đã thích:
26
Không thích: 12
Trong bài viết này, tôi sẽ chỉ cho bạn cách viết một plugin jQuery đơn giản để xây dựng một menu động đẹp mắt từ đánh dấu HTML thông thường. Điều đầu tiên chúng ta sẽ bắt đầu là quyết định chính xác plugin sẽ làm gì và mục tiêu của chúng ta là gì. Vì thế:
Bây giờ hãy xác định tệp nào cần được tạo để kiểm tra hoạt động của ví dụ được đề cập. Họ đây rồi:
2. jquery.dynamenu.js - mã plugin được đặt trong một tệp riêng.
3. dynamenu.css - phong cách menu của chúng tôi. Chúng tôi đặt tất cả CSS ở đây
Bạn có thể tìm thấy các tệp có menu làm việc này trong kho lưu trữ kèm theo bài viết. Ở cuối bài viết có phần minh họa trực tiếp về cách thức hoạt động của menu của chúng tôi. Xin lưu ý rằng trong bản demo, lệnh gọi plugin được đặt ở cùng vị trí với chính mã plugin. Điều này chỉ là do cơ chế demo trực tiếp mà chúng tôi sử dụng yêu cầu đặt mã JavaScript vào một khung riêng.
Hãy bắt đầu viết một plugin. Đi!
1. Chuẩn bị đánh dấu trang HTMLHãy thiết lập đánh dấu đơn giản nhất cho menu của chúng tôi. Hãy coi đây là một số mục menu cho trang web trong tương lai của chúng tôi:
Trang tin tức Hướng dẫn Photoshop Bàn chải Photoshop Phông chữ đẹp
Mọi thứ ở đây đều đơn giản - 4 phần tử div, mỗi phần tử có một lớp dynamenu, để sau đó chúng ta có thể chuyển nó làm bộ chọn cho plugin trong tương lai của mình. Bên trong mỗi div có một siêu liên kết với tên của mục menu.
2. Đặt kiểu CSSĐể tạo kiểu cho menu của chúng tôi, chúng tôi chỉ sử dụng hai kiểu CSS. Với sự giúp đỡ của họ, chúng tôi sẽ làm cho nền của từng mục menu có màu xám, chiều rộng menu 300 pixel với lề ngoài và lề trong là 5 pixel và tất cả các liên kết menu đều có màu đen:
a.mlink ( color:#000; text-trang trí:none; ) .dynamenu ( màu nền: #aaaaaa; chiều rộng:300px; lề:5px; đệm:5px; họ phông chữ: "Tahoma"; cỡ chữ: 9 điểm; )
3. Chúng tôi viết “khuôn khổ” của pluginTrước hết, hãy xác định khung plugin của chúng tôi. Khung này được lấy một phần từ trang web chính thức của jQuery và chứa cái gọi là “Các phương pháp thực hành tốt nhất” (các phương pháp và kỹ thuật tốt nhất - từ các nhà phát triển ngôn ngữ jQuery). Nói chung, một khung tương tự áp dụng cho hầu hết các plugin jQuery. Nếu bạn nhớ và hiểu cách hoạt động của khung này thì bạn sẽ có thể viết plugin “một hoặc hai lần”. Nó trông như thế này:
(function($) ( // danh sách các phương thức của plugin var Method = ( init: function(options) ( // việc khởi tạo plugin có thể được đặt ở đây. trong trường hợp của chúng tôi // để đơn giản sẽ không có gì ở đây cả), trượt: function () ( // phương thức trượt của plugin của chúng tôi sẽ trực tiếp xây dựng menu)); // “đăng ký” plugin của chúng tôi trong không gian tên jQuery. $.fn.dynamenu = function(method) ( // ở đây chúng tôi gọi hàm mong muốn phương thức bên trong plugin ) ))(jQuery) ;
Như bạn có thể thấy, không có gì phức tạp trong khung hình. Nhưng nó chứa thông tin hữu ích. Điểm quan trọng đầu tiên cần hiểu trong khung là chúng tôi thu thập tất cả các phương thức được thêm vào plugin của chúng tôi (init, slip) vào một đối tượng - các phương thức. Điều này cho phép bạn tránh làm tắc nghẽn không gian tên $.fn bằng các chức năng không cần thiết. Việc chỉ định không gian tên chính xác cho plugin của chúng tôi là một phần rất quan trọng trong quá trình phát triển plugin. Việc sử dụng không gian tên đảm bảo rằng plugin của chúng tôi ít có khả năng bị ghi đè bởi các plugin hoặc mã khác nằm trên cùng một trang HTML. Không gian tên cũng làm cho cuộc sống dễ dàng hơn vì... giúp bạn theo dõi tốt hơn các phương pháp, sự kiện và dữ liệu.
Luôn sử dụng phương thức ẩn bên trong plugin, ví dụ như trong đối tượng phương thức. Ngoài phong cách lập trình tốt, kỹ thuật này sẽ giúp bạn tránh xung đột với các thư viện và plugin của bên thứ ba khác, đồng thời cũng giúp bạn tránh làm ô nhiễm không gian tên jQuery
Điểm tiếp theo đáng chú ý là người thiết kế plugin của chúng tôi. Đây là dòng $.fn.dynamenu = function (phương thức) (...). Như bạn có thể thấy, hàm tạo lấy một tham số - phương pháp. Là một giá trị cho tham số, chúng ta sẽ truyền một chuỗi chứa tên của phương thức bên trong đối tượng phương pháp, mà chúng tôi sẽ gọi. Hãy điền vào hàm tạo với đoạn mã sau:
$.fn.dynamenu = function(method) ( if (phương thức) ( Method.init.apply(this, đối số); phương thức trả về[ phương thức].apply(this, Array.prototype.slice.call(arguments, 1)) ; ) else ( $.error("Phương thức" + phương thức + " không tồn tại!"); ) )
Hãy tìm hiểu những gì chúng tôi đã làm. Đầu tiên chúng ta kiểm tra xem một phương thức có tên được truyền trong tham số hàm tạo có tồn tại trong đối tượng không phương pháp plugin của chúng tôi. Nếu có một phương thức, trước tiên chúng ta gọi phương thức init để khởi tạo plugin, sau đó chúng ta gọi phương thức có tên được truyền trong tham số hàm tạo và chuyển tất cả các đối số còn lại cho nó. Nếu không có phương thức nào có cùng tên thì chúng tôi sẽ báo lỗi và plugin sẽ ngừng hoạt động.
Ở giai đoạn này, rất nhiều điều đã được thực hiện! Bây giờ chúng ta có thể truy cập plugin của mình và gọi các phương thức của nó, mặc dù chúng chưa thực hiện bất kỳ công việc hữu ích nào. Tôi khuyên bạn nên đặt mã plugin của chúng tôi vào một tệp riêng biệt và gọi nó là jquery.dynamenu.js. Việc đặt mã plugin vào một tệp riêng biệt là hợp lý - xét cho cùng, về bản chất, plugin phải phổ biến và cho phép chúng tôi cũng như các nhà phát triển khác kết nối nó với trang web của họ.
Bây giờ, khung của chúng ta chứa đầy mã có thể gọi các phương thức nội bộ của plugin, đã đến lúc xây dựng "phần thịt" - nghĩa là viết mã sẽ trực tiếp biến các khối div của chúng ta thành một menu động đẹp mắt. Bắt đầu nào...
4. Chúng tôi viết mã tạo menu động trong jQueryTất cả mã hữu ích của plugin của chúng tôi sẽ được đặt trong hàm trượt, đây là một phương thức nội bộ của plugin và nằm trong đối tượng phương pháp. Hãy mô tả ngắn gọn chuỗi hành động để biến đánh dấu tĩnh bằng các khối div của chúng ta thành một menu động trong jQuery:
Trên thực tế, đó là toàn bộ logic. Bây giờ hãy xem cách thực hiện điều này:
return this.each(function() ( $(this).css(("opacity://0.4")); $(this).hover(function() ( $("a.mlink", this).css (("font-weight://bold")); $(this).animate(( opacity:1, "margin-left":+=5" ), 100, "tuyến tính"); ), function( ) ( $("a.mlink", this).css(("font-weight://normal")); $(this).animate(( opacity:0.4, "margin-left:">-=5 " ), 100, "tuyến tính"); )); ));
Để đề phòng, tôi sẽ giải thích chuyện gì đang xảy ra. Vì vậy, ngay dòng đầu tiên chúng ta thấy toán tử. Nó thực hiện như sau: nó chạy qua những gì được truyền cho hàm trượt tập hợp các phần tử (tức là tất cả các khối div của chúng tôi) và thực thi mã được đặt bên trong. Sau khi chạy qua các phần tử như vậy, chúng ta trả về (câu lệnh return) kết quả của việc thực hiện các phép toán cho từng phần tử của tập hợp, một lần nữa, dưới dạng một tập hợp. Do đó, hàm trượt của chúng ta trả về một tập hợp các khối div được chuyển đến “đầu vào” của hàm, chỉ được xử lý và chuyển thành menu động. Điều này triển khai một khái niệm quan trọng của jQuery - khả năng sử dụng plugin của chúng tôi trong chuỗi cuộc gọi. Để hiểu rõ hơn chuỗi cuộc gọi là gì, đây là một ví dụ:
$(".myelm").dynamenu("sliding").css(("border" : "1px màu đỏ đậm"));
Trong đoạn mã trên, chúng ta thấy chuỗi cuộc gọi là gì: đầu tiên chúng ta chọn tất cả các thành phần trên trang có lớp myelm, sau đó chúng ta sử dụng plugin dynamenu và sau đó lại dọc theo chuỗi, chúng ta sử dụng phương thức jQuery css() tiêu chuẩn để thay đổi phong cách của các yếu tố. Nếu chúng ta không trả về cấu trúc return this.each(function() ( ... )) từ phương thức này thì chúng ta sẽ không thể sử dụng phương thức css() trong “chuỗi” nữa.
Sử dụng toán tử trả về this.each() để hỗ trợ xâu chuỗi các plugin của bạn và làm cho chúng linh hoạt hơn.
Hãy tiếp tục, bên trong toán tử each(), nơi chúng ta xem xét tất cả các khối div, chỉ có cài đặt ban đầu cho thuộc tính "độ mờ" của phần tử là 0,4. điểm. Giá trị độ mờ tối đa là 1 (100%), vì vậy chúng tôi đặt "độ mờ" thành 40%. Sau đó, chúng tôi thiết lập hai trình xử lý để “di chuột” chuột và “di chuyển” chuột ra khỏi khu vực khối div. Trong trình xử lý đầu tiên, chúng tôi đặt tiêu đề mục menu thành in đậm và sử dụng phương thức animate() để làm cho mục menu "hoàn toàn mờ" và dịch chuyển nó sang phải 5 pixel. Trong trình xử lý “rời” chuột, chúng ta chỉ cần đưa phần tử về trạng thái ban đầu - thay đổi lại phông chữ thành bình thường và dịch chuyển nó sang trái thêm 5 pixel.
Đó là tất cả! Plugin của chúng tôi đã sẵn sàng để sử dụng. Mặc dù đơn giản nhưng nó có thể rất hữu ích cho việc tạo menu động trên trang web. Dưới đây là minh họa cách plugin của chúng tôi hoạt động. Để xem kết quả của plugin, hãy chuyển đến tab Kết quả.
Chúc may mắn trong việc viết các plugin tốt! Bình luận, câu hỏi và phản hồi luôn được chào đón;)
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 (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).
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 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ể, 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
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ã:
<
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 ;
}
bảng div #menu, bảng div#menu a (
không trưng bày;
}
Div #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*/
}
Div #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 ;
}
Div #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;
}
Div #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 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 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 "
