CSS - menu ukryte

0

Witam,

mam takie pytanie na temat menu. Chciałbym zrobić coś takiego, a mianowicie, mam sobie menu, które jest w belce na górze strony, pod nim jest druga belka pusta, która chciałbym aby się wypełniała dodatkowymi opcjami po kliknięciu na górne menu. Czy można coś takiego zrobić w CSS ?

0

Można, ale to bardziej zaawansowana technika i ma pewne ograniczenia. Łatwiejszą i lepiej poznaną techniką byłoby pokazanie podmenu w momencie najechania myszą na jakąś opcję w głównym menu (czyli potoczne "przy :hoverze" :) ). Coś takiego z hoverem opisano i zaimplementowano wieku temu na ALA, w tym artykule:

http://www.alistapart.com/articles/hybrid/

Na dole masz link do dema:
http://www.alistapart.com/d/hybrid/hybrid-4.html

Co do opcji z klikaniem, to robi się to w miarę podobnie. Ale musisz użyć pseudoklasy :target z CSS3 ( http://www.w3.org/TR/selectors/#target-pseudo ).

Musisz także odpowiednio przygotować kod HTML. Pierwszy link w głównym menu musi mieć atrybut href równy #podmenu-1, drugi link #podmenu-2 i tak dalej. A więc linki muszą one wskazywać na elementy zawierające poszczególne podmenu. Czyli element (pewnie będzie to lista <ul>) zawierające podmenu, które ma się wyświetlić po kliknięciu pierwszego linka, musi mieć id równe podmenu-1. Podmenu, które ma się wyświetlić po kliknięciu drugiego linka ma mieć ID równe podmenu-2 i tak dalej.

Wróćmy do CSS. Podmenu normalnie muszą być ukryte (wygodnie będzie dać wszystkim podmenu jakąś klasę, np. podmenu ;) ). Można to zrobić na wiele sposobów, choćby dając im display: none. I teraz, żeby kliknięte podmenu było pokazane, wybierz je za pomocą selektora .podmenu:target.

Ja zalecam bawienie się tym co najmniej średnio-zaawansowanym. Więc jeśli nie wiesz jak np. wypozycjonować podmenu tak, by wszystkie były wyświetlane w tym samym miejscu, to pewnie za wcześnie na takie sztuczki.

Podobny efekt można oczywiście osiągnąć za pomocą prostego JavaScriptu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1