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:

Poziomy pasek nawigacyjny | Witryna z materiałami witryny

Rozważmy teraz strukturę zbudowaną na górze nieuporządkowanej listy u góry strony. Cała lista jest opakowana w element HTML5