Menu động là gì. Chúng tôi tạo ra một menu năng động và sống động. Viết code tạo menu động trong jQuery

/* 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 bằng 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à

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 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ể, 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 "

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.

< 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 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 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("default").disabled=false;
document.styleSheets("alternate").disabled=true;" >
< a >Mặc định

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

< li onclick = "document.styleSheets("alternate").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.

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
Ở 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 bị 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.

• Internet
• Chương trình
• Hướng dẫn
• Trình duyệt
• Windows 10
• Android
• iOS
• Sự liên quan

Những ghi chú cuối cùng

Cài đặt firmware chính thức trên Samsung Galaxy A3

Cách mở MMS trên điện thoại: mẹo thiết lập MMS trên Nokia Lumia 720, cách mở

Báo động mất điện GSM đơn giản

Chuyển đổi PDF sang JPG

Tôi có thể tải hình ảnh đẹp miễn phí cho blog của mình ở đâu?

Phổ biến

Luôn ẩn danh trực tuyến

Loại bỏ hoàn toàn Internet explorer

Cách giảm font chữ khi liên hệ

Tin tức

2024-02-29 02:08:31

Tệp tương tự dxf đối tượng ba chiều

2024-02-29 02:08:31

Từ vob đến avi trực tuyến. Chuyển đổi VOB sang AVI. Thêm tập tin AVI và chỉnh sửa chúng

2024-02-28 01:56:26

Lời khuyên khi chọn máy quét

2024-02-28 01:56:26

Lập hồ sơ và gỡ lỗi các ứng dụng PHP với xhprof & FirePHP

2024-02-28 01:56:26

Đối tượng cấu hình “Thư mục” là một đối tượng ứng dụng và được thiết kế để hoạt động với danh sách dữ liệu