Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [js]menu rozwijane
misty
post
Post #1





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 13)
Istalacar
post
Post #2





Grupa: Zarejestrowani
Postów: 108
Pomógł: 4
Dołączył: 3.03.2007

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

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
Go to the top of the page
+Quote Post
woj_tas
post
Post #3





Grupa: Zarejestrowani
Postów: 230
Pomógł: 36
Dołączył: 31.03.2006
Skąd: Zielona Góra

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

A nie może być na Css-ie z odrobiną JS...(IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Zobacz to: suckerfish
Go to the top of the page
+Quote Post
misty
post
Post #4





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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..
Go to the top of the page
+Quote Post
empathon
post
Post #5





Grupa: Zarejestrowani
Postów: 246
Pomógł: 31
Dołączył: 13.11.2006
Skąd: się znamy?

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

Link który podał woj_tas to opisuje. Przypatrz się dobrze.
Go to the top of the page
+Quote Post
misty
post
Post #6





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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?

Ten post edytował misty 26.03.2007, 11:51:02
Go to the top of the page
+Quote Post
Kamson
post
Post #7





Grupa: Zarejestrowani
Postów: 57
Pomógł: 3
Dołączył: 23.10.2006
Skąd: Warszawa

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

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


Ten post edytował Kamson 27.03.2007, 13:46:38
Go to the top of the page
+Quote Post
misty
post
Post #8





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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!
Go to the top of the page
+Quote Post
joshrob
post
Post #9





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 18.10.2006

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

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,
Go to the top of the page
+Quote Post
misty
post
Post #10





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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!!:)
Go to the top of the page
+Quote Post
kwiateusz
post
Post #11


Admin Techniczny


Grupa: Administratorzy
Postów: 2 072
Pomógł: 93
Dołączył: 5.07.2005
$() to tylko alias funkcji document.getElementById która zwraca uchwyt do elementu o danym id, nie wiem jak chciałbyś ją odwzorować w php?
Go to the top of the page
+Quote Post
misty
post
Post #12





Grupa: Zarejestrowani
Postów: 366
Pomógł: 0
Dołączył: 2.01.2007

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

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!
Go to the top of the page
+Quote Post
joshrob
post
Post #13





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 18.10.2006

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

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

pozdrawiam,
Go to the top of the page
+Quote Post
Justin
post
Post #14





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 9.06.2010

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

Hi all. Look php tutorial.

Ten post edytował Justin 9.06.2010, 17:07:13
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 25.12.2025 - 05:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn