Twórczy notatnik: Jak zrobić wielokolorowe menu

Jak zrobić wielokolorowe menu

środa, 15 lipca 2015

Na blogu My Pink Plum możemy (mogliśmy) zaobserwować proste, ale przyciągające wzrok menu. Wielokolorowe - każda strona ma swój kolor, zarówno przed jak i po najechaniu kursorem na nią. Dostałam od Was dużo maili na temat tego jak zrobić takie menu, a ja z chęcią taką instrukcję dla Was przygotowałam :)

1. Na początek, (jeśli mamy) musimy usunąć standardowe strony bloggera, które widnieją na naszym blogu. Przechodzimy do układ - strony - edytuj - usuń.

2. Teraz w tym samym miejscu klikamy "dodaj gadżet" i szukamy gadżetu HTML/JavaScript, a następnie wklejamy kod.

Marginesy - (margin-left) można je dostosować według własnych potrzeb
Linki i nazwa strony - tutaj nie muszę nic tłumaczyć.

Aby dodać kolejną stronę po ostatnim </a> przed </div> wklejamy

Pojawił nam się nowy kolor. "TUTAJ WPISZ SWÓJ SELEKTOR" - tutaj musimy wpisać selektor dla kolejnej naszej strony, czyli jak w poprzednich linijkach było st, str, strr, sttr, ssttr to tu może być np. kot, pies czy co tam jeszcze chcecie.

Zapisujemy nasz gadżet.

3. Dodanie kodu CSS. Jak widzimy na poniższym zdjęciu nasze strony nie wyglądają tak, jakbyś tego oczekiwali. Dlatego, musimy dodać kod CSS.

Motyw - dostosuj- zaawansowane - dodaj arkusz CSS

W arkuszu wklejamy kod:

.menu{
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
height: 30px;
width: 840px;
font-family: Verdana;
font-size:14px;
text-align:center;
background-color: transparent;
margin:0 auto;
}
a.st {
clear: both;
display: inline;
text-decoration:none;
color: #f63373;
background: transparent;
padding:10px;
}
a.st:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f63373;
padding: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.str {
clear: both;
display: inline;
text-decoration:none;
color: #526fe5;
background: transparent;
padding:10px;}
a.str:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#526fe5;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.strr{
clear: both;
display: inline;
text-decoration:none;
color:#8a2eaa;
background: transparent;
padding:10px;}
a.strr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8a2eaa;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.sttr {
clear: both;
display: inline;
text-decoration:none;
color: #8abb33;
background: transparent;
padding:10px;
}
a.sttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background: #8abb33;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.ssttr {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.ssttr:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Wszystkie pogrubione wartości są zmienne.

Szerokość
Rodzaj czcionki
Wielkość czcionki
Położenie menu
Kolor tekstu danej strony
Kolor tekstu strony po najechaniu na nią myszą
Kolor tła po najechaniu myszą
Zaokrąglenie narożników

Wspomniałam o tym, że można dopisać swoją własną stronę, ale musimy pamiętać, że dla niej też musimy stworzyć kod CSS.

a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY {
clear: both;
display: inline;
text-decoration:none;
color:#f8a43e;
background: transparent;
padding:10px;
}
a.TUTAJ NASZ SELEKTOR Z DODANEJ STRONY:hover {
display: inline;
text-decoration:none;
color:#ffffff;
background:#f8a43e;
padding:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Oczywiście wszystko musimy pozmieniać, a konkretnie to kolor tekstu i tła. Jeśli zmieniliśmy zaokrąglenia narożników, to również i tu musimy dokonać zmian.