ლამაზი ჩამოსაშლელი მენიუ შეიძლება შეიქმნას არა მხოლოდ JavaScript- ში, არამედ სტანდარტული HTML ტეგების გამოყენებით. ჩამოსაშლელი მენიუს შექმნის ეს მეთოდი გამოდგება მათთვის, ვინც ახლახანს იწყებს საიტის შექმნის პირველ ნაბიჯებს და სურს გვერდებზე მენიუს შექმნის მუშაობის გამარტივება.
ინსტრუქციები
Ნაბიჯი 1
HTML კოდში ასეთი მენიუ არის დალაგებული სია, შიგნით ჩასმული სიები. დასაწყებად შექმენით style.css ფაილი და დააკოპირეთ შემდეგი CSS კოდი მენიუს სტილისა და ფორმატისთვის:
# ნავი, # ნავ ულ {
სიის სტილი: არცერთი;
ზღვარი: 0;
შევსება: 0;
საზღვარი: 1px მყარი # 000;
ფონი: # 515151;
ათწილადი: მარცხენა;
სიგანე: 100%;
}
#nav li {
ათწილადი: მარცხენა;
პოზიცია: ნათესავი;
ფონის ფერი: # 003366;
უკან / ადგილზე: არცერთი;
}
#nav li ul {
ჩვენება: არცერთი;
პოზიცია: აბსოლუტური;
ფონის ფერი: # 003366;
შევსება: 8px 0;
სიგანე: 138px;
}
ნაბიჯი 2
ახლა მენიუს ელემენტებს უნდა დავამატოთ გარკვეული დეკორაცია. განსაზღვრეთ სიგანე და სიმაღლე მათთვის, წაშალეთ ხაზგასმული ხაზები, დააყენეთ წმინდა სიგანე თითოეული ბმულისთვის და მიუთითეთ სასურველი ფონის ფერები.
ნაბიჯი 3
ყველა ამ ცვლილებისთვის, ფაილს დაამატეთ შემდეგი კოდი:
# ნავა ა
ფერი: #fff;
ტექსტი-დეკორაცია: არცერთი;
ჩვენება: ბლოკი;
სიგანე: 120px;
შევსება: 4px 10px;
background-color: # 003366 განმეორებით-y მარჯვნივ;
}
#nav a: hover {
ფერი: # 000;
ფონის ფერი: # 0033FF;
}
#nav li: hover {
ფონის ფერი: # 333333;
}
შემდეგ დაამატეთ კოდის შემდეგი ნაწილი მენიუს დასასრულებლად:
#nav li: hover li ul {
ჩვენება: არცერთი;
სიგანე: 138px;
ზედა: -9px;
მარცხნივ: 133px;
}
#nav li: hover li: hover ul {
ჩვენება: ბლოკი;
}
ნაბიჯი 4
HTML ვერსიაში ზოგადი დალაგებული მენიუს სია ასე გამოიყურება - მის საფუძველზე იქმნება მენიუ, რომელიც აღნიშნულ იქნა სტატიაში.
- მთავარი
-
კატალოგი
-
Ყველა პროდუქტი
- თარიღის მიხედვით
- მწარმოებლები
- სხვა
-
