Menu boczne (Chan Lee)

Całkiem fajna sztuczka, nie jest też strasznie trudna. Wystarczy wkleić dwa kody: kod pierwszy stworzy nam całe menu, które możemy oczywiście dostosować, kod drugi zapewni nam ciekawe przejścia po najechaniu na zakładkę. Zaczynamy? Ogólnie rzecz biorąc w takim menu najważniejszych jest kilka rzeczy - zaokrąglenie kart, kolory i ramki. Wystarczy tylko trochę pokombinować, dodać jeszcze inne kody (np. cień tekstu, cień ramek, linie kreskowaną itp.) i zawsze wyjdzie ciekawe menu. Jeśli chcemy rozmieścić go tam gdzie chcemy, możemy pobawić się marginesami.

#PageList1 {margin: 0px -20px -12px -22px;}

Pierwszy to margines górny, drugi lewy, trzeci dolny, czwarty prawy. Wszystkie parametry można zmienić, liczą się także liczby ujemne! 

KOD 1:

#PageList1 li a:link, #PageList1 li a:visited {
background: #353752; /* kolor tła */
opacity: 0.5; /* przezroczystość*/
color: #fff; /* kolor czcionki*/
text-align: center; /* wyśrodkowanie tekstu*/
font-size: 12px; /* wielkość czcionki*/
font-family: Georgia; /*nazwa czcionki*/
display: block;
margin-right: -5px; /*prawy margines*/
border-radius: 20px; /*zaokrąglone rogi*/
padding: 5px; /* tekst nie przykleja się do ramek*/
text-transform: uppercase; /*czcionka drukowana*/
margin: -6px; /*odstęp między kartami*/
}

KOD 2

#PageList1 li a:hover {
background: #fff; /* kolor tła */
color: #353752; /* kolor czcionki */
border-left: 30px solid #353752; /*grubość, styl i kolor bocznej ramki*/
border-right: 30px solid #353752;  /*grubość, styl i kolor bocznej ramki*/
margin: -6px;  /*odstęp między kartami*/
margin-left: 0px; /*margines lewy*/
margin-right: -5px; /*margines prawy*/
transition:all 0.7s;
-webkit-transition:all 0.7s;
-moz-transition:all 0.7s;
-o-transition:all 0.7s;
}