ჩამოსაშლელი მენიუები გამოიყენება საიტის გვერდებზე, სივრცის დასაზოგად და ვებ რესურსის სტრუქტურის ლოგიკური წარმოდგენისთვის. ამ ელემენტის განსახორციელებლად მრავალი გზა არსებობს, ქვემოთ მოცემულია ერთ-ერთი უმარტივესი.
Ეს აუცილებელია
HTML და CSS ენების ცოდნა
ინსტრუქციები
Ნაბიჯი 1
მენიუს HTML კოდი იყენებს წყობილი სიის ელემენტებს (UL და LI), რომელთა შიგნით განთავსებულია გვერდების ბმულები. ის არ შეიცავს რაიმე რთულ სტრუქტურას. დინამიკა ხორციელდება CSS- ის საშუალებით, რომლის აღწერილობის ბლოკი მოთავსებულია უშუალოდ გვერდის კოდში. ამაში არც არაფერია განსაკუთრებული, გარდა ამისა, ტექსტში მოცემულია გარკვეული ახსნა-განმარტებები სტილის გარკვეული ბლოკებისათვის.
ნაბიჯი 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 გარდამავალი // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ჩამოსაშლელი მენიუ * {
შრიფტის ოჯახი: Verdana;
შრიფტის ზომა: 14px;
} ულ, ლი, ა {
შევსება: 0;
ჩვენება: ბლოკი;
საზღვარი: 0;
ზღვარი: 0;
} ულ {
საზღვარი: 1px მყარი #AAA;
სიგანე: 150px;
სიის სტილი: არცერთი;
ფონი: #FFF;
} ლი {
ფონის ფერი: #AAA;
პოზიცია: ნათესავი;
z- ინდექსი: 9;
შევსება: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
პოზიცია: აბსოლუტური;
ზედა: 5px;
მარცხნივ: 111px; / * IE ბრაუზერებისათვის * /
}
li.folder> ul {მარცხნივ: 140px;} / * სხვა ბრაუზერებისათვის * / a {
შევსება: 2px;
საზღვარი: 1px მყარი #FFF;
ტექსტი-დეკორაცია: არცერთი;
სიგანე: 100%; / * IE ბრაუზერებისათვის * /
ფერი: # 000;
შრიფტის წონა: სქელი;
}
li> a {width: auto;} / * სხვა ბრაუზერებისათვის * / li a {
სიგანე: 140px;
ჩვენება: ბლოკი;
} li a.submenu {
ფონის ფერი: ყვითელი;
} / * ბმულები * /
a: hover {
საზღვრის ფერი: ნაცრისფერი;
ფონის ფერი: # FF0000;
ფერი შავი;
}
საქაღალდე a: hover {
ფონის ფერი: # FF0000;
} / * საქაღალდეები * /
ul ul, li: hover ul ul {ჩვენება: არცერთი;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {ჩვენება: ბლოკი;}
- 1. გვერდი
-
2. საქაღალდე
- 2.1 გვერდი
-
2.2 საქაღალდე
- 2.2.1 გვერდი
- 2.2.2 გვერდი
- 2.2.3 გვერდი
- 2.3 გვერდი
-
3. საქაღალდე
- 3.1 გვერდი
- 3.2 გვერდი
- 3.3 გვერდი
- 4. გვერდი
ნაბიჯი 3
ამ კოდს შეგიძლიათ დაამატოთ Internet Explorer ბრაუზერების ძველი ვერსიების მხარდაჭერა - იგი ხორციელდება JavaScript– ის (პიტერ ნედერლოფის მიერ) გამოყენებით. თქვენ უნდა გადმოწეროთ ფაილი საჭირო კოდით, მაგალითად, ამ ბმულიდან - https://peterned.home.xs4all.nl/htc/csshover3.htc. ის უნდა განთავსდეს იმავე საქაღალდეში, როგორც მთავარი გვერდი. მთავარი გვერდის სტილის აღწერილობაში დაამატეთ მას ბმული - მისი განთავსება შესაძლებელია უშუალოდ გახსნის სტილის ტეგის შემდეგ
სხეული {ქცევა: url ("csshover3.htc");}
