Wysuwane menu

Hej, dzisiejsza instrukcja to jedna z najciekawszych. Tak się okazało, że Zaczarowane obchodzą ważny dzień i pomyślałam, iż należałoby opublikować coś specjalnego...
Menu wysuwane nie jest spisem rozdziałów. Wygląda jak gadżet stron, ale różni się jedną cechą. Po najechaniu na nie kursorem wysunie się dodatkowa lista, zawierająca inne linki. Zrobiłam takie coś na Zaczarowanych Szablonach, Zaczarowanych Instrukcjach oraz na blogu próbnym <tu>.
Akurat za chwilę podam kod do ostatniego menu. Nie martwcie się - wszystko możecie zmienić - obramowanie, kolory podświetlonego tekstu, podświetlonego tła... (Uznałam po prostu, że czerń i biel to takie dwa uniwersalne kolory) W najbardziej strategicznych miejscach wpisałam podpowiedzi (zamknięte pomiędzy znakami /* oraz */). Dobrze, iż bardziej wprawieni użytkownicy będą potrafili z łatwością dostosować wygląd tego dodatku. Gorzej się ma sprawa z nowicjuszami, ale sądzę, że w poprzednich notach zawarłam przydatne do edycji informacje.
Oto kod, który trzeba skopiować:

<style>

/* Some stylesheet reset */

.fin, .fin ul {

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: 1;

}

/* Wygląd główny */

.fin {

    /* Marginesy i obramowanie */

    display: block;

margin-left: 290px;

    position: static; top center;

    height: 34px;     /* wysokość */

    width: 370px; /* Zmień to, jeśli chcesz, żeby menu było szersze lub usuń całkowicie, jeśli chcesz, aby długość menu przybrała wartość &quot;domyślną&quot; (żeby menu było tak długie, jak pozwala na to zawartość */

    border-radius: 0px;     /* Wpisz większą wartość, jeżeli chcesz mieć zaokrąglone rogi */

    border: 1px solid #fff;     /* kolor i grubość zwykłego obramowania */

    /* Tło oraz efekty podświetlenia linku */

    background: #000000; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */

    background: -webkit-linear-gradient(bottom, #000000, #000000); /* Tło dla Chrome i Safari */

    background: -moz-linear-gradient(bottom, #000000, #000000); /* Tło dla Firefoxa */

    background: -o-linear-gradient(bottom, #000000, #000000); /* Tło dla Opery */

    background: -ms-linear-gradient(bottom, #000000, #000000); /* Tło dla IE10 */

    box-shadow: inset 0 0px 0 ;     /* Cień menu */

}

.fin&gt;li {

    display: block;

    position: relative;

    float: left;

    margin: 0;

    padding: 0 1px 0 0;

}

/* Główne linki */

.fin&gt;li&gt;a {

    /* Layout */

    display: block;

    padding: 9px 34px;

    /* Styl napisów */

    font-family: Arial, sans-serif;

    font-size: 15px;

    font-weight: normal;

    text-decoration: none;

    color: #fff;

    text-shadow: 0 0px 0 #fff;

    /* Efekty */

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}

/* Stan linków głównych po najechaniu na nie kursorem */

.fin&gt;li&gt;a:hover, .fin&gt;li:hover&gt;a {

    background: #000;     

    background: rgba(255, 255, 255, .6);

    color: #fff;

   

}

.fin&gt;li:first-child&gt;a {

    border-top-left-radius: 3px;

    border-bottom-left-radius: 3px;

}

.fin&gt;.dropdown&gt;a {

    padding-right: 26px;

}

.fin ul {

    position: relative;

    position: absolute;

    left: -9999px;

    display: block;

    box-shadow: 0 0px 0px rgba(0, 0, 0, .1);

}

/* Level 1 podmenu */

.fin&gt;li&gt;ul {

    padding-top: 0px;

    z-index: 99;

    border-top: 1px solid #fff;

    top: 34px;

}

/* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */

.fin&gt;li:hover&gt;ul {

    left: -1px;

}

/* Level 2+ podmenu */

.fin ul ul {

    left: -9999px;

    top: 0px;

    z-index: 999;

}

/* Sprawianie, że lvl 2+ menu wysuną się po najechaniu kursorem */

.fin ul&gt;li:hover&gt;ul {

    left: 120px;

    top: -1px;

}

/* Zawartość linków z podmenu */

.fin ul li {

    position: relative;

    display: block;

    border-left: 1px solid #fff;

    border-right: 1px solid #fff;

    /* Tworzenie efektu wysunięcia. Lista elementów, która się wysunie, ma 0 wysokości. Pojawi się dopiero wtedy, kiedy najedziemy kursorem w odpowiednie miejsce */

    height: 0px;

    -webkit-transition: height .3s;     /* Szybkość wysunięcia dla poszczególnych przeglądarek */

    -moz-transition: height .3s;

    -o-transition: height .3s;

    -ms-transition: height .3s;

}

/* Wysunięta lista linków */

.fin li:hover&gt;ul&gt;li {

    height: 35px;

}

.fin ul li:hover&gt;ul&gt;li:first-child {

    height: 36px;

}

/* Linki podmenu */

.fin ul li a {

    /* Styl */

    display: block;

    width: 145px;     /* Jeśli w podmenu napiszemy zbyt długi wyraz i nam go ucina, zwiększamy wartość szerokości */

    padding: 10px;     /* Odstęp od brzegów wysuniętej listy - od wszystkich krawędzi: prawej, lewej, górnej, dolnej */

    border-bottom: 1px solid #fff;

    /* Styl napisów */

    font-size: 15px;

    color: #fff;

    font-family:  Arial, sans-serif;

    text-decoration: none;

   

    /* Efekty tła */

    background: #000;

    -webkit-transition: background .3s;

    -moz-transition: background .3s;

    -ms-transition: background .3s;

    -o-transition: background .3s;

    transition: background .3s;

}

/* Stan napisów, kiedy najedziemy kursorem na linki */

.fin ul li&gt;a:hover, .fin ul li:hover&gt;a {

    background: #e9e9e9;

    color: #000;

}

.fin ul ul&gt;li:first-child&gt;a {

    border-top: 1px solid #fff;

}

.fin ul&gt;li:last-child&gt;a {

    border-bottom: 1px solid #fff;

}

.fin ul&gt;.dropdown:hover&gt;a::after, .fin ul&gt;.dropdown&gt;a:hover::after {

    border-color: #fff;

}

</style>

<ul class='fin'>

    <li><a href='#'>Planety</a>

    <ul>

        <li><a href='http://google.pl'>Ziemia</a></li>

        <li><a href='http://google.pl'>Jowisz</a></li>

        <li><a href='http://google.pl'>Merkury</a>

   

            </li>

        </ul>

</li>

    <li><a href='http://google.pl'>Księżyc</a></li>

    <li><a href='#'>Reszta</a>

<ul>

        <li><a href='http://google.pl'>Galaktyki</a></li>

        <li><a href='http://google.pl'>Mgławice</a></li>

<li><a href='http://google.pl'>Latające koty</a>

       

   

            </li>

        </ul></li>

</ul>




Proszę zwrócić uwagę na ostatnie fragmenty kodu. Tutaj rozpisujemy nasze "drzewko". Polecam zaplanowanie wszystkich linków już na samym początku (ja często rysowałam menu na kartce), ponieważ później układanie ich idzie łatwiej.

Najgorszy sposób nauczenia się konstruowania tego czegoś, to przepisywanie wszystkiego z głupa. Ślęczałam nad tym chyba ze dwa tygodnie, ponieważ nie starałam się dowiedzieć, o co chodzi. Kiedy przysiadłam na trzy godziny i skupiłam się, wszystko stało się łatwiejsze...

W lvl 1 mamy zakładkę "Planety". Od niej wychodzą trzy linki. "Księżyc", w odróżnieniu od pierwszej i ostatniej zakładki nie ma wysuwanej listy - dałam to tak dla przykładu.

Kod można wkleić (Szablon -> Edytuj kod HTML) tuż pod znacznikiem <header> (wtedy menu będzie nad nagłówkiem) lub nad </header> (będzie pod nagłówkiem). Nie można wyśrodkować tego gadżetu (a przynajmniej mi się jeszcze nie udało, ustawiałam wszystko marginesami - jak na to wpadnę, to, oczywiście, dopiszę).

Jeśli korzystacie z menu, wrzućcie link do Waszego bloga w komentarzu. Byłoby miło. xD

(Pewnie plotę trzy po trzy, bo jestem taaka padnięta... Ale chciałam dodać tę notę, żeby później móc kombinować z szablonem - czcionka jest słabo widoczna).

Gdyby ktoś miał problemy z edytowaniem lub wstawieniem (lub dalej nie rozumiał tego mojego biadolenia), to proszę się dopytywać o szczegóły (pod tą notką, oczywiście). Chętnie pomogę.

Pozdrowienia dla Ab, chociaż i tak tego nie przeczyta. XD