Forum PHP.pl > [CSS][JavaScript]Zapamiętaniu rozwijanego menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][JavaScript]Zapamiętaniu rozwijanego menu

PawelC

28.12.2018, 16:51:13

Witam,
Mam następujący problem związany z moim menu. Mam na stronie rozwijane menu, które ma kategorie główną, subkategorie oraz subkategorie 2 poziomu. Chciałbym uzyskać efekt, aby po kliknięciu w subkategorię 2 poziomu, otworzyło mi podstronę i rozwinęło menu do pozycjo w którą kliknąłem. Coś jak na tej stronie: oddsportal.com w lewym menu.

Mój kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8"/>
	<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
	<!-- Bootstrap CSS -->
	<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
			integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
			crossorigin="anonymous">
	<title>Hello, world!</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
	<div class="nav">
		<ul>
			<li class="parent">
				<a class="parent_click">Driving</a>
				<ul class="sub_list">
					<li class="test">
						<a class="sub_click">Type of Car</a>
						<ul class="sub_sub_list">
							<li><a href="plik1.html">List 1</a></li>
							<li><a href="plik2.html">List 2</a></li>
							<li><a href="plik3.html">List 3</a></li>
						</ul>
					</li>
					<li class="test">
						<a class="sub_click">Tracks</a>
						<ul class="sub_sub_list">
							<li><a href="plik4.html">List 1</a></li>
							<li><a href="plik5.html">List 2</a></li>
							<li><a href="plik6.html">List 3</a></li>
						</ul>
					</li>
					<li class="teset"><a>Type of driving</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
<script
		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
		integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
		crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
[HTML] pobierz, plaintext

CSS

[CSS] pobierz, plaintext 
.sub_list, .sub_sub_list {display:none;}
a:hover{
	background-color:red;
}
[CSS] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
$(".sub_list").slideUp();
$(".parent_click").click(function() {
	$(".parent_click").not(this).next().slideUp()
	$(this).closest(".parent").find(".sub_list").slideToggle();
 
	return false;
});
$(".sub_click").click(function() {
	var elem = $(this).next()
	$(".sub_sub_list").not(elem).slideUp();
	$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
[JAVASCRIPT] pobierz, plaintext

Nie jestem za mocny w kwestii frontu stąd moja prośba o pomoc z tym menu.

programistaarek

28.12.2018, 17:00:08

Nie wiem czy Cię zrozumiałem ale chyba chodzi o to że rozwijam menu kategorie i jak odświeżę stronę to nadal menu jest rozwinięte ? Jeśli tak to ja bym zastosował cookie które jak klikasz zapisuje dane do przeglądarki z informacją iż rozwinięta została pozycja a i submenu 3 pole np.

PawelC

28.12.2018, 17:03:56

@programistaarek dokładnie o to chodzi, aby po wejściu na nową podstronę zapamiętało mi układ menu, a dokładnie aby menu rozwinęło się na podkategorii którą kliknąłem. Tylko jak to zapisać i jak później zmusić menu do rozwinięcia ;/ Zapis ID podkategorii sobie zrobiłem:

[JAVASCRIPT] pobierz, plaintext 
function saveMenu(currentId)
{
	localStorage.clear();
	localStorage.setItem('current_position', currentId);
}
[JAVASCRIPT] pobierz, plaintext

Teraz pytanie jak to zrobić, aby po przejściu pod konkretną podstronę rozpakowało mi się menu, do poziomu podkategorii z localStorage.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.