Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js]menu rozwijane
Forum PHP.pl > Forum > Przedszkole
misty
25.03.2007, 14:35:12
hej!
wiem ze temat na forum byl poruszany setki razy i niby cala masa na ten temat na googlach..
ale ludzie podsylaja sobie wszedzie gotowce albo proponuja dolaczenie swoich skryptow..
musze zrobic menu rozwijane (tzn. jak najade na element to ma sie pojawic lista-podmenu).
nie chce korzystac z gotowych rozwiazan ktorych jest cala masa bo nic sie wtedy nie naucze.
czy ktos z Was moglby polecic mi prosty kurs/sposob na zrobienie takiego menu? w javascript..
z gory dzieki!
i mam nadz ze nie rozzloscilam mocno moderatorow poruszajac po raz kolejny ten watek (na prawde przejrzalam wczesniej watki na ten temat na tym forum..)

pzdr!
Istalacar
25.03.2007, 17:17:57
Witam
Kiedyś chciałem sobie zrobić własne menu i to jest właśnie tego owoc, przeanalizuj kod, może Ci się przyda.
http://ogorek.webd.pl/JS/menu.htm
Pozdrawiam
Istalacar
woj_tas
25.03.2007, 18:15:30
A nie może być na Css-ie z odrobiną JS...winksmiley.jpg

Zobacz to: suckerfish
misty
25.03.2007, 21:51:50
Istlar:
w tym linku co mi podeslales jest tylko jakis textarea do wpisywania tekstu..

woj_tas :
no bez css sie nie obejdzie.. ale chyba nie da rady tylko na nich polegac..

chodzi mi o to jak zrobic takie menu jak np. na str blatka:

http://blatek.ma.ciekawe.info/javascript/f.../al1/index.html

jak sie najedzie myszka na gorne menu, to rozwija sie podmenu. i wlasnie o to mi chodzi - jak zrobic to pojawiajace sie podmenu? to nie moze byc jakies bardzo trudne..
empathon
25.03.2007, 22:18:50
Link który podał woj_tas to opisuje. Przypatrz się dobrze.
misty
26.03.2007, 14:18:59
tak miales racje.. przyznaje ze nie przejrzalam strony zbyt dokladnie, angielskie teksty czasem mnie odstraszaja a na pierwszy rzut oka nie wygladalo to na to czego szukam..
zwracam honor i na prawde dzieki za pomoc!!!

jedno tylko jeszcze pytanie.. co z ta pseudoklasa 'hover'? bo raz dziala a raz nie.. tzn. dodam jakis komentarz albo cos dopisze i nagle wogole przestaje mi dzialac.. testuje na firefoxie i konqueror i dziala tak bardzo w kratke..

mam jeszcze takie 2 pytania z racji tego ze sposob ten jest bardzo zalezny od przegladarek..
1. jest tam dodana pewna funkcja w java_script ktora trzeba dodac by to chodzilo pod IE.
kod tej fkcji:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>" title="Zobacz w manualu PHP" target="_manual


nie wiem czemu, ale w miejscu for (var i=0; i<sfEls.length; i++)" title="Zobacz w manualu PHP" target="_manual, tu gdzie zaczyna sie znak '<' jest to troche inaczej interpretowane.. tak jakbym miala wstawic tam jakis znacznik, albo wpisac np. <script>. po prostu od tego momentu kod nie jest intepretowany prawidlowo..

2. druga sprawa, to w przegladarkach takich jak mozzila i firefox nie znikaja mi te 'kropki' ktore nadaja znaczki ul i li. (pod konqerorem z kolei ladnie ich nie widac). chcialabym je ukryc.. tylko nie do konca wiem jak..
podsylam moj kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <style type="text/css">
  4.  
  5.     #menu, #menu ul {
  6. 	padding: 0;
  7. 	margin: 0;
  8. 	list-style: none;
  9.         }
  10. 	#menu a {
  11. 	    display: block;
  12. 	    width: 15em;	    
  13. 	    	}
  14.  
  15. 	    #menu li {
  16. 		float: left;  
  17. 		width: 15em;	    
  18. 		font-size:15;
  19.  
  20. 		    }
  21.  
  22. 	#menu li ul {
  23. 	    position : absolute;
  24. 	    width: 15em;  
  25. 	    left: -999em;
  26. 	    	        }
  27.  
  28. 	    #menu li:hover ul, #menu li.sfhover ul {
  29. 		left: auto;
  30.         }
  31.  
  32.     </style>
  33.  
  34. <!-- teraz funkcja w javascripcie ktora musi byc zeby pod IE dzialalo..-->
  35.  
  36.     <script type="text/javascript">
  37.  
  38. 	sfHover = function()
  39. 	{
  40. 	    var sfEls = document.getElementById("menu").getElementsByTagName("LI");
  41.  
  42. 		for (var i=0;  i<sfEls.length; i++) <!--wlasnie w tym miejscu przy znaku '<' kod nie jest dalej interpretowany jako funkcja..-->
  43.  
  44. 		{
  45. 		    sfEls[i].onMouseOver=function()
  46. 		    {
  47. 			    this.className+="sfhover";
  48.  
  49. 		    }
  50. 			    sfEls[i].onMouseOut=function()
  51. 			    {
  52. 				this.className=this.className.replace(new RegExp("sfhover\\b"),"");
  53. 			    }
  54. }	}
  55.  
  56. 	    if (window.attachEvent) window.attachEvent("onload", sfHover);
  57. 	    </script>
  58.  
  59. </head>
  60. <body>
  61.     <ul id="menu">
  62.     <table border><tr><td>
  63. 	<li><a href="#"><center>jeden</center></a>
  64. 	    <ul><table border><tr><td>
  65. 		<li><a href="#"><center>jeden.jeden</center></a></li>
  66. 		<li><a href="#"><center>jeden.dwa</center></a></li>
  67. 			<li><a href="#"><center>jeden.trzy</center></a></li></td></td></tr></table>
  68. 	    </ul>
  69. 	</li>
  70.  
  71.     <td><li><a href="#"><center>dwa</center></a>
  72. 	    <ul><table border><tr><td>
  73. 		<li><a href="#"><center>dwa.jeden</center></a></li>
  74. 		<li><a href="#"><center>dwa.dwa</center></a></li></td></td></tr></table>
  75. 	    </ul>
  76. 	</li>	    		
  77.  
  78.     <td><li><a href="#"><center>trzy</center></a>
  79. 	    <ul><table border><tr><td>
  80. 		<li><a href="#"><center>trzy.jeden</center></a></li>
  81. 		<li><a href="#"><center>trzy.dwa</center></a></li></td></td></tr></table>
  82. 	    </ul>
  83. 	</li>	    		
  84. </body>
  85. </html>
[HTML] pobierz, plaintext



ma ktos z Was moze pomysl? jak to ulepszyc pod IE by dzialalo i jak pozbyc sie tych kropek?
Kamson
27.03.2007, 13:46:06
hmm dziwne .. u mnie pod IE działa i pod FF tak samo

moje pytanie :
po co to?:
[HTML] pobierz, plaintext 
  1. <table border><tr><td>
[HTML] pobierz, plaintext
misty
29.03.2007, 15:58:03
noo tabelka.. chcialam miec w tabelce. zreszta to nieistotne.

caly czas nie dziala mi pod IE. doczytalam ze IE ponizej wersji 7mej nie obsluguje 'hover', wiec sugerujac sie radami z jakiegos innego wortalu, dodalam wpis:

[HTML] pobierz, plaintext 
  1. body {
  2.   behavior ("csshover.htc");}
[HTML] pobierz, plaintext


kod csshover.htc to czarna skrzynka, wiec nie zalaczam..
plik wrzucilam do tego samego katalogu gdzie moj glowny plik i niestety nadal pod IE nie dziala..
probowalam tez przy 
[HTML] pobierz, plaintext 
  1. behavior ("csshover.htc");
[HTML] pobierz, plaintext
podac pelna sciezke, bez apostrofow, z pojedynczym, etc jednak nadal IE nie wysuwa mi menu..
pod wersja IE 7 ktora niby obsluguje hover tez nie dziala..

z zaimplementowanej w przykladzie fkcji sfHover zrezygnowalam bo tez nic nie dawalo..
ma ktos jakis pomysl jak zmusic IE do interpretowania hover'a?

pzdr!
joshrob
29.03.2007, 17:31:11
Cytat(misty @ 25.03.2007, 15:35:12 ) *
nie chce korzystac z gotowych rozwiazan ktorych jest cala masa bo nic sie wtedy nie naucze.

Cytat(misty @ 25.03.2007, 15:35:12 ) *
czy ktos z Was moglby polecic mi prosty kurs/sposob na zrobienie takiego menu? w javascript..


witam,

w przegladarkach internetowych javascript generalnie jest zbedny. w IE 6, w przypadku menu wielopoziomowego, niestety konieczny.

skoro chcesz sie uczyc a nie bezmyslnie kopiowac (co Ci sie chwali) to zamieszcze ponizej kod, ktory wlasnie napisalem. bez komantarzy i podpowiedzi. jesli znasz podstawy CSS to kod sam ci sie powinien tlumaczyc z tego co robi i zaden komentarz potrzebny nie jest.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  5. <title>pure css dropdown</title>
  6. <style type="text/css">
  7. ul{
  8. list-style: none;
  9. padding: 0; margin: 0;
  10. }
  11. ul.level1 ul{
  12. display: none;
  13. }
  14. ul.level1 li{
  15. position: relative;
  16. float: left;
  17. }
  18. ul.level1 li a{
  19. display: block;
  20. width: 100px;
  21. height: 30px;
  22. line-height: 30px;
  23. background: #CCC;
  24. text-align: center;
  25. }
  26. ul.level1 li a:hover{
  27. background: #AAA;
  28. }
  29. ul.level1 li ul.level2{
  30. width: 100px;
  31. }
  32. ul.level1 li:hover ul.level2{
  33. display: block;
  34. }
  35. ul.level2 li ul.level3{
  36. position: absolute;
  37. top: 0;
  38. left: 100px;
  39. width: 100px;
  40. }
  41. ul.level2 li:hover ul.level3{
  42. display: block;
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. function $(id){
  47. 	return document.getElementById(id);
  48. }
  49.  
  50. function IE(version){
  51. 	if(!version) version = 'all';
  52. 	var msieIndex = navigator.appVersion.indexOf("MSIE");
  53. 	if(msieIndex == -1) return false;
  54. 	var ieversion = parseFloat(navigator.appVersion.substr(msieIndex + 5,3));
  55. 	if(version == 'all' || ieversion <= version) return true;
  56. return false;
  57. }
  58. function on(el){
  59. 	if(IE(6)) $(el).style.display = 'block';
  60. }
  61. function off(el){
  62. 	if(IE(6)) $(el).style.display = 'none';
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <div>
  68. <ul class="level1">
  69. 	<li><a href="#">item 1</a></li>
  70. 	<li><a href="#">item 2</a></li>
  71. 	<li onmouseover="on('level2');" onmouseout="off('level2');"><a href="#">item 3</a>
  72. 		<ul id="level2" class="level2">
  73. 			<li><a href="#">item 3.1</a></li>
  74. 			<li><a href="#">item 3.3</a></li>
  75. 			<li onmouseover="on('level3');" onmouseout="off('level3');"><a href="#">item 3.3</a>
  76. 				<ul id="level3" class="level3">
  77. 					<li><a href="#">item 3.3.1</a></li>
  78. 					<li><a href="#">item 3.3.3</a></li>
  79. 					<li><a href="#">item 3.3.3</a></li>
  80. 					<li><a href="#">item 3.3.4</a></li>
  81. 					<li><a href="#">item 3.3.5</a></li>
  82. 				</ul>
  83. 			</li>
  84. 			<li><a href="#">item 3.4</a></li>
  85. 			<li><a href="#">item 3.5</a></li>
  86. 		</ul>
  87. 	</li>
  88. 	<li><a href="#">item 4</a></li>
  89. 	<li><a href="#">item 5</a></li>
  90. </ul>
  91. </div>
  92.  
  93. </body>
  94. </html>
[HTML] pobierz, plaintext


kod jest walidowalny i dziala w ff 2.0.0.3, opera 9.10, ie 6.0; ie7 nie mam pod reka, ale tez powinno dzialac, jesli nie wlacz kod javascript dla wszystkich wersji IE.

generalnie podczas takich zabaw z css pamietac zawsze nalezy o poprawnym doctype oraz w IE 6 o kolorach tla, ktorych zmiana na :hover moze niezle pomieszac.

pozdrawiam,
misty
1.04.2007, 14:38:06
dzieki serio, sporo mi to pomoglo, przejrzalam, znalazlam bledy u siebie i jest ok pod IE. jedyne co jeszcze nie tak, to ze podmenu rozwija mi sie lekko przesuniete w prawo w stosunku do glownego menu, ale to juz popatrze sobie.

jedno takie pytanie mam. apropos tej fkcji function $(id)" title="Zobacz w manualu PHP" target="_manual
nie znam js, wiec moge sie jedynie domyslac..
chodzi o to, ze przypisuje ona odpowiednie akcje dla starszych wersji IE, ktore nie obsluguja hover?
ciezko bedzie napisac cos podobnego w php?

i jeszcze raz dzieki za pomoc!!:)
kwiateusz
1.04.2007, 18:25:03
$() to tylko alias funkcji document.getElementById która zwraca uchwyt do elementu o danym id, nie wiem jak chciałbyś ją odwzorować w php?
misty
1.04.2007, 21:53:41
nie mowie ze bede probowac ja pisac w php, bardziej sie zastanawialam czy sie da. tak z czystej ciekawosci:)
jeszcze raz dzieki za pomoc!!
pzdr!
joshrob
6.04.2007, 09:52:40
Cytat(misty @ 1.04.2007, 22:53:41 ) *
nie mowie ze bede probowac ja pisac w php, bardziej sie zastanawialam czy sie da. tak z czystej ciekawosci:)


poczytaj o haslach "clientside" i "serverside", wtedy poznasz odpowiedz na pytanie, czy sie da smile.gif

pozdrawiam,
Justin
9.06.2010, 17:06:05
Hi all. Look php tutorial.
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.