Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] Rozwijane Menu
ewelinac18
post 30.04.2011, 06:25:51
Post #1





Grupa: Zarejestrowani
Postów: 99
Pomógł: 0
Dołączył: 11.07.2007

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

Witam, mam problem i nie mogę sobie z nim poradzić.
Problem tkwi w tym, że po kliknięciu w SubMenu zamiast mnie przekierować to chowa całą klase.
W jaki sposób zrobić tak aby po kliknięciu w SubMenu mnie przekierowało, a po kliknięciu w Menu rozwijało się SubMenu tak jak jest obecnie .


Skrypt można zobaczyć tu: http://s-port.nazwa.pl/jq_menu.html

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>jQuery Menu</title>
  4. 		<meta charset="ISO-8859-2" />
  5. 		<meta name="keywords" content="#" />
  6. 		<meta name="description" content="#" />
  7. 		<meta name="language" content="pl" />
  8. 		<meta name="robots" content="index, follow" />
  9.  
  10.                 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
  11. 		<script>
  12. 		$(document).ready(function() {
  13. 		      $("#vert li").each(function() {
  14. 			     if ($(this).find('ul:first').length > 0) {
  15. 				    $(this).addClass('arDown');
  16. 			     }
  17. 			     if ($(this).hasClass("on")) {
  18. 				    $(this).find('ul:first').slideToggle('fast');
  19. 			     }
  20. 		      });
  21. 		      $("#vert ul li").click(function() {
  22. 			     if ($(this).find('ul:first').length > 0) {
  23. 				    $(this).find('ul:first').slideToggle('fast');
  24. 				    $(this).toggleClass('on');
  25. 				    return false;
  26. 			     }
  27. 		      });
  28.                 });
  29. 		</script>
  30.  
  31. 		<style type="text/css">
  32. 		<!--
  33.  
  34. 			#vert ul {
  35. 				float: left;
  36. 				width: 168px;
  37. 				margin: 0;
  38. 				list-style: none;
  39. 				background: white; }
  40.  
  41. 				#vert > ul > li {
  42. 					float: left;
  43. 					width: 168px;
  44. 					margin: 2px 0;
  45. 					padding: 2px 0;
  46. 					border-bottom: 1px solid #ebebeb; }
  47.  
  48. 				#vert > ul > li:last-child { border: 0 none; }
  49.  
  50. 				#vert > ul > li > a {
  51. 					float: left;
  52. 					width: 168px;
  53. 					font-family: "MyriadPro-Semibold", "Arial";
  54. 					font-size: 14px;
  55. 					text-shadow: 1px 1px 1px #fff;
  56. 					color: #444; }
  57.  
  58. 				#vert a:hover {
  59. 					text-decoration: none;
  60. 					color: #039ec3; }
  61.  
  62. 				.arDown { background: url(el.png) right -67px; }
  63.  
  64. 				#vert .on { background: url(el.png) right -94px; }
  65.  
  66. 				#vert .on > a { color: #2cb91e !important; }
  67.  
  68. 			#vert ul ul {
  69. 				display: none;
  70. 				margin: 5px 0; }
  71.  
  72. 				#vert ul ul li {
  73. 					width: 158px;
  74. 					background: url(el.png) left -42px;
  75. 					padding-left: 10px;
  76. 					margin: 1px 0; }
  77.  
  78. -->
  79. </style>
  80.  
  81.  
  82.  
  83. 	</head>
  84.  
  85. <body>
  86.  
  87.  
  88. <nav id="vert">
  89. 	<ul>
  90. 		<li><a href="#menu">Menu 1</a></li>
  91. 		<li><a href="#menu">Menu 2</a>
  92. 			<ul>
  93. 				<li><a href="#submenu">SubMenu 1</a></li>
  94. 				<li><a href="#submenu">SubMenu 2</a></li>
  95. 				<li><a href="#submenu">SubMenu 3</a></li>
  96. 				<li><a href="#submenu">SubMenu 4</a></li>
  97. 				<li><a href="#submenu">SubMenu 5</a></li>
  98. 			</ul>
  99. 		</li>
  100. 		<li><a href="#menu">Menu 3</a></li>
  101. 		<li><a href="#menu">Menu 4</a></li>
  102. 		<li><a href="#menu">Menu 5</a></li>
  103. 	</ul>
  104.  
  105. </nav>
  106.  
[HTML] pobierz, plaintext


Ten post edytował ewelinac18 30.04.2011, 06:28:12
Go to the top of the page
+Quote Post
ActivePlayer
post 30.04.2011, 07:08:51
Post #2





Grupa: Przyjaciele php.pl
Postów: 1 224
Pomógł: 40
Dołączył: 6.07.2004
Skąd: Wuppertal

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

zauwaz ze click dodałeś do całego li, a więc wszsystko pomiędzy 91 a 99 linią objęte będzie zdarzeniem. jak bys zbindował tag "a" zamisast "li" wtedy osiagnąłbys efekt. jedynie co dodatkowo musiałbys zrobic to przerobic a zeby bylo wyswietlane blokowo (zeby zajmowało cały obszar na szerokość a nie tylko miejsce gdzie jest tekst).

Kod
$("#vert ul li").click(function() {

na
Kod
$("#vert ul li a").click(function() {

+ w kodzie $(this) na $(this).parent()

no i css
Go to the top of the page
+Quote Post
ewelinac18
post 30.04.2011, 08:51:32
Post #3





Grupa: Zarejestrowani
Postów: 99
Pomógł: 0
Dołączył: 11.07.2007

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

Udało sie, bardzo dziękuje za pomoc smile.gif
Go to the top of the page
+Quote Post
-solo112-
post 23.03.2013, 20:25:14
Post #4





Goście
Witam,
ćwiczę tworzenie menu na skrypcie pokazanym przez ewelinac18. Próbuję się zastosować do wskazówek ActivPlayera ale nie działają. Co robię źle?
Jak jest taka możliwość to proszę o wyświetlenie poprawionego kodu.
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: 27.05.2025 - 20:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn