Nieruchome menu górne (Chan Lee)

Sztuczka na nieruchome menu górne jest dosyć prosta. Sam kod nie jest wyszukany i zawiera w sobie kilka wad, ale nadal nad nim pracuję i gdy tylko nadejdzie przełom, instrukcja zostanie zedytowana. :)

1. Najpierw tworzymy pasek, który ma zostać "przyklejony" do górnej belki przeglądarki i zostać nieruchomy. Jak tego dokonać? Wystarczy wkleić ten kod: 

.tabs-outer {
background: #260404; /*kolor tła*/
position: fixed; /*pozycjonowanie nieruchome gadżetu*/
top: 0px; /*magines górny*/
left: 0px; /*margines lewy*/
width: 2000px; /*szerokość paska*/
z-index: 10;
padding: -2px; /*margines */
box-shadow: 0px 0px 14px #000; /*cień paska*/
}

Oczywiście wszystkie wartości możecie dowolnie zmieniać, dodać swoje dodatkowe właściwości i usunąć to, co uważacie za zbędne i niepotrzebne. Uprzedzam jednak, by pozostawić wartość "width: 2000px;". Niestety, nie znalazłam rozwiązania do faktu, by pasek rozciągnął się na cała szerokość okna przeglądarki; pozostaje jedynie bawienie się marginesami. Jeśli ktoś zna na to sposób, prosiłabym o jakikolwiek kontakt.

2. Nadszedł czas na stworzenie przycisków kart. Podaję przykładowy kod do wklejenia w arkusz CSS:

#PageList1 a {

background: #d08539; /*kolor tła*/
padding-bottom: -2px; /*margines dolny*/
border-radius: 0px 0px 20px 20px; /*zaokrąglenia*/
margin: 3px;
opacity: 0.7; /*przezroczystość*/
}

Tak jak wyżej, wszelkie wartości i właściwości możecie wybierać dowolnie. Wszystko zależy od waszej wyobraźni. :)

3. Do przycisków można też zrobić ciekawe efekty po najechaniu na link. Przykładowym efektem może być ten:

#PageList1 a:hover {
background: #280909 !important; /*kolor tła*/
color: #d08539; /*kolor czcionki po najechaniu na link*/
padding-top: 20px; /*margines dolny*/
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}

4. Mamy nieruchomy pasek, przyciski oraz efekty po najechaniu na link. Pozostaje teraz zabawa marginesami. Oto kod na rozmieszczenie menu górnego: 

#PageList1 {margin: -5px 0px 0px -188px;}

Pierwszy to margines górny, drugi to prawy, trzeci to margines dolny, a ten ostatni to margines lewy. Liczby ujemne też wchodzą w grę, pamiętajcie! :)

MÓJ EFEKT:

(kliknij na obrazek, by zobaczyć podgląd)