Menu boczna "słoneczko" (Mia)

Menu boczne (Hope)

Przed najechaniem:

#PageList1 a {
background:#fff;
display:block;
text-transform:uppercase;
text-align:center;
font-family: Calibri;
font-size:9px;
color:#000;
padding:1px;
margin-top:-6px;
letter-spacing:2px;
transition:all 1s;}

Po najechaniu:

#PageList1 a:hover {
border-radius:50px;background:#453622;
border-left:solid 4px #fff;
border-right:solid 4px #fff;
transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;} 

Kolory wzięłam wprost z bloga próbnego, ale to nic, gdyż można je zmieniać, jak i inne wartości.

A teraz legenda:  

Pomarańczowy - selektor, ja użyłam kodu na strony, lecz Ty możesz np. Na etykiety.

Zielony - to są kolory, można je dobrowolnie zmieniać według uznania.

Różowy - transformacje, możesz zmienić liczbę "1" na dowolną liczbę, ale polecam cyfry 1,2.

Błękitny - border radius oznacza zaokrąglenie, również możesz zmienić liczbę na własną.

Tekst nieoznaczony żadnym kolorem polecam pozostawić takim, jakim jest.

Mam nadzieję, że się podoba ten oto prosty kodzik. No bo co mówić, jak trudny nie jest. ;)

Menu boczna w kwadracikach (Mia)

Pokażę Wam szybki sposób na tworzenie takich kwadracików w PageList1.

Pamiętacie instrukcje z kółkami? Kod wygląda praktycznie tak samo, tylko że nie dajemy BORDER-RADIUS lub zmniejszamy jego wartość od 0-10px

Kod css: (na 5 kwadracików o różnych rozmiarach)

#PageList1 a {
text-transform:uppercase;
letter-spacing:2px;
font-family:Calibri;
font-size:9px !important;}

#PageList1 {

position:absolute;

top:290px;} /*wartość do indywidualnego ustawienia u siebie na blogu*/

#PageList1 li:first-child a {
position:absolute;
top:-800px;
width: 90px;
left:320px;
height: 50px;
border-radius: 10px;
padding-top: 40px;
padding-bottom: 0px;
margin-left: 8px;
margin-bottom: 9px;
background:#000e4e ;
box-shadow:0px 0px 20px #000;
text-align: center;
display: block;
text-decoration: none;
color: #fff;
font: 11px Verdana;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;

Kilko kolorowe linki (Viper)

Takie menu składa się z dwóch część: css i linków w widgecie HTML/Java Script. Na początku stwórz widget HTML/Java Script i wklej do niego:

<a href="LINK" class="navi">NAZWA</a>

gdzie LINK - to link danej strony, a NAZWA to nazwa, jaką chcemy nadać konkretnej stronie. Taki schemat powielamy tyle razy, ile stron chcemy uzyskać.

Następnym krokiem jest css:

Menu boczne - poruszające się obrazki (Lydia)

Gdy mamy grafikę, którą chcemy umieścić w tle kart/stron >klik< możemy sprawić by po najechaniu widzieć inny jej fragment (jak środkowa karta na powyższym podglądzie). Całość opiera się na background-position, gdzie po prostu zmieniamy położenie grafiki, tak by inna jej część była widoczna. Ważne jednak by obrazek był przynajmniej dwa razy szerszy od kart/stron, ponieważ im większe przejście tym ciekawszy jest efekt.

Menu boczne z box-shadow (Lydia)

Podgląd jest powyżej, ale trudno jest go przedstawić za pomocą rysunku. Ogólnie chodzi o to, że na ramkę najeżdżają dwa cienie. Jeden z lewej strony i góry, a drugi z prawej i dołu. Na koniec zakrywają ramkę zmieniając jej kolor.

Menu boczne w kółeczkach (Mia)

Czerwoną czcionką zaznaczyłam to, co można zmieniać:

#PageList1 a {
color: #transparent; /* przezroczystość czcionki*/
width: 30px; /* szerokość*/
height: 25px; /* wysokość*/
background:#fff; /* kolor tła*/display:block;
text-transform:uppercase; /* czcionka drukowana*/border-style: solid;border-width: 2px;border-radius: 50%; /* zaokrąglenie*/
}
#PageList1 a:hover {
width: 80px;
padding: 10px;
background: #97B7EA;border-style: dashed;border-color: #97B7EA;margin-right: -60px;
 transform: translate(-20px,0px);
 -ms-transform: translate(-20px,0px); /* IE 9 */
 -webkit-transform: translate(-20px,0px); /* Safari i Chrome */
 -o-transform: translate(-20px,0px); /* Opera */
 -moz-transform: translate(-20px,0px); /* Firefox */
 transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;
 border-right: 20px #161857 solid; /* szerokość i kolor prawego boku*/
}

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. :)

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.