Z pomocą klasycznego jQuery napisano wiele artykułów na ten temat. Próbowałem nieco skomplikować zadanie, dodając możliwość utrzymywania otwartych (lub zamkniętych, w zależności od wyboru użytkownika) sekcji menu podczas poruszania się po serwisie.
Aby rozwiązać ten problem, postanowiłem skorzystać z wtyczki jQuery Cookie. Zaletą tej wtyczki jest to, że operacja wykonywana jest po stronie klienta, co z kolei zmniejsza obciążenie serwera. Minus - jeśli użytkownik ma wyłączoną obsługę JS, wtyczka nie będzie działać. Ale ta opcja Nie rozważam, bo wtedy cały punkt menu rozwijanego znika całkowicie. Więc zacznijmy.
Najpierw musimy połączyć sam framework jQuery i wtyczkę jQuery Cookie:
Kod: HTML
Dalej jest znacznik. Będzie wyglądać jak prosta lista, nic nadprzyrodzonego. Jedyną rzeczą, na którą należy zwrócić uwagę, jest to, że w tagu
powinien być nagłówek, po kliknięciu menu zniknie:
Kod: HTML
I tak w nieskończoność. Teraz najciekawsze. W kodzie dodam kilka uwag, żeby było w przybliżeniu jasne, chopach
Kod: JS
$(dokument).gotowy(funkcja()(
if($.cookie("num_open_ul"))( // sprawdź, czy istnieje wpis cookie
if($.cookie("num_open_ul") != 0)( // a ten wpis nie jest równy 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function()( // po kliknięciu ta funkcja będzie działać
if(!$(this).next().is(":widoczne"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // jeśli inne są otwarte, zamknij wszystkie oprócz bieżącego
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // otwórz dodano klasę do zmiany stylu
setTimeout(fncookie, 600); //zapis do ciasteczek sam z opóźnieniem, aby skrypt miał czas na wykonanie pracy przed zapisem (500ms - szybkość, opóźnienie - 600ms)
});
function fncookie()( // sama funkcja nagrywania
varnumber_open_ul = 0;
zmienna i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":widoczne"))(
number_open_ul = ja;
}
$.cookie("num_open_ul", number_open_ul, (wygasa:3, ścieżka:"/")); // przechowuj przez 3 dni dla całej witryny.
});
}
});
Oznacza to, że teraz, jeśli użytkownik otworzy menu, opuści witrynę i wróci do niej za kilka dni, menu nadal pozostanie dla niego otwarte.
I na koniec pozostał nam mały akcent: w rzeczywistości style css. Robisz to według własnego gustu, w przykładzie wziąłem gotowy projekt z jednego z projektów
Kod: CSS
#nawigacja(
margines: 80px auto;
szerokość: 250px
}
#navigation h2, #navigation h2.navigation_head (
rozmiar czcionki: 18px;
grubość czcionki: pogrubiona;
kolor tła: #ffb6c1;
obraz w tle: -webkit-gradient(liniowy,50% 0,50% 100%,kolor-stop(0%,#ffe9e9),kolor-stop(100%,#ffb6c1));
obraz w tle: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
obraz w tle: -moz-linear-gradient(#ffe9e9,#ffb6c1);
obraz w tle: -o-liniowy-gradient(#ffe9e9,#ffb6c1);
obraz w tle: gradient liniowy (#ffe9e9,#ffb6c1);
wypełnienie: 5px 3px 6px 3px
margines: auto;
pozycja: względna;
}
#navigation h2.navigation_head:po (
pozycja: bezwzględna;
prawo: 5px;
kolor: #550000;
treść: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kursor: wskaźnik;
}
.aktywna_nawigacja(
background-image: -webkit-gradient(linear,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !ważne;
obraz w tle: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !ważne;
obraz w tle: -moz-linear-gradient(#ffb6c1,#ffe9e9) !ważne;
obraz w tle: -o-liniowy-gradient(#ffb6c1,#ffe9e9) !ważne;
obraz w tle: liniowy-gradient(#ffb6c1,#ffe9e9) !ważne;
}
.active_navigation:po (
pozycja: bezwzględna;
prawo: 5px;
zawartość: "cssd" !ważne;
}
.navigation_body(
Nie wyświetla się;
}
#nawigacja ul (
margines: 0;
wypełnienie: 0;
typ-listy: brak;
}
* html #navigation ul li(
wzrost: 1%;
}
#navigation div.navigation_body ul li (
margines lewy: 10px;
}
#nawigacja a (
rodzina czcionek: „Times New Roman”;
Blok wyświetlacza;
kolor: #918871;
wypełnienie: 3px
kolor tła: #ffe3e0;
border-bottom: 1px solid #fff;
dekoracja tekstu: brak;
}
#nawigacja a:najedź (
kolor: #585858;
kolor tła: #ffb6cc;
}
Jeśli ktoś zwrócił uwagę, tutaj próbowałem użyć treści: +/- właściwość, gdy menu jest zamknięte/otwarte, ale można dodać obrazek lub dowolny inny projekt. Możesz zobaczyć przykład tego, co zrobiliśmy tutaj
Jak zawsze gotowy wysłuchać pytań i spróbować na nie odpowiedzieć. Wszystkiego najlepszego, wszystkiego najlepszego.
Bardzo często w szablonach można znaleźć rozwijane elementy nawigacyjne. Programiści używają dany typ ukryte menu, aby wyświetlić dodatkowe ukryte linki tematycznie związane z główną pozycją. Możesz znaleźć przykłady paneli wysuwanych lub różnych menu w stylu akordeonu, które realizują tę zasadę nawigacji.
Ale w tym samouczku zbudujemy proste menu rozwijane z za pomocą jQuery. Będzie działać z metodą animacji, aby wygenerować efekty opóźnione. Efekty przejścia CSS3 są również stosowane wraz z kodem JavaScript. Wynik jest pusty do nawigacji w witrynie.
HTML
Najpierw zbudujmy podstawowy szablon HTML5. Potrzebowałby Ostatnia wersja jQuery , które otrzymujemy z Google API. Dodaj również plik stylu style.css które zostaną pokazane poniżej:
Rozważmy teraz strukturę zbudowaną na górze nieuporządkowanej listy u góry strony. Cała lista jest opakowana w element HTML5 dla najlepsze wyniki SEO.
Struktura kodu jest dość prosta. Każdy element listy zawiera efekt podświetlenia, gdy znajduje się w nim kursor myszy. Wszystkie wewnętrzne elementy UL są zawarte w oryginalnej pozycji listy, więc fokus wprowadzania nie jest tracony podczas przechodzenia do pozycji menu rozwijanego.
Style nawigacji
Arkusz stylów zawiera kod do resetowania wartości właściwości do wartości domyślnych. Wielu programistów dołącza plik od Erica Meye , ale w naszym przypadku jest on zbyt nieporęczny. Ponadto kod jest przechowywany na innym serwerze, co samo w sobie jest zła decyzja w tym przypadku.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, skrót, akronim, adres, duży, cytuj, kod, del, dfn, em, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, u, i, centrum, dl, dt, dd, ol, ul, li, fieldset, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td, artykuł, na bok, płótno, szczegóły, osadzanie, rysunek, ryscaption, stopka, nagłówek, hgroup, menu, nav, output, ruby, sekcja, podsumowanie, godzina, znak, dźwięk, wideo ( margines: 0; dopełnienie: 0; obramowanie: 0; rozmiar czcionki: 100%; czcionka: dziedziczenie; pionowe wyrównanie: linia bazowa; kontur: brak; -webkit-font- wygładzanie: wygładzanie; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) html (wysokość : 101%; ) body ( background: #eaeaea url("images/bg.png"); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom : 60px; ) artykuł, z boku, szczegóły, podpis, rysunek, stopka, nagłówek, h grupa, menu, nawigacja, sekcja (wyświetlanie: blok; ) ol, ul ( styl listy: brak; ) cytat, q ( cudzysłowy: brak; ) cytat:przed, cytat:po, q:przed, q:po ( treść: ""; treść: brak; ) strong ( czcionka -weight: pogrubienie; ) table ( border-collapse: zwiń; border-spacing: 0; ) img ( border: 0; max-width: 100%; )
W kodzie jest ciekawa właściwość - wygładzanie czcionek webkit. Jest przeznaczony do wygładzania czcionek podczas uruchamiania kodu w przeglądarkach poniżej Kontrola komputera Mac OSX lub iOS.
Przejdźmy teraz do naszego menu.
#ddmenu ( display: block; width: 100%; height: 80px; margin: 0 auto; padding: 0 15px; background: #fff; border-radius: 6px; border: 1px solid rgba (0, 0, 0, 0.15 ); box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2); kursor: wskaźnik; kontur: brak; grubość czcionki: pogrubienie; kolor: #8aa8bd; ) #ddmenu li ( display: block; position: względne; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; ) #ddmenu li a ( display: block; float: left; padding: 0 12px ; line-height: 78px; font-weight: bold; text-decoration: brak; color: #6c87c0; -webkit-transition: wszystkie 0.2s linear; -moz-transition: wszystkie 0.2s linear; -o-transition: all 0.2s liniowe; przejście: wszystkie 0.2s liniowe; ) #ddmenu li:hover > a ( kolor: #7180a0; tło: #d9e2ee; ) #ddmenu ul ( pozycja: bezwzględna; góra: 88px; szerokość: 130px; tło: # fff; display: brak; margines: 0; padding: 7px 0; styl listy: brak; border-radius: 3px; border: 1px solid rgba (0, 0, 0, 0.2); box-shadow: 0 0 5px rgba (0, 0, 0, 0,2); )
Dodawanie selektora #ddmenuul aby podświetlić wszystkie wewnętrzne elementy w każdym elemencie listy, ponieważ ważne jest, aby określić odległość dla nich za pomocą pozycjonowanie bezwzględne. Dodaliśmy również liniowe przejście dla wszystkich linków, które pojawia się po najechaniu na nie kursorem.
Przyjrzyjmy się teraz tworzeniu wskaźnika na górny element. Powstaje przy użyciu właściwości rotacji i uniwersalnego pudełka z ciemnym tłem dla cienia. W przypadku pozycjonowania offsetowego jeden element naszej struktury jest umieszczony nad drugim i tworzy wizualną reprezentację wskaźnika w menu rozwijanym.
#ddmenu ul:after ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 8px; border-width: 0 8px 8px 8px; border-style: solid; border-color : #fff transparent; ) #ddmenu ul:before ( content: ""; width: 0; height: 0; position: absolute; bottom: 100%; left: 4px; border-width: 0 10px 10px 10px; border-style : solid; border-color: rgba(0, 0, 0, 0.1) transparent; ) #ddmenu ul li ( display: block; width: 100%; font-size: 0.9em; text-shadow: 1px 1px 0 #fff ; ) #ddmenu ul li a ( display: block; width: 100%; padding: 6px 7px; line-height: 1.4em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; - o-przejście: wszystkie 0.2s liniowe; przejście: wszystkie 0.2s liniowe; ) #ddmenu ul li a:hover ( background: #e9edf3; )
JavaScript
Pierwsza część kodu przechwytuje kliknięcia w linki i domyślnie zatrzymuje ich przetwarzanie (ładowanie stron pod adresem URL).
Druga część kodu robi całą magię. Dołączamy obsługę zdarzeń dla procesu najechania na element listy. Program obsługi zatrzyma aktualnie aktywną animację i wyświetli nową subskrypcję za pomocą .slideDown() . Ustawiliśmy również krótkie opóźnienie, aby odpowiedzieć tylko na rzeczywisty wybór przedmiotu.
Jeśli wszystkie takie pozycje zostaną umieszczone pod sobą, to możliwe, że menu stanie się tak duże, że jego wysokość przekroczy wysokość głównej treści. Z zewnątrz nie będzie bardzo pięknie, poza tym trudno coś znaleźć w tak ciągłej liście. Aby wszystko pogrupować i zredukować, musisz zrobić coś takiego jak przesuwane menu.
Zasadą menu wysuwanego jest to, że pozycje menu są podzielone na grupy, a grupy te są ukryte, widoczna jest tylko nazwa grupy. Po kliknięciu na nazwę wyświetla się lista z określoną liczbą pozycji.
Jak zrobić przesuwane menu? To nam pomoże - jQuery. Dzięki niemu wszystko będzie działać płynnie i pięknie, jak w powyższym przykładzie. Zacznijmy implementować menu przesuwne i zróbmy kilka rzeczy.
skrypt jQuery
Jak zwykle, pracując z jQuery, musisz dołączyć jego bibliotekę. Wszystko jak zwykle, w nagłówku lub stopce łączymy się, chyba że zrobiłeś to wcześniej, dla innych skryptów.
Po bibliotece dodaj skrypt. który wykona animację.Skrypty będą 3, każdy z nich wykonuje animację inaczej.
Skrypt ten działa w ten sposób, że po kliknięciu na nazwę kategorii lista jest wyciągana, ale po kliknięciu na inną kategorię zaczyna się ona rozwijać, a pierwsza się zamyka. Oznacza to, że zawsze otwarta jest tylko jedna kategoria. Jeśli potrzebujesz otwartych kategorii, aby nie były zamykane automatycznie, a następnie zastąp skrypt nowym wskazanym poniżej.
Istnieje inny skrypt, którym możesz zastąpić główny. Jego cechą jest to, że menu slajdów po najechaniu myszką wydarzenie. Nie musisz klikać, po prostu najedź na nazwę kategorii i to wszystko. Wybierz więc, który skrypt najbardziej Ci odpowiada.
Znaczniki HTML
Teraz w właściwe miejsce na swojej stronie, musisz wyświetlić HTML- narzut. Cóż, lub nieco zmień swój, aby stał się podobny jak w przykładzie.
Nie ma nic skomplikowanego, wszystko jest zorganizowane za pomocą - ul-listy.
Style CSS
I na koniec, aby ustawić poprawny wygląd naszego menu, musimy zarejestrować style. Jeśli to nie jest Twoja pierwsza praca z css, możesz łatwo dostosować style dla siebie.
Ul#menu, ul#menu ul(list-style: brak; margines: 0px; dopełnienie: 0px; szerokość: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow: 0px 0px 5px 0px rgba (50, 50, 50, 0.2); box-shadow: 0px 0px 5px 0px rgba (50, 50, 50, 0.2);) ul#menu a,ul#menu span (wyświetlacz: blok; dekoracja tekstu: brak;) ul#menu li (górny margines: 1px;) ul#menu li a,ul#menu li span(tło: #1ba600; kolor: #fff; padding: 7px; ) ul#menu li a:hover,ul#menu li span:hover(tło: #333;) ul#menu li ul li a(tło: #eee; kolor: #000; dopełnienie-lewe: 20px;) ul# menu li ul li a:hover(tło: #ddd;)
Nic więcej nie jest potrzebne. Ta metoda niezbyt skomplikowany i posiada kilka rodzajów implementacji, wszystko zależy od wybranego przez Ciebie skryptu.
To wszystko, dzięki za uwagę.
W tym samouczku pokażemy, jak utworzyć boczne menu rozwijane, aby jeszcze łatwiej poruszać się po witrynie. To menu jest popularnym trendem w nowoczesne projektowanie stron internetowych. Wiele witryn korzysta z tego typu menu. Dzięki niemu można pozbyć się chaosu na stronach projektu, uczynić go bardziej czytelnym, skupiając uwagę użytkowników na głównej treści.
To świetny sposób na osiągnięcie minimalizmu bez rozpraszania uwagi. Dzisiaj sami stworzymy takie menu.
Aby utworzyć menu nawigacyjne, przyjrzyjmy się najpierw ustawieniom:
Najpierw musisz załadować Normalize.css i dostosować domyślne style przeglądarki, upewnij się, że menu wygląda tak samo we wszystkich przeglądarkach. Użyjemy FontAwesome, aby wyświetlić strzałkę przed elementami menu z podelementami. Aby przełączyć klasy w menu, ładujemy jQuery i przenosimy cały niestandardowy kod jQuery do script.js. Ostatni link to główna tabela projektu internetowego.
Ikona hamburgera
Ikona hamburgera jest częstym atrybutem nawigacji w witrynie. Często jest tworzony za pomocą czcionki ikony, takiej jak FontAwesome, ale w tym samouczku dodamy trochę animacji, więc będziemy budować ją od zera. Nasza ikona hamburgera to tag span zawierający trzy klasy div, renderowane jako poziome paski.
Style wyglądają tak:
Przycisk przełączania ( pozycja: stała; szerokość: 44px; wysokość: 40px; dopełnienie: 4px; przejście: .25s; indeks z: 15; ) .toggle-button:hover ( kursor: wskaźnik; ) .toggle-button .menu -bar ( pozycja: bezwzględna; border-radius: 2px; szerokość: 80%; przejście: .5s; ) .toggle-button .menu-bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle (wysokość: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar -bottom ( border: 4px solid #555; border-top: brak; top: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); transition: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); przejście: .1s złagodzenie; krycie: 0; ) .button-open .menu-bar-bottom ( transform: rotate(-45deg) przetłumacz (8px, -7px); przejście: .5s; )
Ikona ma stałą pozycję i nie zmienia się podczas przewijania strony. Ma również indeks Z równy 15, co oznacza, że zawsze będzie nad innymi elementami. Składa się z trzech taktów, z których każdy ma inne style. Dlatego przeniesiemy każdy pasek do klasy .menu-bar. Pozostałe style są przenoszone do oddzielnych klas. Magia dzieje się, gdy do tagu span dodamy kolejną klasę, która jest publiczna. Dodajemy to za pomocą jQuery w ten sposób:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("kliknij", function() ( $(this).toggleClass("button-open" ); )) ); ) );
Dla tych, którzy nie znają jQuery, inicjujemy zmienną za pomocą $toggleButton, która zawiera naszą ikonę. Przechowujemy go w zmiennej bez potrzeby Użycie JavaScript. Następnie tworzymy detektor zdarzeń, który nasłuchuje kliknięć ikon. Za każdym razem, gdy użytkownik kliknie ikonę hamburgera, detektor zdarzeń uruchamia funkcję toggleClass(), która przełącza klasę .button-open.
Po dodaniu klasy .button-open możemy jej użyć do zmiany sposobu wyświetlania elementów. Używamy funkcji CSS3 translate() i rotate(), aby górny i dolny pasek obracały się o 45 stopni, a środkowy pasek przesuwał się w prawo i znikał. Oto animacje, które możesz dostosować:
Rozwiń menu nawigacyjne
Teraz, gdy masz już ikonę hamburgera, uczyńmy ją użyteczną i utwórz rozwijane menu po kliknięciu. Oto jak wygląda znacznik menu:
Na razie nie będziemy omawiać szczegółowo każdego stylu tego menu, ale zamiast tego skupimy się na kilku. ważne punkty. Przede wszystkim jest to klasa div i .menu-wrap. Spójrz na jego style:
Menu-wrap ( background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto ; przejście: .25s; z-index: 10; )
Pozycja jest stała, więc menu zawsze pozostaje w tej samej pozycji podczas przewijania strony. Wysokość 100% pozwala na zajęcie przez menu całej pionowej przestrzeni na stronie. Zauważ, że pole marginesu po lewej jest ustawione na liczbę ujemną równą szerokości menu. Oznacza to, że menu zniknie z rzutni. Aby było ponownie widoczne, tworzymy kolejną klasę przełączającą za pomocą jQuery. Nasz plik JavaScript będzie wyglądał tak:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(.menu-wrap"); $toggleButton.on("kliknij", function() ( $(this).toggleClass("przycisk-otwórz"); $menuWrap.toggleClass("menu-pokaż"); ) ); ) );
Dodaj kolejną zmienną $menuWrap, która zawiera opakowanie menu. Użyj tej samej obsługi zdarzeń, którą stworzyliśmy wcześniej. Tylko tym razem przełączamy dwie klasy: jedną dla przycisku, a drugą dla wrappera menu. Wartość lewego marginesu klasy .menu-show wynosi 0, to doda efekt cienia.
Menu-show ( margines lewy: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )
Podmenu i linki
Możesz zauważyć, że jeden z elementów listy ma klasę .menu-item-has-children, która zawiera podmenu. Ponadto tuż pod linkiem znajduje się tag span z klasą .sidebar-menu-arrow.
span ma pseudoelement::after i zawiera strzałkę FontAwesome. Domyślnie podmenu jest ukryte i będzie widoczne tylko po kliknięciu strzałki. Oto jak możemy to zrobić za pomocą jQuery:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );
Klikając na strzałkę, wywołujemy funkcję, która z kolei celuje w kolejny element znajdujący się bezpośrednio po span (w naszym przypadku podmenu) i czyni go widocznym. Używamy funkcji slideToggle . Sprawia, że element pojawia się i znika. Funkcja w naszym przykładzie ma jeden parametr - czas trwania animacji.
Pozycje menu w przykładzie mają efekt najechania. Jest tworzony za pomocą pseudoelementu::after. Kod wygląda tak:
Pasek boczny menu li > a::after ( content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50% ); background-image: linear-gradient (do prawej, przezroczysta 50,3%, #FFFA3B 50,3%); przejście: pozycja-tła .2s .1s złagodzenie; rozmiar-tła: 200% auto; ) .menu-sidebar li > a:hover::after (pozycja w tle: -100% 0; )
Pseudoelement ::after zawiera element blokowy na dole każdego łącza o pełnej szerokości i wysokości 0.15em. To wszystko wygląda jak podkreślenie. Osobliwością jest to, że nie tylko stosujemy kolor tła do linii, używamy funkcji linear-gradient() na zdjęcie w tle. Chociaż ta funkcja ma na celu tworzenie gradientów kolorów, możemy zmienić kolor, określając żądany procent.
Pasek boczny menu li > a::after ( obraz tła: linear-gradient(do prawej, przezroczysty 50.3%, #FFFA3B 50.3%); )
Połowa linii jest tutaj przezroczysta, a druga połowa jest żółta. Dzięki temu, że rozmiar tła wynosi 200%, podwajamy szerokość naszego pudełka. Teraz przezroczysta część zajmuje całą szerokość łącza, a żółta część przesuwa się w lewo i staje się niewidoczna. Zmieniamy pozycję tła najechania na -100%. Teraz żółta część staje się widoczna, a przezroczysta część jest ukryta.
Zamiast przezroczystej części możesz użyć dowolnego innego koloru. Możesz także eksperymentować z gradientami.
Każdy z rozważanych przez nas elementów działa jako całość. Możesz stworzyć takie menu używając dowolnego projektu strony z kolekcji TemplateMonster. Jak widzisz, jest to łatwiejsze niż myślisz. Powodzenia w tworzeniu profesjonalnych i przyjaznych stron internetowych!
Aby napisać własną nawigację w postaci pionowego rozwijanego menu w jQuery z rozwijaną listą podkategorii, trzeba zrozumieć samą zasadę działania tego mechanizmu. Ale najpierw spójrzmy na strukturę nawigacji:
Nawigacja
Jak można się domyślić, nasze menu rozwijane opiera się na listach punktowanych. Po najechaniu kursorem na tag
- test 1
- test 2
- test 3
- test 4
Ale jak pytasz? Tak, to właściwie bardzo proste. Najpierw zrozummy arkusz stylów naszej listy nawigacyjnej, będzie on wyglądał tak:
Treść ( background: rgb(244, 244, 244); rodzina czcionek: Verdana; grubość czcionki: 100; ) /*---Nawigacja---*/ #menu ( szerokość: 200px; margines: 0; dopełnienie: 2px; ) #menu li ( list-style-type: brak; ) .menu ( pozycja: względne; tło: czekolada; tło: -moz-linear-gradient(góra, rgb(198, 255, 242), #2AC4B3) ; background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); obramowanie : 1px solid #2AC4B3; .menu:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ).menu span (szerokość: 11px; wysokość: 11px; wyświetlacz: blok; pozycja: bezwzględna; góra: 8px; prawo: 10px; kursor: wskaźnik; .menu ul (szerokość: 150px; margines: 0; dopełnienie: 1px; pozycja: bezwzględna; góra: -1px; lewo: 198px; .menu ul li (tło: czekolada; tło: -moz-linear-gradient(góra, rgb(198, 255, 242), #2AC4B3); tło: -webkit-linear-gradient(góra, rgb(198, 255, 242), #2AC4B3); tło: -o-linear-gradient(góra, rgb(198, 255, 242), #2AC4B3); obramowanie: 1px stałe #fff; ) .menu ul li:hover ( background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb() 230, 230, 230), #0CBFAB); tło: -o-linear-gradient(góra, rgb(230, 230, 230), #0CBFAB); ) .menu a (dopełnienie: 5px; wyświetlacz: blok; tekst- dekoracja: brak; kolor: biały; ) .menu a:hover ( kolor: biały; ) /*---END---*/
Z arkusza stylów widać, że lista rozwijana nie jest początkowo ukryta, ale naprawimy ten moment za pomocą:
$(document).ready(function()( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")") ; $("#menu li").hover(function()( $(this).children("ul").show(); /*odpowiednik $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /* Odpowiednik $("span", this).css("background", "url ("right.png")");*/ ),function()( $(this).children("ul").hide(); /* Odpowiednik $("ul", this).hide (); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background ", " url("down.png")");*/ )) ))
Teraz przyjrzyjmy się bliżej kodowi menu rozwijanego jQuery, ponieważ. być może nie będzie to dla kogoś całkowicie jasne. Na samym początku napisana jest następująca struktura:
$(dokument).gotowy(funkcja()( ))
Zawiera polecenia, które muszą zostać wykonane po pełnym załadowaniu strony. Odbywa się to tak, aby nie pojawiały się różnego rodzaju błędy, jeśli nie można znaleźć żadnego obiektu ze względu na to, że nie został jeszcze wczytany.
$(".menu ul").hide();
Co oznacza ten wpis? Konstrukcja „$()” pozwala wybierać elementy. Dlatego na samym początku musimy ukryć naszą rozwijaną listę. Bierzemy konstrukcję „$()” i zapisujemy w niej interesujący nas obiekt. W naszym przypadku ten obiekt będzie lista punktowana z klasą „menu”. Następnie piszemy metodę „ukryj ()”, która pozwala nam ukryć interesujący nas obiekt.
$(".menu span").css("background", "url("down.png")");
Co ona robi? Ona szuka tagu element nadrzędny do której przypisana jest klasa „menu”, a przy użyciu metody „css(„background”, „url(”down.png”)”)”, właściwości stylu „background” przypisywana jest wartość „url(”down .png")". "down.png" to ikona wskazująca, że listę można rozwinąć.
Potem przychodzi konstrukcja, która otworzy naszą listę, wygląda to tak:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")"); )
Szukamy tagu, którego element nadrzędny jest przypisany id="menu". Następnie pojawia się metoda "hover" i dwie funkcje w nawiasach. Pierwsza funkcja zostanie wykonana po najechaniu kursorem myszy, a druga zostanie wykonana, jeśli kursor myszy opuści interesujący nas element.
Pierwsza funkcja mówi:
$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");
Konstrukcja „$(this)” oznacza, że interesuje nas element, na którym się znajdujemy ten moment wskazał (to z angielskiego to). I wskazaliśmy na tag
Następnie szukamy potomków tagu, a mianowicie: tag i jego tło zostaje zamienione na inną ikonę.
Następnie zostaje napisana funkcja, która robi wszystko tak, jak była oryginalnie, po tym jak kursor myszy opuści element listy:
Function()( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")"); )
Aby napisany kod jQuery działał i nasze menu rozwijane działały poprawnie, musisz pobrać bibliotekę ze strony jquery.com i dołączyć ją, wpisując ją po tagu otwierającym
strunowy.OK, już po wszystkim! Podsumowując, chcę zauważyć, że jeśli Twoja witryna jest dość ważna, skrypt prawdopodobnie uruchomi się za późno (załadowanie witryny zajmie dużo czasu), a użytkownicy zobaczą, jak jest na początku w pełni otwarta, a dopiero potem ukryta , który, jak widzisz, jest bardzo brzydki. Dlatego konieczne jest przeniesienie wszystkich poleceń jQuery poza tę konstrukcję: "$(document).ready(function()())". Będzie to wyglądać tak:
$(dokument).gotowy(funkcja()( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("background" , "url("down.png")"); ))
Podłączanie naszego skryptu musi zostać przeniesiony z tagu
na samym końcu, przed tagiem zamykającym lub możesz dołączyć skrypt tuż za listą punktowaną.(pliki do pobrania: 312)