Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozsuwane menu
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
pinkift
29.12.2011, 16:58:22
No, więc tak mam taką stronkę w php, postanowiłem umieścić na niej menu, właściwie panel, ale uznajmy, że jest to menu. Menu, które po wciśnięciu na obrazek z nazwą menu zmienia się na obrazek menu(rozsuwa się). Skrypt wygląda tak:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var i=0;
  3. var p=1;
  4. function rozsunOpcje(){
  5. 	if(p==1) {
  6. 		obiekt=document.getElementById("left");
  7. 		p=0
  8. 	}
  9. 	if(i==0){
  10. 		obiekt.id="left2";
  11. 		obiekt=document.getElementById("left2");
  12. 		i=1;
  13. 	}else{
  14. 		obiekt.id="left";
  15. 		p=1;
  16. 		i=0;
  17. 	}
  18. }
  19. </script>
[HTML] pobierz, plaintext
- odpowiedzialne za rozsunięcie po naciśnięciu

[HTML] pobierz, plaintext 
  1. <div class="left_content">
  2.  
  3. 		<div id="left">
  4. 		<ul>
  5. 			<li><a href="#" title="" onclick="rozsunOpcje();">opcje</a></li>
  6. 		</ul>
  7.  
  8.  
  9.  
  10.  
  11. 		</div>
  12. </div>    
[HTML] pobierz, plaintext


no i css

[HTML] pobierz, plaintext 
  1. #left{
  2. width:200px;
  3. height:46px;
  4. clear:both;
  5. margin:auto;
  6. padding:10px 0 10px 0px;
  7. background:url(images/panel.png) no-repeat center;
  8.  
  9. }
  10.  
  11. #left ul{
  12. list-style:none;padding:0 0 0 60px;margin:0px;display:block;
  13. }
  14. #left ul li{
  15. list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:15px; line-height:44px; 
  16. }
  17. #left ul li a{
  18. float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px;color:#fff;text-align:center;
  19. }
  20.  
  21. #left2{
  22. width:200px;
  23. height:240px;
  24. clear:both;
  25. margin:auto;
  26. padding:10px 0 10px 0px;
  27. background:url(images/panel2.png) no-repeat center;
  28.  
  29. }
  30.  
  31. #left2 ul{
  32. list-style:none;padding:0 0 0 60px;margin:0px;display:block;
  33. }
  34. #left2 ul li{
  35. list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:15px; line-height:44px; 
  36. }
  37. #left2 ul li a{
  38. float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px;color:#fff;text-align:center;
  39. }
[HTML] pobierz, plaintext


No i teraz mnie tylko zastanawia jak zrobić następująca rzecz: linki, które znajdują się w kolumnach menu, ale oczywiście tylko jak menu jest rozsunięte..
erix
29.12.2011, 17:20:24
A może byś tak na żywo to puścił?
pinkift
29.12.2011, 17:31:45
Nie przerazić się budową strony bo dopiero edytuje laya ;p Daje filmik bo na localu, więc Ci linka nie podam, to oczywiste ;D

http://www.youtube.com/watch?v=f2qr8nzORLE
erix
29.12.2011, 17:33:17
Cytat
Daje filmik bo na localu, więc Ci linka nie podam, to oczywiste ;D

Kpisz, czy o drogę pytasz? Stawiam kratę piwa, jeśli Firebugiem po filmiku video coś przeanalizujesz.
pinkift
29.12.2011, 17:39:09
Trzeba mówić tak od razu. Starczy Ci kod czy muszę zakładać konto na jakimś hostingu? Jak starczą pełne kody to masz:

panel.php - tam gdzie ma być to rozsuwane:
[PHP] pobierz, plaintext 
  1. <?php 
  2.  
  3. include("config.php"); // dołącza config.php
  4. $nick = $_SESSION['nick']; //pobiera nick
  5. $haslo = $_SESSION['haslo']; //pobiera hasło
  6.  
  7.  
  8. echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. <title>gimsport.pl - centrum młodzieżowego sportu</title>
  13. <link rel="stylesheet" type="text/css" href="panel.css" media="screen" />
  14. <script type="text/javascript">
  15. var i=0;
  16. var p=1;
  17. function rozsunOpcje(){
  18. 	if(p==1) {
  19. 		obiekt=document.getElementById("left");
  20. 		p=0
  21. 	}
  22. 	if(i==0){
  23. 		obiekt.id="left2";
  24. 		obiekt=document.getElementById("left2");
  25. 		i=1;
  26. 	}else{
  27. 		obiekt.id="left";
  28. 		p=1;
  29. 		i=0;
  30. 	}
  31. }
  32. </script>
  33.  
  34. </head>
  35.  
  36. <body>
  37. <div id="main_container">
  38. 	<div id="header">
  39. 		<div id="logo"><a href="index.php"><img src="images/logo.png" alt="" title="" border="0" /></a></div>
  40.  
  41.     </div>
  42. </div>
  43. <div id="menu">
  44.     <ul>                                                                                                                      
  45.         <li><a href="index.php" title="">główna</a></li>
  46.         <li><a href="#" title="">transmisje live</a></li>
  47.         <li><a href="#" title="">kalendarz kibica</a></li>
  48.         <li><a href="#" title="">tabele</a></li>
  49.         <li><a href="#" title="">nowości</a></li>
  50.         <li><a href="#" title="">galeria</a></li>
  51.         <li><a href="#" title="">forum</a></li>
  52.         <li><a href="#" title="">kontakt</a></li>
  53.     </ul>
  54. </div>
  55. <div class="left_content">
  56.  
  57. 		<div id="left">
  58. 		<ul>
  59. 			<dl id="menu0">
  60. 			<li><a href="#" title="" onclick="rozsunOpcje();">opcje</a></li>
  61. 		</ul>
  62.  
  63.  
  64.  
  65.  
  66. 		</div>
  67. </div>    
  68. </body>
  69. </html>';
  70. ?>
[PHP] pobierz, plaintext


panel.css
[HTML] pobierz, plaintext 
  1. body {
  2. background:url(images/bg.jpg) repeat #fff;
  3. margin:0px;
  4. padding:0px;
  5. font-family:Arial, Helvetica, sans-serif;
  6. font-size:12px;
  7. color:#1e1b18;
  8. }
  9. p{
  10. text-align:justify;
  11. line-height:18px;
  12. padding:0px 0 5px 0;
  13. }
  14. span.red{
  15. color:#990000;
  16. font-weight:bold;
  17. }
  18. .clear{
  19. clear:both;
  20. }
  21. #main_container{
  22. width:900px;
  23. height:auto;
  24. margin:auto;
  25. }
  26. #header{
  27. width:900px;
  28. height:163px;
  29. margin:auto;
  30. background:url(images/header_bg.jpg) no-repeat top center;
  31. }
  32. #logo{
  33. padding:17px 0 0 60px;
  34. float:left;
  35. }
  36. /*----------------------menu-------------------------*/
  37. #menu{
  38. width:856px;
  39. height:39px;
  40. clear:both;
  41. margin:auto;
  42. padding:0px;
  43. background:url(images/menu_bg.gif) no-repeat center;
  44. }
  45. #menu ul{
  46. list-style:none;padding:0 0 0 30px;margin:0px;display:block;
  47. }
  48. #menu ul li{
  49. list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:15px; line-height:39px; 
  50. }
  51. #menu ul li a{
  52. float:left;text-decoration:none;padding:0px 10px 0 30px; margin:0px;color:#fff;text-align:center;
  53. }
  54. #menu ul li a:hover{
  55. text-decoration:none;color: #fff; background:url(images/menu_bullet.png) no-repeat left;padding:0px 10px 0 30px;
  56. }
  57. #menu ul li a.current{
  58. float:left;text-decoration:none;background:url(images/menu_bullet.png) no-repeat left;padding:0px 10px 0 30px;color: #fff;margin:0px;
  59. }
  60.  
  61. /*----------------------left-------------------------*/
  62. .left_content{
  63. width:856px;
  64. float:left;
  65. padding:10px 10px 30px 38px; /*1 w dol, 2 ?, 3 ?, 4 w prawo*/
  66. }
  67.  
  68. #left{
  69. width:200px;
  70. height:46px;
  71. clear:both;
  72. margin:auto;
  73. padding:10px 0 10px 0px;
  74. background:url(images/panel.png) no-repeat center;
  75.  
  76. }
  77.  
  78. #left ul{
  79. list-style:none;padding:0 0 0 60px;margin:0px;display:block;
  80. }
  81. #left ul li{
  82. list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:15px; line-height:44px; 
  83. }
  84. #left ul li a{
  85. float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px;color:#fff;text-align:center;
  86. }
  87.  
  88. #left2{
  89. width:200px;
  90. height:240px;
  91. clear:both;
  92. margin:auto;
  93. padding:10px 0 10px 0px;
  94. background:url(images/panel2.png) no-repeat center;
  95.  
  96. }
  97.  
  98. #left2 ul{
  99. list-style:none;padding:0 0 0 60px;margin:0px;display:block;
  100. }
  101. #left2 ul li{
  102. list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:15px; line-height:44px; 
  103. }
  104. #left2 ul li a{
  105. float:left;text-decoration:none;padding:0px 5px 0 5px; margin:0px;color:#fff;text-align:center;
  106. }
  107.  
  108. #menu_pion ul, ul li {
  109. 	display: block;
  110. 	list-style: none;
  111. 	margin: 0;
  112. 	padding: 0;
  113. }
  114.  
  115.  
  116.  
  117.  
[HTML] pobierz, plaintext
erix
29.12.2011, 18:11:56
Temat: JavaScript jesli Twoj watek go dotyczy KONIECZNIE przeczytaj

I nie będę więcej tłumaczył.
pinkift
5.01.2012, 15:18:19
http://pinkitest.cba.pl/panel2.php

Pomoże ktoś?
erix
5.01.2012, 23:07:07
I co tu jest nie tak?
pinkift
9.01.2012, 15:48:35
http://gimsport.com.pl/panel.php - bez reklam. No, więc chodziłoby mi teraz o to, żeby po naciśnięciu na opcje pokazywały się napisy, nie chcę robić napisów na obrazku interesuje mnie opcja tylko i wyłącznie html/css/java.
erix
9.01.2012, 16:07:09
Cytat
żeby po naciśnięciu na opcje pokazywały się napisy, nie chcę robić napisów na obrazku interesuje mnie opcja tylko i wyłącznie html/css/java.

żeby ten wihajster pokazał się tam, a nie tu

Polska jezyk trudna jezyk.
ShadowD
9.01.2012, 16:14:57
Nie za bardzo łapię w czym rzecz, może chodzi Ci o coś takiego - http://cmsss.pl/beta/

Menu po lewej stronie, jeśli tak to sprawdz kod. ;-)
pinkift
9.01.2012, 16:37:21
Owszem o coś takiego wink.gif

Tylko, żeby się to jeszcze zamykało..
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.