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 
Przede wszystkim zacznę od list, ponieważ na nich oparte jest takie menu. Praktycznie każde menu to w rzeczywistości lista osadzona w selektorach
[html]<ul>
<li></li>
<li></li>
…
</ul>[/html]
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.
[html]<ul>
<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>[/html]
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.
Opublikowane w kategorii Bez kategorii