HTML #2 - Menu w HTML vol.2

(c)Jane

Dostałam propozycję, aby stworzyć menu, takie jak miałam raz u siebie na blogu. Wyglądało ono tak >>klik<<. Jest to 'w sumie' proste, bez żadnego kręcenia. Menu opiera się na gadżecie HTML/JavaScript i kodzie CSS. Zapraszam na zapoznanie się z instrukcją poniżej.

Menu "cztery małe i dwa podłużne"

1. Wchodzimy w Układ i wybieramy nowy gadżet, najlepiej jeśli będzie on w którejś z kolumn :) Wybieramy HTML/JavaScript i wklejamy do niego taki kod:

<a class='nav' href='adres-linku'>nazwa linku</a>

<a class='navi' href='adres-linku'>nazwa-linku</a>

<a class='navi' href='adres-linku'>nazwa-linku</a>

<a class='navi' href='adres-linku'>nazwa-linku</a>

<a class='navi' href='adres-linku'>nazwa-linku</a>

<a class='nav' href='adres-linku'>nazwa-linku</a>

'Adres-linku' zamieniacie na własny, wybrany link, a 'nazwa-linku' wiadomo na nazwę, jaką chcecie, aby się wyświetlała.

2.  Zapisujemy i wychodzimy z układu. Przechodzimy do Szablon>Dostosuj>Zaawansowane>Dodatkowy arkusz CSS. I piszemy następujący kod(pamiętajcie, aby modyfikować go pod swój szablon):

a.navi:link, a.navi:visited {
color: transparent !important;
text-transform: uppercase;
text-decoration: none !important;
padding: 3px;
width: 90px;
color: #fff !important;
text-align: center;
display: inline-block;
background: #981276;
margin-bottom: 3px !important;
font-size: 8pt;
 transition:all .80s;
 -moz-transition:all .80s;
 -webkit-transition:all .80s;
 -o-transition:all .80s;
}

a.navi:hover {
background: #016e17;
color: #fff !important;
 transition:all .80s;
 -moz-transition:all .80s;
 -webkit-transition:all .80s;
 -o-transition:all .80s;
}

a.na:link, a.na:visited { /*to jest kod na dłuższe linki*/
background: #016e17;
text-transform: uppercase;
text-decoration: none !important;
padding: 3px;
width: 190px; /*szerokość linków*/
color: #fff !important;
text-align: center;
display: inline-block;
margin-bottom: 3px !important;
font-size: 8pt;
 transition:all .80s;
 -moz-transition:all .80s;
 -webkit-transition:all .80s;
 -o-transition:all .80s;
}

a.na:hover {
background: #981276;
color: #fff !important;
text-decoration: none !important; /*to jest dekoracja tekstu, tu użyłam kodu, który ją usuwa/
 transition:all .80s;
 -moz-transition:all .80s;
 -webkit-transition:all .80s;
 -o-transition:all .80s;
}

3. Wciskamy "Zastosuj do bloga" i cieszymy się nowym menu.

Mam nadzieję, że pochwalicie mi się swoimi menu. Każde wartości można zmieniać do woli. Jeżeli wykonacie takie menu z pomocą mojej instrukcji, proszę o uwzględnienie tego w widocznym miejscu na blogu. Jeśli macie jakieś pytania składajcie je tutaj > klik.