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
joshrob
post
Post #2





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

Posty w temacie
- misty   [js]menu rozwijane   25.03.2007, 14:35:12
- - Istalacar   Witam Kiedyś chciałem sobie zrobić własne menu i t...   25.03.2007, 17:17:57
- - woj_tas   A nie może być na Css-ie z odrobiną JS... Zobacz ...   25.03.2007, 18:15:30
- - misty   Istlar: w tym linku co mi podeslales jest tylko j...   25.03.2007, 21:51:50
- - empathon   Link który podał woj_tas to opisuje. Przypatrz się...   25.03.2007, 22:18:50
- - misty   tak miales racje.. przyznaje ze nie przejrzalam st...   26.03.2007, 14:18:59
- - Kamson   hmm dziwne .. u mnie pod IE działa i pod FF tak sa...   27.03.2007, 13:46:06
- - misty   noo tabelka.. chcialam miec w tabelce. zreszta to ...   29.03.2007, 15:58:03
- - joshrob   Cytat(misty @ 25.03.2007, 15:35:12 ) ...   29.03.2007, 17:31:11
- - misty   dzieki serio, sporo mi to pomoglo, przejrzalam, zn...   1.04.2007, 14:38:06
- - kwiateusz   $() to tylko alias funkcji document.getElemen...   1.04.2007, 18:25:03
- - misty   nie mowie ze bede probowac ja pisac w php, bardzie...   1.04.2007, 21:53:41
|- - joshrob   Cytat(misty @ 1.04.2007, 22:53:41 ) n...   6.04.2007, 09:52:40
- - Justin   Hi all. Look php tutorial.   9.06.2010, 17:06:05

« 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 · Przełącz na: Linearny+ · Drzewo

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

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