HTML #3 - Menu w HTML vol.3

(c)erenae

Hejka. Dzis przybywam z instrukcją na coś prostego na kogoś kto ogarnął własność position oraz podstawy tworzenia menu w gadżecie HTML/JavaScript. A więc, dzisiaj zajmiemy się menu HTML/JavaScript, ale nieruchomym. Może wydawać się trochę skomplikowane, lecz naprawdę takie nie jest.

Poniżej mamy przykład takiego menu:

Cały haczyk tkwi w tym, że menu znajduje się cały czas u góry strony, co oznacza, że jest ono nieruchome. Takie coś sprawdza się dobrze w minimalistycznych szablonach. Zacznijmy więc omawiać i analizować kody.

1. Pierwsze czym musimy się zająć to stworzenie sobie naszej sekcji z menu, wyglądać to będzie tak:

<div class="menu">
<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>
</div>

Teraz, gdy już mamy taki kod, wklejamy go do gadżetu HTML/JavaScript. Przy czym "#" zamieniamy na wybrany adres linku, a zamiast "Link 1, 2 etc" napiszcie nazwę linku.

2. Teraz zajmiemy się umieszczeniem i wyglądem całej naszej sekcji "menu". Wchodzimy w Układ > Dostosuj > Zaawansowane > Arkusz CSS.
Pierwsze co to musimy 'zakotwiczyć' nasze menu, żeby cały czas - nawet kiedy przewijamy stronę w dół - było u góry. Do tego używamy własności position dopisując wartość fixed. To ten krótki kodzik position: fixed; stoi za tym, że nasze menu trzyma się cały czas u góry. Musimy jeszcze dodać wygląd, więc razem będzie wyglądać to tak:

.menu {
  position: fixed;
  display: block;
  width: 100%;
  top: 0px;
  left: 0px;
  background: #2a2a2a; /*tło menu*/
  padding: 15px 0; /*padding od góry i dołu*/
  text-align: center; /*wyśrodkowanie tekstu*/
  z-index: 1;
  border-bottom: 3px solid #000; /*dolna ramka*/
  box-shadow: 0px 3px 0px #222; /*zewnętrzny cień*/
}

> display: block - oznacza to, że zablokowaliśmy naszą sekcję
> width: 100% - szerokość menu będzie na całą stronę, nie trzeba się męczyć co do piksela
> op, left - aby menu było zaraz na krawędziach wewnętrznych strony, ten dwie właściwości                  musimyokreślić do 0
> z-index: 1; - określa czy menu będzie chowało się za np. kolumną bądź postami, wystarczy dopisać 1 do menu, natomiast do postów 0;
Po wpisaniu tego kodu, nasze menu jest już zakotwiczone u góry, jakoś wygląda.

3. Teraz jedyne co zostało to dopisać kod do linków, żeby jakoś wyglądały.

a.navi:link, a.navi:visited {
  text-decoration: none !important;
  color: #777;
  background: #222;
  display: inline-block;
  margin: 0 1px;
  padding: 7px 0;
  width: 100px;
    transition: all .50s ease-in-out;
  -o-transition: all .50s ease-in-out;
  -moz-transition: all .50s ease-in-out;
  -webkit-transition: all .50s ease-in-out;
}

a.navi:hover {
  color: purple !important;
  background: #999;
  box-shadow: inset 1px 1px 0px purple, inset -1px -1px 0px purple, inset 4px 4px 0px #777, inset -4px -4px 0px #777;
  color: #000;
  transition: all .50s ease-in-out;
  -o-transition: all .50s ease-in-out;
  -moz-transition: all .50s ease-in-out;
  -webkit-transition: all .50s ease-in-out;
}

> display: inline-block - zablokowaliśmy linki i będą one stały koło siebie, w jeden lini, zamiast             pokazywać się jak w liście jeden pod drugim
> width - ustawiamy szerokość pod swojego zapotrzebowania, aby wszystkie linki w menu miały taką samą szerokość
> margin: 0 1px - dodajemy margin, aby utworzyć odstęp między linkami, żeby się nie "całowały", z góry i z dołu jest nam niepotrzebny, więc zostawiamy 0(chyba, że nasze menu ma dwie linijki linków), jednak po bokach warto dodać ten 1px

Jeśli mielibyście jakieś pytania zadawajcie je w komentarzu lub z zakłdce "Pytania".