Dynamiczne ustawienia menu. Przejścia CSS dla animacji menu
Nie wszystkie szablony oferują możliwość korzystania z wbudowanego menu dynamicznego, gdy najechanie kursorem myszy na element menu powoduje wyświetlenie ukrytych podmenu wraz z rozwijaną listą. Menu statyczne mogą oczywiście być samowystarczalne, pod warunkiem, że struktura Twojej witryny będzie składać się tylko z kilku sekcji. Jest to jednak typowe tylko dla witryn z wizytówkami. Z reguły szanująca się strona internetowa ma dość rozgałęzioną strukturę, co samo w sobie zmusza do uciekania się do rozwijanych menu, ponieważ szerokość lub wysokość strony internetowej nie jest nieskończona i nie będzie w stanie umieścić wszystkich elementów w jednej linii (przypadek pozycja pozioma menu) lub w jednej kolumnie (case menu pionowe). Ponadto zauważono, że użytkownicy nie respektują menu, które mają więcej niż 5-10 pozycji, czytanie niekończącej się listy pozycji menu na stronie staje się dla nich męczące, opuszczają ją nawet nie dochodząc do ostatniej pozycji, nawet, być może, razy to, czego szukali w Twojej witrynie. Dlatego potrzeba dynamicznego menu jest bardzo poważnie uzasadniona. Istnieje specjalne przedłużenie, który jest zainstalowany w Twojej Joomla i pozwala na tworzenie i projektowanie menu według własnego uznania w trybie projektowania. Ale nawet jeśli nie potrzebujesz menu dynamicznego, wystarczy Ci statyczne lub wybrany szablon witryny już je posiada, nie spiesz się z ignorowaniem tego tematu. W każdym razie pozwoli ci to lepiej zrozumieć specyfikę aplikacji internetowych, gdy sam będziesz pracować w programie Swmenufree.
Com_swmenufree5.2_J1.5Jest to nazwa wtyczki, którą stąd pobieramy i instalujemy w sposób, który jest nam już znany na naszej stronie. Po instalacji wybierz „SwMenuFree” w menu „Komponenty” i przejdź do panelu sterowania tego programu. Mamy okno z wieloma ustawieniami i zakładkami „Opcje modułu”, „Wymiary i położenie”, „Kolor i tło”, „Czcionki i wcięcia”, „Obramowania i efekty”. Nie powinieneś szczególnie przestraszyć się mnóstwem konfigurowalnych parametrów, ale od razu dokonajmy rezerwacji: czeka nas twórcza praca.
W wierszu „Nazwa modułu” od razu wpisujemy nazwę menu, które będziemy tworzyć. Ta nazwa jest ważna dla systemu, a nie dla nas, ponieważ po utworzeniu menu o tej nazwie nadal nie będziesz widzieć menu swojej witryny na liście. Faktem jest, że nie tworzymy nowego menu jako takiego, ale konwertujemy zawartość któregokolwiek z już utworzonych na nową, dynamiczną wersję. Dla przejrzystości użyliśmy nazwy „Menu dynamiczne”.
W wierszu „Źródło menu” wybierz „Trans Menu”, ponieważ ta opcja ze wszystkich trzech możliwych jest najbardziej optymalna dla naszego szablonu. Ci, którzy nie wierzą, niech spróbują reszty, aby ostatecznie zgodzić się z naszą wersją.
Linia „Źródło menu” pozwala nam wybrać z listy to, co już jest istniejące menu witryna, w której chcemy się zaprezentować widok dynamiczny. Właściwie wybór nie jest duży, bo nadal mamy tylko jedno menu – Main, o nazwie systemowej mainmenu. Wybieramy go z tej listy.
W linii „Parent” pozostawiamy wartość TOP. Oznacza to, że nasze menu nie jest gałęzią podrzędną, ale samo w sobie pełni rolę rodzica, zdolną do „odradzania” innych gałęzi menu.
Przejdźmy do kolejnego bloku ustawień – „Opcje arkusza stylów”. W linii „Wczytaj tabelę” wybierz „Zaimplementuj styl bezpośrednio na stronę”, dzięki temu nasze menu będzie mogło używać dokładnie tych stylów projektowania, które sami dla niego ustawimy, ignorując style narzucone przez szablon witryny.
W wierszu „Przyrostek klasy modułu” nie piszemy nic.
Ignorujemy następny blok „Ustawienia buforowania”.
Blok " Wspólne parametry moduł". Umieść pola wyboru, jak pokazano na rysunku.
Zablokuj „Umieszczenie i dostęp”. W wierszu „Umieszczenie modułu” umieszczamy nagłówek1 (jest to pozycja menu poziome przewidziany tego szablonu. Nawiasem mówiąc, obecnie mamy tam moduł wyszukiwania w witrynie, więc najpierw będziesz musiał go przełączyć na inną pozycję - baner).
Innych ustawień w tej zakładce nie dotykamy, choć na stronie mamy tylko jedno menu, nie mają one żadnego znaczenia, a ustawione w nich domyślne wartości są dla nas w pełni zadowalające. Jeśli jednak chcesz, aby Twoje menu główne wyświetlało się nie na wszystkich stronach serwisu, a tylko na kilku, wybierz to, czego potrzebujesz w bloku „Wyświetl moduł menu na stronach”.
Przejdź do następnej zakładki - „Wymiary i położenie”. Tutaj możemy skonfigurować wysokość, szerokość elementów menu i podmenu, a także sposób ich rozmieszczenia na stronie.
Blok „Pozycja i orientacja menu”. W wierszu „Menu - Wyrównanie:” umieść w lewo, ponieważ Wyrównanie tekstu menu do lewej strony uważa się za optymalne. W wierszu „Menu / Podmenu - Orientacja:” wybierz poziom/dół/prawo (poziomo-dół-prawo). Nie zapomnij kliknąć przycisku „Wyświetl” po każdej zmianie ustawień. Po czym zobaczysz swoje menu w osobnym oknie, w którym funkcjonuje i wygląda tak, jak będzie wyglądać na stronie po zapisaniu wyników. Po podziwianiu możesz zamknąć to okno.
Zablokuj „Rozmiary elementów menu”. Tutaj wszystkie wartości wynoszą zero, co oznacza, że elementy menu są dopasowywane do rozmiaru zawartego w nich tekstu. Jest to dla nas bardzo dobra opcja, ponieważ... tworzymy menu poziome i w nim, w przeciwieństwie do pionowego, wszystkie elementy nie powinny być tej samej wielkości.
W blokach „Menu Przesunięcia”. Najwyższy poziom" i "Przesunięcia podmenu" możesz ustawić wielkość przesunięcia pozycji menu względem siebie. Chociaż nie ma takiej szczególnej obiektywnej potrzeby.
Zakładka „Kolor i tło”. Tutaj zaczyna się zabawa. Tutaj musimy wykazać się maksymalną kreatywnością, projektując wszystkie elementy naszego menu w kolorach harmonizujących z tłem szablonu strony. Tło pozycji menu można wypełnić kolorem i obrazami (pomyśl o programie PowerPoint!). Co więcej, wypełnienie obrazem ma dominujące znaczenie nad wypełnieniem kolorem: jeśli wypełnisz obiema opcjami, wynikowym wypełnieniem będzie obraz. Ponieważ nie mamy żadnych obrazów, na razie pominiemy blok „Obrazy tła”. A w bloku „Kolor tła” zaczynamy pracować. Tuż poniżej znajduje się paleta wyboru kolorów oraz podpowiedź jak to zrobić: „Wybierz kolor z palety i kliknij przycisk Wybierz obok pola, do którego chcesz zastosować wybrany kolor.”
Nie zapomnij za każdym razem sprawdzić wyników. Przekonaj się sam, jakie kolory wybrać, ale mimo wszystko lepiej będzie, po obejrzeniu w osobnym oknie, kliknąć przycisk „Zapisz” i przejść do strona główna strona (jeśli pracujesz z witryną w dwóch zakładkach - stronie głównej i panelu administracyjnym - jak początkowo sugerowaliśmy, to przejście do sąsiedniej zakładki przeglądarki nie będzie trudne), aby na własne oczy zobaczyć, jak wybrany kolor pasuje tło szablonu witryny.
Ale nie możemy wykorzystać wszystkich możliwości.
Zmiana struktury menuNajpierw wchodząc na stronę główną widzimy, że mamy dwa główne menu: jedno to nowe, nad którym obecnie pracujemy, drugie to stare, które znajduje się na swoim miejscu po prawej stronie strony. Nie zdziw się, jeśli menu się nie powielą, jedno z nich musi zostać wyłączone, czyli stare, a raczej moduł do jego wyświetlania musi zostać wyłączony. Przejdź do „Rozszerzenia” - „Moduły” i wyłącz moduł „Menu główne”, klikając zielony znacznik wyboru w jego linii, zamieniając go w czerwone kółko z białym krzyżykiem. Przechodzimy do zakładki, w której otwarta jest strona główna i widzimy, że zostało już tylko jedno menu.
Po drugie, nie możemy dostosować wyglądu podmenu, ponieważ jeszcze ich nie mamy. Dlatego musimy przebudować strukturę naszego menu tak, aby główne elementy stały się podpunktami.
Aby to zrobić, przejdź do menu ustawień: „Menu” - „Menu główne”. Oto lista pozycji menu głównego. Dwa z nich zostawmy jako główne, a resztę przenieśmy do podmenu. Będziemy musieli kolejno otwierać każdy z elementów menu głównego „skazani” na rolę podmenu i w wierszu „Pozycja menu nadrzędnego” kliknąć na element, którego podmenu tworzymy ten element. Rysunek pokazuje już wynik pięciu kolejnych selekcji dla każdego elementu (poprzednie główne elementy „Forum”, „Galeria”, „Pobierz”, „Blog kategorii”, „Demonstracja”, którego elementem nadrzędnym był wcześniej niewidoczny element „Top” , stały się „dziećmi” » pozycja główna „Możliwości”).
Aby lepiej zrozumieć mechanizm tych zmian, zalecam, aby po każdej zmianie statusu pozycji menu i zapisaniu jej przejść na stronę główną, nacisnąć klawisz F5 i przyjrzeć się wynikowi. Myślę, że dwa, trzy razy wystarczą. Można pójść jeszcze dalej i jeszcze bardziej skomplikować menu, na przykład czyniąc podpozycję „Ładowanie” rodzicem dwóch ostatnich elementów. Dzięki temu w naszym menu będziemy mieli trzystopniową hierarchię.
Liczba poziomów, które można w ten sposób utworzyć, nie jest ograniczona, ale nie zaleca się tworzenia więcej niż trzech poziomów.
Teraz wracamy do panelu sterowania SwMenuFree i dostosowujemy pozostałe elementy podmenu, a także kolor czcionki i kolor obramowania w odpowiednich blokach o tej samej nazwie w zakładce „Kolor i tło”. Należy doprecyzować, że kolor menu, podmenu oraz czcionkę ustala się dla dwóch opcji: poza kursorem oraz gdy kursor myszy najedzie na podpozycję (pozycję i jej zawartość). Te kolory oczywiście muszą być różne.
Zakładka „Czcionki i wcięcia”. Tutaj możesz wybrać rodzaj czcionki i wcięcia od krawędzi komórki menu do tekstu tej komórki. Polecam nie zmieniać tutaj niczego poza grubością czcionki, ponieważ zwykły styl czasami łączy się z tłem wypełnienia (w bloku „Gęstość czcionki” wybierz pogrubienie).
Karta Obramowania i efekty. Zdjęcie przedstawia nasze ustawienia.
Kliknij Zapisz. Menu jest gotowe. Nie musisz już przechodzić do panelu sterowania SwMenuFree, chyba że zdecydujesz się zmienić kolor projektu bieżącego szablonu lub podczas zmiany szablonu strony, ponieważ Jednak ustawienia wyglądu menu nie są zapisywane.
Ale nie rozważaliśmy jeszcze możliwości wypełnienia tła wzorem.
Wypełnienie tła menu wzoremTa metoda jest bardziej skomplikowana, ale możliwości projektowania są nieograniczone. Do tworzenia obrazków posłużymy się GIMP-em (pamiętam, że na lekcji 5 używaliśmy go do stworzenia logo strony internetowej, a raczej próbowaliśmy je stworzyć).
Musimy stworzyć przezroczysty obraz o wymiarach 200 × 200 pikseli. „Plik” - „Utwórz”.
Ustawienia okna dialogowego jak na obrazku. Teraz weź narzędzie „Zaznaczanie prostokątne” (naciśnij klawisz R) i narysuj na naszym przezroczystym obrazie ramkę zaznaczenia o szerokości 100 pikseli i wysokości 25 pikseli. Na pasku narzędzi w wierszu „Rozmiar” po poruszeniu myszą widoczne są zmieniające się liczby określające wysokość i szerokość utworzonego zaznaczenia; w zależności od tych wartości kierujemy myszką w tę lub inną stronę, aż wartości wynoszą odpowiednio 100 i 25 pikseli. Powstałe zaznaczenie powinniśmy wypełnić kolorem ciemnobrązowym, korzystając z narzędzia Wypełnienie płaskie (Shift+B) i zaznaczając żądany kolor w palecie. Paletę można wyświetlić na ekranie, klikając prostokąt koloru pierwszego planu na pasku narzędzi. (Ogólnie rzecz biorąc, wszystkie przyciski panelu mają podpowiedzi; wystarczy przytrzymać kursor na dowolnym istotnym elemencie panelu – natychmiast pojawi się podpowiedź).
W palecie należy kliknąć kursorem na odpowiedni kolor i zgodzić się z wyborem. Następnie kliknij wewnątrz zaznaczenia, a zostanie ono wypełnione wybranym kolorem.
Teraz musimy zaznaczyć pasek o grubości 3 pikseli wzdłuż dolnej krawędzi naszego wypełnienia. Robimy to tak jak właśnie zaznaczyliśmy pierwszy obszar, skupiając się na liczbach na pasku narzędzi (w linii „Rozmiar”). Jeśli zwolniłeś już kursor, a liczby nadal nie są takie same, powiedzmy mniej więcej niż potrzeba, przesuń kursor do granicy zaznaczenia. Gdy tylko zmieni kształt, naciśnij lewy przycisk myszy i przeciągnij kursor w dół lub w górę. Puszczając myszkę, widzimy, że w ten sposób zwiększyliśmy lub zmniejszyliśmy obszar zaznaczenia. Spróbujmy ponownie, dostosowując obszar zaznaczenia do potrzebnego rozmiaru. Wypełnij go pomarańczą.
Teraz uczyń warstwę częściowo przezroczystą: menu „Okna” - „Panele” - „Warstwy”. W panelu, który się pojawi, widzimy prostokąt aktualnej warstwy, zaznaczamy go klikając i przesuwając suwak w linii „Krycie” tak, aby wartość wyniosła 80. Nasze wypełnienie stało się trochę przezroczyste. Teraz z całego tego wypełnienia musimy wyciąć cienki pasek o wysokości 25 pikseli i szerokości 3 pikseli. Bierzemy narzędzie „Przytnij” i podobnie jak poprzednio w przypadku narzędzia do zaznaczania, pokrywamy pożądany prostokąt, ponownie skupiając się na wymiarach w panelu. Jeśli chybimy, poprawiamy błąd, tak jak przy selekcji; jeśli chodzi o poprawianie błędów, są to narzędzia identyczne. (Aby pracować z małymi obiektami, lepiej zwiększyć skalę obrazu do 200-400%. Rozwijana lista z możliwymi rozmiarami skali znajduje się na pasku stanu okna obrazu, trudno ją przeoczyć.) Po wymagane rozmiary osiągnięty, kliknij wewnątrz wybranego prostokąta i uzyskaj nasz pierwszy gotowy obraz przycisku menu. Nie zdziw się, że jest taki mały, przeglądarka powtórzy go tyle razy, ile będzie konieczne, aby wypełnić cały obszar przycisku. Zapisujemy go w formacie .png na Pulpicie pod nazwą a2.
Utwórz kolejny prostokątny obraz o wymiarach 25 na 3 piksele, wypełniony tylko jednolitym brązowym kolorem, takim samym jak pierwszy. Zapisz go pod nazwą a1.png.
Przejdź do panelu administracyjnego serwisu i uruchom SwMenuFree. Zakładka „Kolor i tło”. Zablokuj „Obrazy tła”. Linia „Menu – tło:”, przycisk „Wybierz”. Teraz musimy przesłać nasze zdjęcia na stronę. W wyświetlonym oknie kliknij przycisk „Przeglądaj”. Wskazujemy nasz obraz a1.png na Pulpicie i klikamy przycisk Prześlij. Jest pobierany do folderu na stronie. Aby wstawić go jako tło pozycji menu, kliknij bezpośrednio na obraz przesłany do serwisu i kliknij OK. Robimy to samo, ale tylko w wierszu „Menu - tło po najechaniu myszką:” z obrazem a2.png.
Jeśli wszystko zostało wykonane poprawnie, efektem było bardzo oryginalne menu: w stanie cichym menu jest monochromatyczne, a po najechaniu kursorem na dole pozycji menu pojawia się pomarańczowy pasek. Gdy szybko poruszasz myszą po menu, pasek ten szybko przebiega przez całe menu.
Pytania kontrolne:Prawdopodobnie widziałeś dynamiczne i animowane menu na niektórych stronach internetowych, które zmieniają się w miarę przewijania w dół. Minimalizując główne menu nawigacyjne, zostawiasz więcej miejsca na treść. W tym samouczku wyjaśnimy, jak samodzielnie stworzyć menu, korzystając z HTML5, CSS3 i odrobiny jQuery.
Jeżeli zależy Ci na szczególnym skupieniu się na zawartości witryny, a także umożliwieniu stworzenia większej i bardziej efektownej nawigacji przy pierwszej wizycie użytkownika na stronie, to tego typu menu jest dla Ciebie idealne. Możesz doskonale zaprezentować swoją markę lub logo, a po pierwszym spojrzeniu na witrynę zredukować niektóre elementy, pozwalając użytkownikowi skupić się na Twoich treściach.
Można to zrobić na kilka sposobów. W tym samouczku wyjaśnimy, jak tworzyć stałe menu całą szerokość strony, która zmienia wysokość wraz z logo, tworząc zminimalizowaną wersję oryginału. W razie potrzeby logo można także zastąpić inną opcją, np. inicjałami lub ikoną, jednak należy pamiętać, że tutaj bardzo ważna jest spójność, aby użytkownik zrozumiał, jak element się zmienił i jakie jest jego główny cel nadal jest nawigacją witryny.
Tworzenie podstawowej struktury w HTML5
Zaczniemy od stworzenia podstawowego kodu HTML, którego będziemy potrzebować. Na początek będziemy trzymać się bardzo prostej struktury HTML5.
Teraz, gdy już napisano nasz początkowy kod HTML, dodamy kod menu, a także inne szczegóły nagłówka naszego pliku HTML.
Jak stworzyć animowane menu | Magazyn WebDesign
- dom
- Artykuły
- To bardzo fajna strona!
Przewiń w dół i zobacz, jak zmienia się menu
Wszystko! Przybyliśmy!
W naszym: Dodaliśmy metatag dla autora, wskazujący twórcę dokumentu, po czym dodaliśmy słynny „reset CSS” Erica Meyera, który zresetuje prawie każdy element w pliku HTML, zapewniając czystszy i łatwiejszy w obsłudze dokument z. A ponieważ będziemy później używać JQuery, w ostatniej linii naszego głównego elementu zaimportujemy go poprzez CDN JQuery.
W naszym tagu użyliśmy domyślnego elementu HTML5. Nasz będzie zajmował całą szerokość strony i będzie odpowiedzialny za zmiany pomiędzy dużą i małą wersją menu. Dajemy naszej klasę o nazwie „large”, abyśmy mogli zmienić pewne specyficzne właściwości w CSS, aby zmienić nasze menu w mniejszą wersję. To jest nasze menu kontenerowe, które zawiera obraz logo naszej witryny oraz prostą, nieuporządkowaną listę menu z trzema linkami.
Ponieważ nie mamy tutaj żadnej treści, zostanie to użyte do rozciągnięcia strony i wymuszenia przewijania, aby zadziałało.
I to wszystko, jeśli chodzi o część HTML. Teraz musimy wystylizować elementy za pomocą CSS i nadać menu dynamiczność.
Stylizacja menu i stron
/* Importuj czcionkę Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Styl główny */ body( kolor tła: #ebebeb; ) ul( float: w prawo; ) li( display: inline; float: w lewo;) img.logo(float: w lewo;) /* Rozmiar i centrowanie menu * / nav(szerokość: 960px; margines: 0 auto;)
Trochę tego CSS sprawi, że nasze menu będzie miało szerokość 960px pośrodku, jednocześnie organizując nasze menu po prawej stronie i logo po lewej stronie. Zaimportujemy także czcionkę Amaranth z czcionek internetowych Google, aby użyć jej w tekście na stronie.
Sekcja.stretch( float: lewa; wysokość: 1500px; szerokość: 100%; )section.stretch p(rodzina czcionek: "Amaranth", bezszeryfowa; rozmiar czcionki: 30px; kolor: #969696; wyrównanie tekstu: środek; pozycja: względna; margines górny: 250px; ) sekcja.stretch p.bottom ( góra: 100%; )
W tym przypadku po prostu rozciągamy stronę, aby zachęcić do przewijania i ustawiamy tekst tak, aby wskazywał początek i koniec treści.
Nagłówek (tło: #C7C7C7; obramowanie dolne: 1px stałe #aaaaaa; pływak: lewy; szerokość: 100%; pozycja: stała; indeks Z: 10; ) nagłówek a(kolor: #969696; dekoracja tekstu: brak; rodzina czcionek: „Amaranth”, bezszeryfowa; transformacja tekstu: wielkie litery; rozmiar czcionki: 1em; ) nagłówek a.active, nagłówek a:hover( kolor: #3d3d3d; ) nagłówek li(margines-right: 30px; ) /* Wymiary większego menu */ header.large( wysokość: 120px; ) header.large img( szerokość: 489px; wysokość: 113px; ) header.large li(górny margines: 45px; )
W tym miejscu kończymy podstawową stylizację naszego nagłówka. będzie służyć jako pojemnik na nasze menu. Będzie zawierał nasz element i będzie służył jako element, w którym definiujemy kolor tła, wysokość menu, styl menu linków i inne. Dostosuje się do szerokości ekranu z właściwościami szerokości: 100% i pozostanie niezmieniona w przypadku innych elementów witryny. Ważne jest, aby pamiętać o ustawieniu indeksu Z tak, aby element nachodził na resztę strony, a także pozycji:fixed, aby element div był zakotwiczony u góry i pozostawał w tej samej pozycji podczas przewijania strony przez użytkownika. strona internetowa. Jak widać, oprócz ustawiania stylów nagłówków, za pomocą pliku header.large ustawiamy także pewne specyficzne style dla klasy „large”. Początkowy stan naszego menu będzie duży, dlatego definiujemy tutaj tylko niezbędne style, aby wyglądało tak, jak chcemy, gdy użytkownik po raz pierwszy wejdzie na stronę.
Dynamiczna zmiana rozmiaru menu
Nasze menu jest gotowe i stylizowane, ale nadal chcemy popracować nad jego minimalizmem. Aby stworzyć ten „stan”, utworzymy nową klasę CSS o nazwie „small”, która będzie odpowiedzialna za zmianę właściwości, które musimy zmodyfikować. Zdefiniowaliśmy już duże menu, więc teraz musimy tylko skrócić nasze menu, proporcjonalnie zmniejszyć nasz obraz i (górny margines) użyć w naszych elementach
/* Rozmiary mniejszego menu */ header.small( wysokość: 50px; ) header.small img( szerokość: 287px; wysokość: 69px; górny margines: -10px; ) header.small li(górny margines: 17px; )
Jak więc widać, style te są prawie identyczne z tymi w większym menu, po prostu zmieniliśmy klasę „duży” na „mały” i zmieniliśmy używane wartości na mniejsze. Używamy ujemnych marginesów na obrazie, aby wycentrować go w pojemniku, ponieważ obraz ma cienki cień i jest wyższy niż napis, aby go pomieścić. Teraz mamy wszystkie niezbędne style, aby dostosować menu zmiany rozmiaru, a jeśli spróbujesz to zmienić w swoim , w przeglądarce zobaczysz, że menu zmniejszy się. Musimy jednak zachować dynamikę.
Zmiana klasy menu za pomocą jQuery
Po wprowadzeniu wszystkich naszych stylów wystarczy dodać trochę kodu JavaScript, aby przełączać się między „dużymi” i „małymi” klasami. Ponieważ chcemy to zmienić w oparciu o przewijanie użytkownika, użyjemy funkcji .ScrollTop() w jQuery. Ta funkcja pozwoli nam uzyskać lub ustawić pozycję przewijania w pikselach. Pozycja przewijania to liczba pikseli, które zostały już przewinięte w oknie przeglądarki. W tym przypadku musimy tylko wiedzieć, ile pikseli przewinął użytkownik, abyśmy mogli wywołać nasz kod i przełączać się między klasami:
$(dokument).on("przewiń",funkcja())( if($(dokument).scrollTop()>100)( $("nagłówek").removeClass("duży").addClass("mały") ; ) else( $("nagłówek").removeClass("mały").addClass("duży"); ) ));
Jeśli użytkownik przewinął więcej niż 100 pikseli, wówczas utworzona przez nas „duża” klasa zostanie usunięta i dodana zostanie nasza nowa „mała” klasa. W ten sposób rozmiar menu zmieni się tak, jak zdefiniowaliśmy wcześniej w CSS. Spróbuj, powinno już działać, ale być może zauważyłeś, że przejścia między klasami wydają się bardzo nagłe.
Przejścia CSS dla animacji menu
Aby płynnie przełączać się pomiędzy klasami w naszym menu, wykorzystamy przejścia CSS. Po prostu użyj tego fragmentu kodu obok reszty kodu CSS.
Header,nav, a, img, li( przejście: wszystkie 1; -moz-przejście: wszystkie 1; /* Firefox 4 */ -webkit-transition: wszystkie 1; /* Safari i Chrome */ -o-transition: wszystkie 1s; /* Opera */ )
Tutaj zdefiniowaliśmy przejścia dla wszystkich właściwości CSS dla. I
Czy słyszałeś kiedyś stwierdzenie, że „nie można utworzyć dynamicznego menu rozwijanego przy użyciu samego CSS w IE”? Jestem pewien, że tak. Czy naprawdę w to wierzysz? To prawda, lepiej w to nie wierzyć.
Cel, który chcemy osiągnąć w tym artykule
Celem tego artykułu jest stworzenie menu rozwijanego dla IE wykonanego w całości w CSS. Zaczynając od tego ustawienia rozszerzyłem zadanie, aby takie menu działało w innych najbardziej znanych przeglądarkach (z komentarzy wynika, że są to przeglądarki Opera 7.x i najnowsze wersje Firefoksa).
Celem, który chcemy osiągnąć w tym artykule, jest w zasadzie mniej lub bardziej ogólny charakter edukacyjny, tj. dają ogólne pojęcie o niektórych „ukrytych” i rzadko używanych funkcjach przeglądarek.
Również ci, którzy są szczególnie ciekawi, mogą znaleźć w tym artykule kilka sztuczek, dzięki którym można osiągnąć pewne niestandardowe rezultaty. Cóż, dla programistów ten artykuł może stać się powodem do przemyśleń lub źródłem nowych pomysłów.
Jak wyobrażamy sobie poziom czytelnika?
Właściwie myślałem o oznaczeniu tego artykułu jako „zaawansowany”. Ale jestem pewien, że nawet nie najbardziej doświadczeni programiści dobrze zrozumieją, co jest napisane w artykule. Krótko mówiąc, czytelnik musi po prostu znać podstawy CSS i
HTML.
Czym to menu różni się od wszystkich innych?
Spędziłem dużo czasu szukając w Internecie menu stworzonych w CSS, ale nie znalazłem ani jednego rozwiązania, które działałoby bez błędów w IE. Znalazłem jednak wiele ciekawych pomysłów, które doprowadziły mnie do rezultatu, który zostanie tutaj opisany. Tak, mój kod też nie jest doskonały, ale po prostu nie mam czasu na naprawianie wszystkich błędów. Najciekawsze alternatywne rozwiązanie, jakie widziałem (wykorzystujące CSS), opiera się na użyciu pseudoklasy hover dla elementów LI. Ale nigdy nie myślałem, że jest to możliwe, ani nie myślałem, że w ogóle możliwe jest utworzenie menu rozwijanego dla IE bez skryptów…
Główną różnicą między moim a innymi menu jest to, że moje działa w IE. Wszystkie rozwiązania, które widziałem, wykorzystują element LI jako główny element pseudoklasy :hover, jednak Microsoft zdecydował, że tej pseudoklasy można używać tylko do
element A. Większość witryn zastrzega, że ich menu działa tylko w przeglądarkach Opera 7.x lub Mozilla. Ale z tych przeglądarek korzysta tylko pięć procent użytkowników! Tak, takie menu są dobre w tych przeglądarkach, ale niestety nie są widoczne w większości najpopularniejszych przeglądarek. Teraz naprawimy to nieporozumienie.
Co to jest menu utworzone za pomocą CSS?
To dynamiczne menu utworzone przy użyciu wyłącznie CSS i żadnych skryptów (na przykład napisanych w JavaScript).
Co, nie możesz w to uwierzyć?
Spójrzmy na kod:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"domyślny"
name
=
"default"
>
*::- moz - any - link br ,*:- moz - any - link br (
/*obejście dla Mozilli*/
Nie wyświetla się;
}
div #menu * (
kursor: wskaźnik; /*ponieważ IE wyświetla kursor tekstowy
jeśli link jest nieaktywny*/
}
Wyłączony (
kolor czerwony ! ważny ;
tło: żadne! ważny ;
}
Div #menu (
tło: #F5F5DC;
wysokość: 15px;
biała spacja: nowrap;
szerokość: 100%;
}
Dział #menu .a (
tło: #F5F5DC;
obramowanie: 1 piksel #F5F5DC;
kolor: #000000;
dekoracja tekstu: brak;
}
Div #menu .a tabela (
Blok wyświetlacza;
czcionka: 10px Verdana, bezszeryfowa;
biała spacja: nowrap;
}
Div #tabela menu, div#tabela menu a (
Nie wyświetla się;
}
Div #menu .a:hover, div#menu div.menuitem:hover (
tło: #7DA6EE;
obramowanie: 1 piksel #000080;
kolor: #0000FF;
margines - prawy :- 1px; /* rozwiązuje problem z Operą
nie wyświetla prawej krawędzi*/
}
Div #menu .a:najedź tabelą, div#menu div.menuitem:najedź tabelą(
tło: #FFFFFF;
obramowanie: 1 piksel #708090;
Blok wyświetlacza;
pozycja: absolutna;
biała spacja: nowrap;
}
Div #menu .a:najedź tabelą a, div#menu div.menuitem:najedź tabelą a (
obramowanie - po lewej: 10 pikseli ciągłych #708090;
obramowanie - prawe: 1px jednolity biały; /*rozwiązuje problem skoku*/
kolor: #000000;
Blok wyświetlacza;
dopełnienie: 1px 12px;
dekoracja tekstu: brak;
biała spacja: nowrap;
indeks Z: 1000;
}
Div #menu .a: najechanie tabelą a: najechanie kursorem, div#menu div.menuitem: najechanie tabelą a: najechanie (
tło: #7DA6EE;
obramowanie: 1 piksel #000000;
obramowanie - po lewej: 10 pikseli ciągłych #000000;
kolor: #000000;
Blok wyświetlacza;
dopełnienie: 0px 12px;
dekoracja tekstu: brak;
indeks Z: 1000;
}
Td(
obramowanie - szerokość: 0px;
dopełnienie: 0px 0px 0px 0px;
}
pozycja w menu (
pływak: w lewo;
margines: 1px 1px 1px 1px;
dopełnienie: 1px 1px 1px 1px;
}
Pozycja w menu*(
dopełnienie: 0px 0px 0px 0px;
}
#Inny (
}
#moz(
}
#moz::-moz-zawartość-komórki(
wysokość: automatyczna; widoczność: widoczna;
}
#other::-moz-zawartość-komórki(
wysokość: 1px; widoczność: ukryta;
}
#uchwyt (
szerokość: 100%;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Plik<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Kliknij
<
TR
>
<
TD
><
a href
=
#3>Ratować
<
TR
>
<
TD
><
a href
=
#4>Zamknąć
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Pomoc<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Indeks
<
TR
>
<
TD
><
a href
=
"#14"
>O
<
TR
>
<
TD id
=
"moz"
>Menu specyficzne dla Mozilli!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>otwarty
<
TR
>
<
TD
><
a href
=
#3>Ratować
<
TR
>
<
TD
><
a href
=
#4>Zamknąć
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>Indeks
<
TR
>
<
TD
><
a href
=
"#14"
>O
<
BR
>
Co się dzieje, dlaczego wszystko działa?
Od razu zastrzegam, że w tym artykule nie będę uczył Cię obsługi CSS. Dlatego od razu przechodzimy do rozważenia zasady działania menu - do pseudoklasy „:hover”. Tak, to dokładnie ta klasa. Te. selektor może dziedziczyć inny selektor zawierający „:hover”. W naszym przypadku „A:hover TABLE” wybiera „