Forum Blogowe 19 lat!

Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  »  ::
Autor Wiadomość
blueberryever 
Blogger.Klub


Dołączyła: 05 Sty 2013
Posty: 36
  Wysłany:    Jak zrobić menu z przesuwającymi się linkami po najechaniu?
Bardzo bym prosiła o pomoc. Chodzi mi jak zrobić taką nawigację jak na tym blogu: http://wyimaginowana-graf....com/p/faq.html
Od czego bym musiała zacząć?

 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739
Wysłany: 2013-03-29, 21:46   
Daj mi chwilę czasu, zbuduję taką.

[ Dodano: 30-03-2013, 00:07 ]
Zbudowałem tak samo działające menu w samym HTML i CSS - różni się tylko tym, że używa wyłącznie możliwości przeglądarek, bez użycia JavaScriptu - a więc nie zadziała w Internet Explorerze poniżej wersji 10 oraz bardzo starych wersjach innych przeglądarek.

http://jsfiddle.net/lwojcik/pPPup/20/

Nie mam Bloggera i nie za bardzo jestem w stanie doradzić, jak wdrożyć to w istniejącym blogu, ale wyjaśnię krótko co się dzieje.

Po lewej kod HTML - czyli nasze menu. Zwykła nienumerowana lista zamknięta w tagu .menu.

Po prawej CSS. Tu jest kilka ciekawych rzeczy.

Reset to proste przywrócenie domyślnego wyglądu elementów na stronie - usunięcie marginesów, wypunktowań na liście, podkreślenia linków oraz tła i fontu - ustawiłem biały tekst na czarnym tle.

W .menu w menu ustawiłem tylko marginesy i szerokość elementów, więc w sumie też tylko dekoracja.

.menu a to styl pojedynczego elementu menu (linku). Wymuszamy traktowanie go jako elementu blokowego (display:block - dzięki temu można m.in. łatwo regulować marginesy i odstępy od tekstu), ustawiamy rozmiar i kolor (font-size na 12 pikseli; kolor biały, czyli #fff), estetyczne odstępy (2 piksele) oraz obramowanie po lewej stronie. Dajemy na 0 pikseli - za moment wyjaśnię dlaczego.

.menu a:hover to wygląd linka po wskazaniu na niego myszą. Co się zmieniło w stosunku do wyglądu pierwotnego?

Ustawiliśmy border-left (obramowanie po lewej) na 18px (jest ono widoczne jako ten czarny kwadrat po lewej), zmieniliśmy kolor tekstu i jego tło.

No i ostatnia kwestia - tzw. przejścia CSS. To są te powtarzające się linijki:

Kod

transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition: all 0.3s;


Przejścia w CSS odpowiadają za to, że w momencie najechania na link widzimy płynną zmianę kolorów i rozmiaru obramowania. Trzeba zrozumieć, co w tym momencie się dzieje - zmienia się szerokość obramowania (z 0px do 18px), kolor tła (z czarnego na białe) i kolor tekstu (z białego na czarny). Przeglądarka dostaje prikaz, że ma te kolory zmienić w płynny sposób w określonym czasie (u nas wynosi on 0,3 sekundy).

Przejścia zawsze operują na wartościach liczbowych - można nimi objąć tylko to, co da się wyrazić cyframi (wszelkie wielkości w pikselach - rozmiary, wysokości, szerokości, wielkości tekstu, oraz definicje kolorów - u nas obramowanie zmienia się z białego na czarne). Dlatego najpierw ustawiliśmy obramowanie na 0px, a potem znów na 18px - inaczej przeglądarka uznałaby, że w link tak naprawdę nie ma obramowania i nie miałaby z czego robić przejścia. ;)

Ta sama definicja przejścia jest powtórzona dwa razy (w .menu a i .menu a:hover - po to, by było ono widoczne zarówno przy najechaniu myszą na link, jak i po "odjechaniu" z niego.

Chrome i Firefox wciąż traktują przejścia CSS jako funkcję eksperymentalną, dlatego należy dodawać tę samą linijkę trzykrotnie w różnych wersjach. -webkit-transition to definicja przejścia dla Chrome'a, Safari i innych przeglądarek opartych o silnik Webkit, -moz-transition jest dla Firefoksa i innych opartych o silnik Gecko. Możemy ewentualnie dodać to sam dla starszych wersji Opery (-o-transition), ale Opera od dość dawna "łyka" normalną definicję przejścia (transition).

Pozostaje tylko przekopiować CSS (zawartość z prawej ramki na górze) i zmienić selektory na te odpowiadające naszemu menu (czyli wstawić coś innego zamiast .menu, jeśli w naszym szablonie jest użyta inna klasa CSS) oraz ewentualnie zmienić kolory i wielkości elementów.

Natomiast wsparcie dla Internet Explorera można dobudować w JavaScripcie, choćby za pomocą jQuery i jego funkcji .animate().
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
»  »  »  »  ::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
 Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2025 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz