Gözəl bir açılan menyu yalnız JavaScript-də deyil, həm də standart HTML etiketlərindən istifadə edərək yaradıla bilər. Açılır menyu yaratmağın bu üsulu saytlar yaratmaqda ilk addımlarına yeni başlayanlar və səhifələrdə menyu yaratmaq işini sadələşdirmək istəyənlər üçün faydalı olacaqdır.
Təlimat
Addım 1
HTML kodunda belə bir menyu, içərisində iç içə siyahıları olan sıralanmamış bir siyahıdır. Başlamaq üçün style.css faylı yaradın və menyunu tərtib etmək və formatlaşdırmaq üçün aşağıdakı CSS kodunu kopyalayın:
#nav, #nav ul {
siyahı tərzi: yox;
margin: 0;
dolgu: 0;
sərhəd: 1px möhkəm # 000;
arxa plan: # 515151;
üzmək: sol;
genişlik: 100%;
}
#nav li {
üzmək: sol;
mövqe: nisbi;
arxa rəng: # 003366;
back / ground: none; yoxdur;
}
#nav li ul {
ekran: yox;
mövqe: mütləq;
arxa rəng: # 003366;
dolgu: 8px 0;
genişlik: 138 piksel;
}
Addım 2
İndi menyu maddələrinə bir az bəzək əlavə etməliyik. Onlar üçün genişliyi və hündürlüyü müəyyənləşdirin, altındakı xətləri çıxarın, hər bir keçid üçün aydın bir genişlik təyin edin və istədiyiniz fon rənglərini göstərin.
Addım 3
Bütün bu dəyişikliklər üçün aşağıdakı kodu fayla əlavə edin.
#nav a {
rəng: #fff;
mətn bəzəyi: yox;
ekran: blok;
genişlik: 120px;
dolgu: 4px 10px;
background-color: # 003366 təkrar-y sağ;
}
#nav a: hover {
rəng: # 000;
background-color: # 0033FF;
}
#nav li: hover {
arxa rəng: # 333333;
}
Sonra menyunu yekunlaşdırmaq üçün aşağıdakı kod parçasını əlavə edin.
#nav li: hover li ul {
ekran: yox;
genişlik: 138 piksel;
üst: -9px;
sol: 133 piksel;
}
#nav li: hover li: hover ul {
ekran: blok;
}
Addım 4
HTML versiyasında ümumi sıralanmamış menyu siyahısı belə görünür - məqalədə qeyd olunan menyu yaradılır.
- Ev
-
Kataloq
-
Bütün məhsullar
- Tarixə görə
- İstehsalçılar
- Digər
-
