7/03/2014

Płynnie chowający się pasek nawigacyjny

Czasami pasek nawigacyjny przeszkadza w wyglądzie bloga, ale można temu zaradzić. Nie trzeba go od razu usuwać, a można sprawić, aby płynnie wysuwał się lub pojawiał po najechaniu!
Najpierw trzeba wejść do arkusza CSS, instrukcja gdzie go znaleźć tutaj. Jeżeli nie masz dużej wiedzy na temat CSS, albo żadnej- przejdź na koniec notki, gdzie podane są już gotowe kody. Na początku tłumaczę.

Pojawiający się pasek nawigacyjny:

ID paska nawigacyjnego to zawsze Navbar1, więc tak zaczniemy:

Navbar1 {
}

Teraz trzeba nadać widoczność 0 na pasku nawigacyjnym, na którym nie znajduje się kursor.

#Navbar1 {
filter:alpha(opacity=0);
opacity: 0.0;
-moz-opacity: 0.0;
}

Wszystkie wartości 0 można zmienić na dowolne, musza być jednak takie same. Np:

filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;

sprawi, że przed najechaniem pasek będzie widoczny w połowie.

Ale aby pasek pojawił się po najechaniu, trzeba skopiować to, co napisaliśmy wcześniej:

#Navbar1 {
filter:alpha(opacity=0);
opacity: 0.0;
-moz-opacity: 0.0;
}

wkleić pod spodem oraz dodać hover i zwiększyć wartości. Wygląda to tak:

#Navbar1:hover {
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
}

Ostatecznie kod wygląda w ten sposób:

#Navbar1 {
filter:alpha(opacity=0);
opacity: 0.0;
-moz-opacity: 0.0;
}
#Navbar1:hover {
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
}

Kombinacje są różne. Może być na początku słabo widoczny, a później bardziej; na początku w ogóle, a po najechaniu słabiej... Jednak to nie koniec, miało być płynnie, więc trzeba dodać animację w obu kodach. Jeżeli nie doda się w kodzie z hover, to po zjechaniu kursorem z paska od razu zniknie, nie będzie animacji. Robimy więc tak:

#Navbar1 {
filter:alpha(opacity=0);
opacity: 0.0;
-moz-opacity: 0.0;
transition-duration:1s;
-webkit-transition-duration:1s;
}
#Navbar1:hover {
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
transition-duration:1s;
-webkit-transition-duration:1s;
}

W ten sposób pasek pojawia się płynnie. Czas również można regulować, jednak czas we wszystkich transition musi być taki sam.

Wysuwający się pasek nawigacyjny:

ID paska nawigacyjnego to dalej Navbar1, więc zaczniemy przez napisanie:

Navbar1 {
}

Teraz trzeba wsunąć pasek nawigacyjny do góry:

#Navbar1 {position: relative;
top:-25px;
}

Pasek nie może być całkowicie schowany, ponieważ trzeba na niego najechać, aby się wysunął, a jak go schowamy, nie będzie takiej możliwości. Dlatego pozostawiłam 5px, na które można najechać. Czas dodać animację:

#Navbar1 {position: relative;
top:-25px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

Teraz trzeba wszystko skopiować i za Navbar1 dodać hover i z -25px zrobić 0. W ten sposób pasek się rozwinie po najechaniu.

#Navbar1:hover {position: relative;
top: 0px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

Kod ostatecznie wygląda tak:

#Navbar1 {position: relative;
top:-25px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

#Navbar1:hover {position: relative;
top: 0px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

I ponownie:

Kod na znikający pasek:

#Navbar1 {
filter:alpha(opacity=0);
opacity: 0.0;
-moz-opacity: 0.0;
transition-duration:1s;
-webkit-transition-duration:1s;
}
#Navbar1:hover {
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
transition-duration:1s;
-webkit-transition-duration:1s;
}

Kod na wysuwający się pasek:

#Navbar1 {position: relative;
top:-25px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

#Navbar1:hover {position: relative;
top: 0px;
transition-duration:1s;
-webkit-transition-duration:1s;
}

Jeżeli coś nie działa- pisać w komentarzach, a postaram się pomóc.
Kod może nie działać w niektórych przeglądarkach, które go nie obsługują- chodzi tu o przezroczystość i animację, ale jak ktoś na bieżąco je aktualizuje, nie powinno być problemu.

Aby dodatkowo upiększyć swój pasek, można tez zmienić jego kolor lub dodać tło obrazkowe.

2 komentarze:

  1. hej. wklejam te kody i coś mi nie dziala. albo ja jestem takim tepakiem albo kody sa lewe ;d

    OdpowiedzUsuń
    Odpowiedzi
    1. Sama je używam i normalnie działają :p
      Prawdopodobnie kod nie skopiował się do końca/gryzie się z innym/wymieszał się z resztą. Ogólnie nie umiem powiedzieć w czym jest problem, bo nie wiem co dokładnie zostało u ciebie wklejone.

      Usuń