HTML #1 - Menu w HTML

(c)Evelyn

Kolejna instrukcja związane z menu. Tym razem sięgamy jednak po nieco inne środki, a konkretniej po gadżet zwany HTML/JavaScript. Takie menu wygląda bardzo ładnie, kiedy: wykonujemy szablon minimalistyczny, mamy stosunkowo krótkie tytuły linków i pragniemy zaoszczędzić na przestrzeni w naszej pracy. Przybywam do was więc właśnie z instrukcją na wcześniej opisane menu.

Zapraszam do zapoznania się z nią.

Live podgląd >> klik.

1. Pamiętamy o wcześniejszym przygotowaniu kolorków, których użyjemy do wykonania menu. Ja wybrałam odcienie fioletu [#9999FF, #3333CC, #6666FF]

2. Kiedy już jesteśmy przygotwani, możemy zaczynać.Wchodzimy w Układ>Dodaj gadżet>HTML/JavaScript.

3. Wpisujemy taki oto kod:

<a class='navi' href='#'>Link 1</a>

<a class='navi' href='#'>Link 2</a>

<a class='navi' href='#'>Link 3</a>

<a class='navi' href='#'>Link 4</a>

<a class='navi' href='#'>Link 5</a>

<a class='navi' href='#'>Link 6</a>

Zamiast  "#" wpisujecie swój dowolny adres strony, a zamiast Link1 itp. wpisujecie własne nazwy linków.

Osobista dygresja: zawsze to menu lepiej wygląda, gdy mamy parzystą liczbę linków.

4. Klikamy zapisz i ustawiamy gadżet w odpowiednim dla nas miejscu. 

5. Następnie wchodzimy w Motyw>Dostosuj>Dodaj arkusz CSS.

6.  Kiedy mamy wolny arkusz, bierzemy się za kod(tłumaczenia szczegółowe na samym dole):

a.navi:link, a.navi:visited {

  display: inline-block;

  text-transform: uppercase;

  font-size: 10px;

  width: 97px;

  text-align: center;

  color: #9999FF;

  background: #3333CC;

  border-bottom: 2px solid #6666FF;

  padding: 3px 0;

  margin: 1px 0;

  text-decoration: none !important;

  letter-spacing: .5px;

  transition:all .60s;

-moz-transition:all .60s;

-webkit-transition:all .60s;

-o-transition:all .60s;

}

a.navi:hover {
  box-shadow: 0px -50px 0px #6666FF inset;
  color: #3333CC;
  transition:all .60s;
-moz-transition:all .60s;
-webkit-transition:all .60s;
-o-transition:all .60s;
}

7. Klikamy "Zastosuj do bloga" i ta-dam! mamy menu w HTML.

navi - jest to klasa naszego gadżetu;

display - pozycjonowanie, wyświetlanie

inline-block - jest to sposób pozycjonowania/wyświetlania, oznacza to, że element zostanie wyświetlony w linii poziomej
text-transform - jest to zmiana tekstu; możemy wpisać: lowercase a nasz tekst będzie pisany małymi literami, uppercase(jak w przykładzie) tekst będzie wielkimi literami, none nic nie zostanie zmienione, tekst będzie taki jak go wpisaliśmy
width - jest to szerokość komórek menu; jaką wartość byśmy nie wpisali każdy link będzie miał taką samą szerokość
border - ramka
border-bottom - do border możemy dopisać jedną z czterech wartości - left, right, bottom, top zależenie co wpiszemy z tej strony pojawi się część ramki; w przykładzie mamy border-bottom więc ramka pojawia się tylko na dole komórki
margin - jest to margines; {możecie dowolnie zmieniać wartości

padding - jest to w pewnym sesnie margines, działa on jednak wewnątrz komórki { możecie zmieniać

font-size - rozmiar czcionki; można zapisywać w: px, pt i procentach; {możecie dowolnie zmieniać

font-family - jest to font, czyli czcionka, jakiej używamy, polecam najbardziej Arial, jeżeli chodzi o strony
text-decoration - dekoracja tekstu; w naszym przypadku przy tworzenia menu w HTML zawsze pojawia nam się podkreślenie linku po najechaniu na niego

transition - efekt animacji, przejścia; możemy go zobaczyć gdy najedziemy na element myszką {możecie zmieniać wartość, czyli 1s

:hover - to właśnie za pomocą tego selektora następuje efekt transition

:visited - oznacza już odwiedzony link; kiedy zapisujemy go z tym samym kodem co :link oznacza to, że odwiedzony link i jeszcze nieodwiedzony link, będą wyświetlane w taki sam sposób

background-position - jest to pozycja obrazka w tle; możemy to określać słowami tak jak w podanym przeze mnie przykładzie, czyli "center top" co oznacza, że pokaże nam środkowo-górną część obrazka, można też posługiwać się wartościami w pikselach, ale jest to bardziej czasochłonne i męczące {możecie zmieniać

text-shadow - jest to cień tekstu; pierwsza i druga wartość oznaczając, w którą stronę będzie padać cień, w przykładzie pada w dół na prawo; trzecia wartość oznacza rozproszenie cienia, co oznacza, że im większa wartość tym bardziej rozproszony będzie cień {możecie zmieniać

box-shadow - jest to cień pojawiający się pod wybranym przez nas gadżetem; wpisujemy go w następujący sposób: selektor { box-shadow: /*wartości(pion)*/2px /*(poziom)8/2px /*(rozmycie cienia)*/3px /*kolor*/ #fff;} Tłumaczenie: poziom - przesuwanie cienia w prawo(wpisując wartości ujemne przesuwamy go w lewo), pion - przesuwanie cienia z dołu na górę(wpisując ujemne wartości cień przesuwa się na odwrót - z góry na dół), rozmycie - promień efektu rozmywać(jak bardzo rozmyty będzie cień), kolor - dodajemy go sami, jeśli go jednak nie dodamy, będzie taki sam jaki kolor ma element

Mam nadzieję, że instrukcja wam się podobała. Jeśli coś jeszcze jest nie jasne piszcie w komentarzach. 

Do następnego postu! ;>