Ładne menu rozwijane można stworzyć nie tylko w JavaScript, ale także przy użyciu standardowych tagów HTML. Ta metoda tworzenia rozwijanego menu przyda się osobom, które dopiero zaczynają swoje pierwsze kroki w tworzeniu witryn i chcą uprościć pracę nad tworzeniem menu na stronach.
Instrukcje
Krok 1
W kodzie HTML takie menu jest nieuporządkowaną listą z zagnieżdżonymi listami w środku. Aby rozpocząć, utwórz plik style.css i skopiuj tam następujący kod CSS, aby nadać styl i sformatować menu:
#nav, #nav ul {
styl listy: brak;
margines: 0;
wypełnienie: 0;
obramowanie: 1px stałe # 000;
tło: # 515151;
pływak: lewy;
szerokość: 100%;
}
#nawigacja {
pływak: lewy;
pozycja: względna;
kolor tła: # 003366;
tył / ziemia: brak;
}
#nav li ul {
Nie wyświetla się;
pozycja: bezwzględna;
kolor tła: # 003366;
dopełnienie: 8px 0;
szerokość: 138px;
}
Krok 2
Teraz musimy dodać dekorację do pozycji menu. Zdefiniuj ich szerokość i wysokość, usuń linie podkreślenia, ustaw wyraźną szerokość dla każdego łącza i określ żądane kolory tła.
Krok 3
Dla wszystkich tych zmian dodaj do pliku następujący kod:
#nawiguj {
kolor: #fff;
dekoracja tekstu: brak;
Blok wyświetlacza;
szerokość: 120px;
dopełnienie: 4px 10px;
kolor tła: # 003366 powtórz-y w prawo;
}
#nav a: najedź {
kolor: # 000;
kolor tła: # 0033FF;
}
#nav li: najedź {
kolor tła: # 333333;
}
Następnie dodaj następujący fragment kodu, aby sfinalizować menu:
#nav li: najedź na li ul {
Nie wyświetla się;
szerokość: 138px;
góra: -9px;
po lewej: 133px;
}
#nav li: hover li: hover ul {
Blok wyświetlacza;
}
Krok 4
W wersji HTML ogólna nieuporządkowana lista menu wygląda tak - na jej podstawie tworzone jest menu, o którym wspomniano w artykule.
- Dom
-
Katalog
-
Wszystkie produkty
- Według daty
- Producenci
- Inny
-
