Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][JavaScript]Zapamiętaniu rozwijanego menu
PawelC
post 28.12.2018, 16:51:13
Post #1





Grupa: Zarejestrowani
Postów: 1 173
Pomógł: 121
Dołączył: 24.09.2007
Skąd: Toruń

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<!-- Required meta tags -->
  5. 	<meta charset="utf-8"/>
  6. 	<meta
  7. 			name="viewport"
  8. 			content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  9. 	<!-- Bootstrap CSS -->
  10. 	<link
  11. 			rel="stylesheet"
  12. 			href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  13. 			integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  14. 			crossorigin="anonymous">
  15. 	<title>Hello, world!</title>
  16. 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  17. 	<link rel="stylesheet" href="css/style.css">
  18. </head>
  19. <body>
  20. <div class="container">
  21. 	<div class="nav">
  22. 		<ul>
  23. 			<li class="parent">
  24. 				<a class="parent_click">Driving</a>
  25. 				<ul class="sub_list">
  26. 					<li class="test">
  27. 						<a class="sub_click">Type of Car</a>
  28. 						<ul class="sub_sub_list">
  29. 							<li><a href="plik1.html">List 1</a></li>
  30. 							<li><a href="plik2.html">List 2</a></li>
  31. 							<li><a href="plik3.html">List 3</a></li>
  32. 						</ul>
  33. 					</li>
  34. 					<li class="test">
  35. 						<a class="sub_click">Tracks</a>
  36. 						<ul class="sub_sub_list">
  37. 							<li><a href="plik4.html">List 1</a></li>
  38. 							<li><a href="plik5.html">List 2</a></li>
  39. 							<li><a href="plik6.html">List 3</a></li>
  40. 						</ul>
  41. 					</li>
  42. 					<li class="teset"><a>Type of driving</a></li>
  43. 				</ul>
  44. 			</li>
  45. 		</ul>
  46. 	</div>
  47. </div>
  48. <!-- Optional JavaScript -->
  49. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  50.  
  51. <script
  52. 		src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
  53. 		integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
  54. 		crossorigin="anonymous"
  55. ></script>
  56. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  57. </body>
  58. </html>
[HTML] pobierz, plaintext

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

JS
[JAVASCRIPT] pobierz, plaintext 
  1. $(".sub_list").slideUp();
  2. $(".parent_click").click(function() {
  3. 	$(".parent_click").not(this).next().slideUp()
  4. 	$(this).closest(".parent").find(".sub_list").slideToggle();
  5.  
  6. 	return false;
  7. });
  8. $(".sub_click").click(function() {
  9. 	var elem = $(this).next()
  10. 	$(".sub_sub_list").not(elem).slideUp();
  11. 	$(this).closest(".test").find(".sub_sub_list").slideToggle();
  12. });
[JAVASCRIPT] pobierz, plaintext


Nie jestem za mocny w kwestii frontu stąd moja prośba o pomoc z tym menu.
Go to the top of the page
+Quote Post
programistaarek
post 28.12.2018, 17:00:08
Post #2





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 1.02.2015

Ostrzeżenie: (0%)
-----

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.



--------------------
MMA GAME
Moja strona
Go to the top of the page
+Quote Post
PawelC
post 28.12.2018, 17:03:56
Post #3





Grupa: Zarejestrowani
Postów: 1 173
Pomógł: 121
Dołączył: 24.09.2007
Skąd: Toruń

Ostrzeżenie: (0%)
-----

@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 
  1. function saveMenu(currentId)
  2. {
  3. 	localStorage.clear();
  4. 	localStorage.setItem('current_position', currentId);
  5. }
[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.

Ten post edytował PawelC 28.12.2018, 18:33:06
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 11:39
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn