Podczas tworzenia menu strony można spotkać się z problemem ograniczonej przestrzeni, koniecznością zaoszczędzić miejsce i uniknąć gromadzenia się nadmiaru informacji. Wszystko to wygodnie jest rozwiązany elementami, które czają się, kiedy nie są potrzebne. Jeśli chcesz uniknąć używania skryptów, to menu można utworzyć za pomocą środków html i css.
Instrukcja
1
Skomponuj menu, określić jego strukturę. Umieść elementy w dogodnym dla przyszłego użytkownika kolejności. Zastanów się nad zrozumiałe i literat nazwami partycji. Określ elementy, które muszą być rozwijanego, i poddziałania, które będą w tych listach rozwijanych.
2
Złóż придуманную strukturę za pomocą znaczników html. To będzie wyglądać następująco:
- Link 1.
- Link 2.
- Pkt 2.1.
- Punkt 2.2.
- Pkt 2.3.
- Link 3.
- Punkt 3.1.
- Punkt 3.2.
- Punkt 3.3.
- Pkt 3.4.
3
Umieść wszystkie menu w bloku
. Ustaw identyfikator id, co pozwoli w przyszłości przypisać cechy tylko tego bloku, bez wpływu na pozostałe. Identyfikator powinien zawierać pewną nazwę, właściwości, do którego należy opisać w następujących kroków.
. Ustaw identyfikator id, co pozwoli w przyszłości przypisać cechy tylko tego bloku, bez wpływu na pozostałe. Identyfikator powinien zawierać pewną nazwę, właściwości, do którego należy opisać w następujących kroków.
4
Stwórz listy, gdzie
- – sama lista, a
- – każda z jego wierszy. Dodaj do wszystkich przyszłych ссылкок, które powinny tworzyć rozwijane menu, listy z elementów składowych. Zmień nazwy elementów menu w linki, zawierając je w tagu . Zmień jego ustawienia href adres strony, na którą wskaże link.
5
Ustaw właściwości listy za pomocą css, dokonując ich w css-plik: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Zadaj sobie równe zero wcięcia padding – wcięcie wewnątrz i margin – wcięcie na zewnątrz elementu listy. Wprowadź list-style – styl listy punktowanej, domyślnie z punktami, które w przypadku wartości none są sprzątane. Wprowadź szerokość width listy.
6
Dodaj właściwości elementu listy: #vmenu ul li { position:relative; }. Wprowadź opcję pozycjonowania, czyli położenia elementów position. Nadaj mu wartość względna relative, aby określić położenie menu rozwijanego stosunku do oryginalnego. Wytwarzane w menu pionowym.
7
Określ właściwości listy, znajdującego się w elemencie innej listy: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Ustaw opcję pozycjonowania position wartość absolute, aby wykonywać absolutne pozycjonowanie podmenu dotyczące pozycji menu. Określ położenie za pomocą wcięcia przestrzeni z lewej strony left i top top. Określ ustawienie wyświetlania elementu display none, ponieważ początkowo rozwijana lista nie powinna być widoczna.
8
Wprowadź ustawienia dla linków: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Ustaw opcję wyświetlania display wartość block, składające element blokowo. Przy tym jest on widoczny i zachowuje się jak jednostka. Ustaw wcięcie padding, kolor tekstu, linki color, kolor tła background, styl linki text-decoration. Wartością none usuwa podkreślenie domyślnie.
9
Zdefiniuj akcję przy najechaniu: #vmenu li:hover ul { display: block; }. Wprowadź, że po najechaniu na wiersz listy li, ul, znajduje się w nim, staje się widoczny.
10
Dodaj na życzenie ustawienia koloru lub obrazu tła, poziome rysy, czcionki linków i inne właściwości, które określają wygląd menu.
Należy zwrócić uwagę
Ta metoda rozwiązania, niestety, nie działa dla starszych wersji przeglądarki Internet Explorer.
Kategoria:
Programowanie stron internetowych
