Rozwijane menu horyzontalne CSS.
Horyzontalne menu w CSS to już nie problem. W wyszukiwarce wpisujemy frazę i w wynikach wyskakują nam adresy generatorów tworzących całkiem przyzwoite rozwijane horyzontalne menu w czystym html/css. Ustawiamy je po swojemu, ściągamy plik z kodem i wklejamy go do kodu własnej strony. Proste. Ale jak działa takie menu? To też jest bardzo proste :D
Przede wszystkim zacznę od list, ponieważ na nich oparte jest takie menu. Praktycznie każde menu to w rzeczywistości lista osadzona w selektorach
<li></li>
<li></li>
…
</ul>
Tak skonstruowana lista oczywiście wyświetla się w tradycyjny sposób: z góry na dół, z drobnymi oznaczeniami listy. Jak zrobić z niej horyzontalne menu? Należy danym cechom selektorów “ul” i “li” nadać odpowiednie wartości w css. Tak więc żeby lista wyświetlała się w poziomie, selektory <li> muszą opływać się z lewej strony co stanie się gdy nadamy im cechę “float: left” – ustawią się w poziomie. Ale wciąż będą wyświetlać się z jakimiś kropeczkami domyślnie wyświetlanymi dla list w HTML. Aby usunąć te kropeczki należy dla listy <ul></ul> przypisać cechę ”list-style: none” Żeby to wszystko wyglądało lepiej dla <li> nadajemy cechy: wysokość i szerokość za pomocą “width” i “height” oraz “text-align” którym wyrównamy tekst do środka, lewej, prawej czy jak wolimy za pomocą odpowiedniej wartości. Jeśli tekst jest za wysoko albo za nisko równamy go w pionie “padding’iem” Żeby mieć pewność że nasze komórki menu nie będą się rozciągać odkreślamy “display: block;” W ten sposób otrzymaliśmy przyzwoicie wyglądające proste menu.
A teraz rozwijanie… Jak już wcześniej wspomniałem menu to lista. To co zwykle rozwijamy w poziomych menu to też jest lista. Lista w liście.
<li>menu główne 1</li>
<ul>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
<li>rozwinięcie</li>
</ul>
<li>menu główne 2 komórka</li>
…
</ul>
Aby edytować w CSS atrybuty takiego selektora-dziecka należy jako cechę podać “li li {}” wtedy wartości przypisane będą do odpowiedniego selektora. Dlaczego nie widać drugiej listy pod-menu kiedy nie najeżdżamy na menu z którego powinna się rozwinąć? Za sprawą cechy: “display: none” której wartość nakazuje nie wyświetlenie się na stronie. Teraz już górki. Żeby lista się wyświetliła gdy nad li znajdzie się kursor dla selektora “li:hover ul” należy nadać cechę “display” o wartości “block” Lista po najechaniu na odpowiedni element menu w którym jest zagnieżdżona wyświetli się. Po zjechaniu kursora zniknie. Kolorystyka tła, typografia, szerokość, wysokość.. to już kwestia potrzeb i gustów..
Życzę powodzenia w samodzielnym tworzeniu rozwijanych poziomych menu dla waszych stron.
