Menu w nagłówku - efekt HOVER
Auteur : A J.Gdzie wstawić MENU strony gdy ukryjemy całe menu oryginalne naszej witryny?
Rozwiązaniem jest wstawienie ikonkek menu graficznych do NAGŁÓWKA STRONY. Utworzyć identyczne ikonki graficzne menu lecz już w kolorze, które ukazują się po najechaniu myszki - więc funkcja HOVER w CSS się tutaj pojawia, jako najprostszy sposób.
Należy pamiętać !!!
Ukryte całe menu całkowicie wyłącza dodawanie naszych stron i podstron do mapy witrynyy XML - należy wówczas utworzyć samemu taką mapę witryny i wrzucić jako oddzielny plik na serwer, aktualizować z czasem gdy rozbudowujemy menu, w celu zapewnienia prawidłowego działania indeksowania przez Google Analytics i inne podprogramy wpływające na pozycjonowanie strony.
-------------------------------------------------------------------------------------------------------
Przepraszam za zbyt szczegółowe rozwlekanie się, ale pisząc tutoriale nabrałem nawyku iż taka instrukcja musi być szczegółowo opisywana krok po kroku, aby nawet osoba rzadko korzystająca z komputera mogła sobie poradzić, a tez nie wiem kto to będzie później czytał.
-------------------------------------------------------------------------------------------------------
A więc tak, zaczynamy:
1. Ustawiasz się w pozycji Krok 1 - Ustawienia ogólne klikasz >>DALEJ<<
2. W pozycji wybór wzorca wybierasz Wzorzec Własny lub Wzorzec Domyślny
3. Gdy wybierzesz Wzorzec Własny przechodzisz najpierw do edycji szablonu strony kolejne przejście >>DALEJ<< wchodzisz do naszego NAGŁÓWKA STRONY. W przypadku Wzorca Domyślnego kolejne przejście dalej ustawia Cię natychmiast w NAGŁÓWKU STRONY.
4. Ukazuje się nasze miejsce pracy, pole NAGŁÓWKA STRONY. Teraz przygotuj sobie w FOLDERZE Z PROJEKTEM dodatkowy folder z grafiką (ikonki zdjęcia itp.), takie rozwiązanie polepszy Ci pracę i niczego się nie zgubi w razie "W". Pomocne to jest w trakcie przenoszenia projektów.
Przygotuj sobie własne ikonki np w dwóch wersjach kolorystyki lub nawet wielkości (po najechaniu myszki mogą się powiększać nieznacznie też miły efekt, prócz koloru). Wstawiamy swoją grafikę klikając na ikonkę u góry menu "WSTAW OBRAZ".
Ikonki swojego menu możesz ustawić w polu nagłówka bardzo dokładnie. Klikasz na wybraną ikonkę aby ją zaznaczyć. Teraz z menu u góry wybierasz pozycję "POŁOŻENIE i ROZMIAR" jest obok ikonki z podpinaniem linka. Wpisując parametry liczbowe łatwo i dokładnie sobie je można rozmieścić .
5. Gdy już całe główne menu sobie ustawisz zaznacz jedną z ikonek swojego menu, będzie podświetlona.
6. Pod plikiem obrazu ( na dole pod oknem edycji nagłówka) masz pozycję "Plik obrazu pod wskazaniem myszy" tutaj podajesz zdjęcie ikonki kolorowej lub lekko powiększonej. Dzięki temu Funkcja HOVER zadziała. Efektem po najechaniu myszki na wybraną ikonkę będzie podmiana obrazka, nadpisanie szarego na kolorowy obrazek.
"------------!!!!------------
Będąc w tej pozycji - chciałbym dodać PROŚBĘ do zespołu WEBSITEX5 oraz PROMISE - mianowicie brakuję w tej pozycji jak i w całym programie textboxa lub comoboxa z możliwością wybierania czasu (ms) opóźniania lub przyspieszania wyświetlania zdjęcia ukazującego się w trakcie najechania myszki na obiekt (tekst, obraz itp.).Znacznie by to ułatwiło i powiększyło efekty wizualne działania programu, a taki drobny dodatek dla zespołu WEBSITEX5 nie będzie problemem. Byłoby miło.
------------!!!!-------------"
Teraz aby objaśnienie w chmurce tzw TOLTIP - WSKAZÓWKA, ukazywał się u nas na stronie w tym przypadku MENU w nagłówku strony w odwróconej pozycji trzeba coś zmienić. Domyślnie chmurka ukazuje się nam w całym projekcie skierowana do dołu a my chcemy aby była z góry.
(Należny pamiętać że zmiana ustawienia chmurki - WSKAZÓWKI - będzie dotyczyła całego projektu strony, nie tylko samego nagłówka. W przepadku gdy będziemy chcieli zamieścić inny rodzaj objaśnienia w chmurce trzeba skorzystać wówczas z HTML i CSS i stworzyć własny rodzaj podpowiedzi, wskazówki).
Więc przechodzimy do kolejnych kroków Zmiany ustawień objaśnień w chmurce - WSKAZÓWKA:
1. Wchodzimy do pozycji KROK 4 - Ustawienia zaawansowane
2. Wchodzimy do pozycji STYLE i MODELE (Literka A)
3. W stylach i modelach wybieramy zakładkę WSKAZÓWKA EKRANOWA
4. Tutaj zmieniamy sobie styl pozycji: 1-Góra, wówczas nasza chmurka będzie pojawiała się u góry naszego obiektu (obrazek, tekst itp.)
W ten sposób udaj się nam stworzyć, nowo wyglądające Menu z efektami wizualnych przejść - miłe dla oka i upieksza naszą stronkę. Możecie równiez dopracować własne grafiki, wówczas efekt będzie napewno świetny i zachwyci Wszystkich a również Was samych.
Podobny efekt na podanej stronie: http://danila-a.com/index.html
Jesli tutorial był pomocny będe wdzięczny za pozytywwną ocenę i dziekuję Wam za każdy oddany głos.
Pozdrawiam Adam-AIGM:):)