Przejdź do treści

Menu rozwijane, otwierane, wysuwane

Pozycja absolutna

Szczególnie dla menu otwieranego dość nieprzyjemną właściwością jest fakt, że przy jego rozwijaniu elementy poniżej są przesuwane w dół. Można temu zapobiec określając odpowiednią pozycję absolutną bloku. Oczywiście można to zrobić bezpośrednio dodając odpowiednie deklaracje CSS. Jednak trzeba przewidzieć, co się stanie, jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod względem nawigacji, tzn. jego elementy (odsyłacze) będą dostępne, ale oczywiście funkcja rozwijania nie będzie działać. Jest to jednak sytuacja dopuszczalna. Natomiast niedopuszczalne mogłoby być w takiej sytuacji ułożenie wypozycjonowanego absolutnie menu, które zakrywałoby na stałe fragmenty innych elementów strony, które znajdują się poniżej określonej pozycji. Dlatego pozycję należy ustalać nie poprzez atrybut style="..." ani wewnętrzny czy zewnętrzny arkusz stylów, tylko modyfikując fragment kodu wywołujący skrypt:

<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'position: absolute');
// ]]>
</script>

Powyższy sposób pozycjonuje blok menu w miejscu, w którym został wstawiony, ale rozwijanie i zwijanie nie powoduje już żadnych przesunięć pozostałych elementów strony. Można oczywiście dokładnie ustalić pozycję bloku menu, dodając dodatkowe deklarację CSS: 'position: absolute; left: 10px; top: 100px'.

Zamiast wpisywać wprost deklaracje CSS, można podać tylko nazwę klasy CSS:

<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'menu');
// ]]>
</script>

a deklaracje przenieść do arkusza stylów:

.menu {
	position: absolute;
	left: 10px;
	top: 100px;
}

Ponieważ menu otworzy się ponad innymi elementami strony, należy zadbać, aby posiadało ustawione tło. W przeciwnym razie będzie nieczytelne!

Przykład:

Wskaż poniższy nagłówek menu myszką:




Zauważ, że po otworzeniu, menu przykrywa ten tekst.

Inicjalizacja

Domyślnie menu rozwija/otwiera/wysuwa się po załadowaniu strony, tak aby wyświetlić pozycję z odnośnikiem do aktualnie wczytanego dokumentu. Jednak czasami takie zachowanie może nie być pożądane - zwłaszcza w przypadku menu otwieranego z określoną pozycją absolutną. Wtedy po załadowaniu strony, automatycznie otwarte menu zasłania część treści, którą można zobaczyć dopiero po przeciągnięciu wskaźnika myszki nad menu. Aby zapobiec automatycznemu otwieraniu menu po załadowaniu strony, należy określić dodatkowy parametr:

<script type="text/javascript">
// <![CDATA[
new Menu('menu0', 'position: absolute', true, false, -1, -1, -1, -1, true);
// ]]>
</script>

Komentarze

Zobacz więcej komentarzy