X

<WebWord/>

yt tw fb
Menu rozwijane
Tworzymy je z zagnieżdżonej, nieuporządkowanej listy odsyłaczy. Proces twprzenia go jest bardzo podobny do tworzenia zwykłego menu. Różnica jest taka, że elemnty wysuwane to zagnieżdżona lista, która wyświetla się po najechaniu na elemnt nadrzędny - będzie służyć do tego pseudoklasa
:hover
Kroki by otrzymać menu rozwijane
  1. Nieuporządkowana lista odsyłaczy

    <ul> <li>
    Opcja 1
    </li> <li>
    Opcja 2
    </li> <li>
    Opcja 3
    </li> </ul>

  2. Menu poziome

    a
    {
    display
    :
    inline-block
    ; }
    li
    {
    display
    :
    inline
    ; }

  3. Formatowanie w CSSie

    a
    { format kolorów, marginesów, ramek, podkreśleń, czcionek itd. }
    li
    {
    display
    :
    inline
    ; }
    ul
    {
    list-style-type
    :
    none
    ;
    margin
    :
    10px
    ;
    padding
    :
    5px
    ; }

  4. Pozycjonowanie

    ul
    {
    position
    :
    relative
    ; }
    ul ul
    {
    position
    :
    absolute
    ;
    top
    :
    100%
    ; }

  5. Ustawienie odpowiedniego display na elementach menu zagnieżdzonego

    ul ul
    {
    display
    :
    none
    ; }
    ul ul a
    {
    display
    :
    none
    ; //ukrycie menu podrzędnego stylizacja }

  6. Menu podrzędne ma się pokazywać po najechaniu myszy na nadrzędny - wykorzystaujemy pseudoklasę
    :hover


    ul li
    :hover >
    ul
    {
    display
    :
    block
    ; //teraz po najechaniu myszy menu pokaże się }





Przykładowe menu poziome - rozwijane:




Przykładowe menu pionowe - rozwijane:



backPowróć do menu głównego HTMLback

Drogi uĹźytkowniku!

W trosce o komfort korzystania z naszego serwisu chcemy dostarczać Ci coraz lepsze usługi. By móc to robić prosimy, abyś wyraził zgodę na dopasowanie treści marketingowych do Twoich zachowań w serwisie. Zgoda ta pozwoli nam częściowo finansować rozwój świadczonych usług.

Pamiętaj, że dbamy o Twoją prywatność. Nie zwiększamy zakresu naszych uprawnień bez Twojej zgody. Zadbamy również o bezpieczeństwo Twoich danych. Wyrażoną zgodę możesz cofnąć w każdej chwili.

 Tak, zgadzam się na nadanie mi "cookie" i korzystanie z danych przez Administratora Serwisu i jego partnerĂłw w celu dopasowania treści do moich potrzeb. Przeczytałem(am) Politykę prywatności. Rozumiem ją i akceptuję.

 Tak, zgadzam się na przetwarzanie moich danych osobowych przez Administratora Serwisu i jego partnerĂłw w celu personalizowania wyświetlanych mi reklam i dostosowania do mnie prezentowanych treści marketingowych. Przeczytałem(am) Politykę prywatności. Rozumiem ją i akceptuję.

Wyrażenie powyższych zgód jest dobrowolne i możesz je w dowolnym momencie wycofać poprzez opcję: "Twoje zgody", dostępnej w prawym, dolnym rogu strony lub poprzez usunięcie "cookies" w swojej przeglądarce dla powyżej strony, z tym, że wycofanie zgody nie będzie miało wpływu na zgodność z prawem przetwarzania na podstawie zgody, przed jej wycofaniem.