Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS]Wysuwane menu, po kliknięciu
Forum PHP.pl > Forum > Przedszkole
KomputeromaniaK
21.08.2010, 18:12:06
Mam taki kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. 	<title>jQuery Simple Drop Down Menu v0.25</title>
  5. 	<meta name="keywords" content="" />
  6. 	<meta name="description" content="" />
  7.  
  8.  
  9. </head>
  10. <body>
  11. <style type="text/css">
  12. /* menu styles */
  13. body {
  14. background-color: black;
  15. }
  16. #jsddm
  17. {	margin: 0;
  18. 	padding: 0}
  19.  
  20. #jsddm li
  21. 	{	float: left;
  22. 		list-style: none;
  23. 		font: 12px Tahoma, Arial;
  24. 				}
  25.  
  26. #jsddm li a
  27. 	{	display: block;
  28. 		background: #d6c18e;
  29. 		padding: 5px 12px;
  30. 		text-decoration: none;
  31. border: 1px solid white;
  32. 		color: #000;
  33. 		white-space: nowrap}
  34.  
  35. #jsddm li a:hover
  36. 	{	background: #edd69f}
  37.  
  38. #jsddm li ul
  39. 		{	margin: 0;
  40. 			padding: 0;
  41. 			position: absolute;
  42. 			visibility: hidden;
  43. }
  44.  
  45. 			#jsddm li ul li
  46. 			{	float: none;
  47. 				display: inline}
  48.  
  49. 			#jsddm li ul li a
  50. 			{	width: auto;
  51. 				background: #d6c18e;
  52. 				color: #000}
  53.  
  54. 			#jsddm li ul li a:hover
  55. 			{	background: #f6dea5}
  56. </style>
  57.  
  58. <script src="jquery.min.js" type="text/javascript"></script>
  59. <script type="text/javascript">
  60. var timeout		 = 500;
  61. var closetimer		= 0;
  62. var ddmenuitem	  = 0;
  63.  
  64. function jsddm_open()
  65. {	jsddm_canceltimer();
  66. 	jsddm_close();
  67. 	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
  68.  
  69. function jsddm_close()
  70. {	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  71.  
  72. function jsddm_timer()
  73. {	closetimer = window.setTimeout(jsddm_close, timeout);}
  74.  
  75. function jsddm_canceltimer()
  76. {	if(closetimer)
  77. 	{	window.clearTimeout(closetimer);
  78. 		closetimer = null;}}
  79.  
  80. $(document).ready(function()
  81. {	$('#jsddm > li').bind('mouseover', jsddm_open);
  82. 	$('#jsddm > li').bind('mouseout',  jsddm_timer);});
  83.  
  84. document.onclick = jsddm_close;
  85. </script>
  86.  
  87. <ul id="jsddm">
  88. 	<li><a href="#">test</a>
  89. 		<ul>
  90. 		  <li><a href="#">Link</a></li>
  91. 		  <li><a href="#">Link</a></li>
  92. 		  <li><a href="#">Link</a></li>
  93. 		  <li><a href="#">Link</a></li>
  94. 		  <li><a href="#">Link</a></li>
  95. 		</ul>
  96. 	</li>
  97. </ul>
  98. </body>
  99. </html>
[HTML] pobierz, plaintext


I jak zrobić, aby menu rozwijało się po kliknięciu,a nie po najechaniu?
Od razu mówię, że jestem całkiem zielony w JS
Skie
21.08.2010, 18:21:39
Prawdopodobnie zamiast tego:

Kod
$('#jsddm > li').bind('mouseover', jsddm_open);


to:

Kod
$('#jsddm > li').bind('click', jsddm_open);
bastard13
21.08.2010, 18:22:16
W tym fragmencie zamień mouseover na click
[HTML] pobierz, plaintext 
  1. $(document).ready(function()
  2. { $('#jsddm > li').bind('mouseover', jsddm_open);
  3. $('#jsddm > li').bind('mouseout', jsddm_timer);});
[HTML] pobierz, plaintext
KomputeromaniaK
21.08.2010, 18:26:51
Myśląc logicznie każdy by chyba tak zrobił, właśnie tak wcześniej robiłem i nie zadziałało i dlatego napisałem an forum ;/


Ps: Sprawdzałem też: onclick, mouseclick, clicks
IceManSpy
21.08.2010, 18:44:20
A nie lepiej po prostu zrobić to w jQuery z opcją np slidetoggle? Dzięki temu możesz chować i pokazywać menu. Tutaj masz przykład: http://api.jquery.com/slideToggle/
KomputeromaniaK
21.08.2010, 18:49:56
Ale nie rozumiesz mnie, zobacz to:
Kod
http://m2fp.komputeromaniak.com.pl

Login: test2
Haslo: tescior

I tam masz Witaj, test2
i jak zrobię to twoim sposobem to mi się całe to będzie rozsuwać, a chcę żeby po kliknięciu było tak jak jest teraz po najechaniu
zegarek84
21.08.2010, 20:54:06
2 rzeczy - a w zasadzie 3 ;p:
  1. fajnie, żeś dał kod tak, że można pobrać gotową stronę odrazu - ale zapomniałeś o adresie bezwzględnym [całym] do jquery - mniej roboty by było
  2. nie dawaj więcej takich kwiatków na końcu skryptu jak document.onclick bom sam przez chwilę "zgłupiał" zanim to zauważyłem
  3. a jak już kożystasz z jquery to zamiast over i out urzywaj leave i enter ;D - niżej masz działający kod - poprzednicy w zasadzie dobrą odpowiedź podawali a nie widzieli kwiatka ;p

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. 	<title>jQuery Simple Drop Down Menu v0.25</title>
  5. 	<meta name="keywords" content="" />
  6. 	<meta name="description" content="" />
  7.  
  8.  
  9. </head>
  10. <body>
  11. <style type="text/css">
  12. /* menu styles */
  13. body {
  14. background-color: black;
  15. }
  16. #jsddm
  17. {	margin: 0;
  18. 	padding: 0}
  19.  
  20. #jsddm li
  21. 	{	float: left;
  22. 		list-style: none;
  23. 		font: 12px Tahoma, Arial;
  24. 				}
  25.  
  26. #jsddm li a
  27. 	{	display: block;
  28. 		background: #d6c18e;
  29. 		padding: 5px 12px;
  30. 		text-decoration: none;
  31. border: 1px solid white;
  32. 		color: #000;
  33. 		white-space: nowrap}
  34.  
  35. #jsddm li a:hover
  36. 	{	background: #edd69f}
  37.  
  38. #jsddm li ul
  39. 		{	margin: 0;
  40. 			padding: 0;
  41. 			position: absolute;
  42. 			visibility: hidden;
  43. }
  44.  
  45. 			#jsddm li ul li
  46. 			{	float: none;
  47. 				display: inline}
  48.  
  49. 			#jsddm li ul li a
  50. 			{	width: auto;
  51. 				background: #d6c18e;
  52. 				color: #000}
  53.  
  54. 			#jsddm li ul li a:hover
  55. 			{	background: #f6dea5}
  56. </style>
  57.  
  58. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  59. <script type="text/javascript">
  60. var timeout		 = 500;
  61. var closetimer		= 0;
  62. var ddmenuitem	  = 0;
  63.  
  64. function jsddm_open()
  65. {	jsddm_canceltimer();
  66. 	jsddm_close();
  67. 	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
  68.  
  69. function jsddm_close()
  70. {	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  71.  
  72. function jsddm_timer()
  73. {	closetimer = window.setTimeout(jsddm_close, timeout);}
  74.  
  75. function jsddm_canceltimer()
  76. {	if(closetimer)
  77. 	{	window.clearTimeout(closetimer);
  78. 		closetimer = null;}}
  79.  
  80. $(document).ready(function()
  81. {	$('#jsddm > li').bind({'click':jsddm_open,'mouseleave':jsddm_timer,'mouseenter':jsddm_canceltimer});})
  82. //	$('#jsddm > li').bind('mouseleave',  jsddm_timer);});
  83.  
  84. //document.onclick = jsddm_close;
  85. </script>
  86.  
  87. <ul id="jsddm">
  88. 	<li><a href="#">test</a>
  89. 		<ul>
  90. 		  <li><a href="#">Link</a></li>
  91. 		  <li><a href="#">Link</a></li>
  92. 		  <li><a href="#">Link</a></li>
  93. 		  <li><a href="#">Link</a></li>
  94. 		  <li><a href="#">Link</a></li>
  95. 		</ul>
  96. 	</li>
  97. </ul>
  98. </body>
  99. </html>
[HTML] pobierz, plaintext

nie zauważyłem, że po mouseenter chcesz kasować ukrywanie...
KomputeromaniaK
22.08.2010, 08:14:05
Dobra, ale teraz jak kliknę spowrotem w test to nie znika sad.gif
zegarek84
22.08.2010, 10:15:31
Cytat(KomputeromaniaK @ 22.08.2010, 09:14:05 ) *
Dobra, ale teraz jak kliknę spowrotem w test to nie znika sad.gif
efekt miał być inny ;p - nic o tym nie pisałeś - śmieci nie czyściłem, a jak ktoś zaczyna od framworków zamiast od podstaw to tak jest, że potem nie wie się jak napisać prostu routing przy zdarzeniach ;p - teraz masz że po kliknięciu się pokazuje i chowa - jak zjedzie się myszką to nic się nie dzieje...
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. 	<title>jQuery Simple Drop Down Menu v0.25</title>
  5. 	<meta name="keywords" content="" />
  6. 	<meta name="description" content="" />
  7.  
  8.  
  9. </head>
  10. <body>
  11. <style type="text/css">
  12. /* menu styles */
  13. body {
  14. background-color: black;
  15. }
  16. #jsddm
  17. {	margin: 0;
  18. 	padding: 0}
  19.  
  20. #jsddm li
  21. 	{	float: left;
  22. 		list-style: none;
  23. 		font: 12px Tahoma, Arial;
  24. 				}
  25.  
  26. #jsddm li a
  27. 	{	display: block;
  28. 		background: #d6c18e;
  29. 		padding: 5px 12px;
  30. 		text-decoration: none;
  31. border: 1px solid white;
  32. 		color: #000;
  33. 		white-space: nowrap}
  34.  
  35. #jsddm li a:hover
  36. 	{	background: #edd69f}
  37.  
  38. #jsddm li ul
  39. 		{	margin: 0;
  40. 			padding: 0;
  41. 			position: absolute;
  42. 			visibility: hidden;
  43. }
  44.  
  45. 			#jsddm li ul li
  46. 			{	float: none;
  47. 				display: inline}
  48.  
  49. 			#jsddm li ul li a
  50. 			{	width: auto;
  51. 				background: #d6c18e;
  52. 				color: #000}
  53.  
  54. 			#jsddm li ul li a:hover
  55. 			{	background: #f6dea5}
  56. </style>
  57.  
  58. <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  59. <script type="text/javascript">
  60. var timeout		 = 500;
  61. var closetimer		= 0;
  62. var ddmenuitem	  = 0,
  63. open = false;
  64. function rout(){open?jsddm_close():jsddm_open(this);}
  65.  
  66. function jsddm_open(el)
  67. {	
  68. open=true;
  69. jsddm_canceltimer();
  70. 	//jsddm_close();
  71. 	ddmenuitem = $(el).find('ul').eq(0).css('visibility', 'visible');}
  72.  
  73. function jsddm_close()
  74. {	
  75.  
  76. if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
  77. open=false;}
  78.  
  79. function jsddm_timer()
  80. {	closetimer = window.setTimeout(jsddm_close, timeout);}
  81.  
  82. function jsddm_canceltimer()
  83. {	if(closetimer)
  84. 	{	window.clearTimeout(closetimer);
  85. 		closetimer = null;}}
  86.  
  87. $(document).ready(function()
  88. {	$('#jsddm > li').bind('click',rout);})
  89. //	$('#jsddm > li').bind('mouseleave',  jsddm_timer);});
  90.  
  91. //document.onclick = jsddm_close;
  92. </script>
  93.  
  94. <ul id="jsddm">
  95. 	<li><a href="#">test</a>
  96. 		<ul>
  97. 		  <li><a href="#">Link</a></li>
  98. 		  <li><a href="#">Link</a></li>
  99. 		  <li><a href="#">Link</a></li>
  100. 		  <li><a href="#">Link</a></li>
  101. 		  <li><a href="#">Link</a></li>
  102. 		</ul>
  103. 	</li>
  104. </ul>
  105. </body>
  106. </html>
[HTML] pobierz, plaintext

KomputeromaniaK
22.08.2010, 11:01:48
Ja się nie chce uczyć na razie js, tylko zrobić to głupie menu ;p

Na razie chce opanować dobrze php


@Dzieki działa ;*
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.