Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript]Menu jest rozwinięte na samym początku. Dlaczego?
Forum PHP.pl > Forum > Przedszkole
dawido000
3.07.2011, 09:11:27
Na stonie: http://www.kurshtml.edu.pl/skrypty/menu_wi..._rozwijane.html
jest przedstawione menu wielopoziomowe.
Dlaczego, gdy w elementach <dd></dd> umieszczam odnośnik <a></a> to moje menu na początku uruchomienia strony jest wstępnie rozwinięte. Chciałbym, aby było złożone. Jak to zrobić?
t_e_l
3.07.2011, 10:19:24
Przecież tam jest wszystko dokładnie wyjaśnione, są przykłady... Pokaż swój kod to się zobaczy z czym jest problem.
dawido000
3.07.2011, 12:58:48
Proszę bardzo:

[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4. 	<title>Aztek Bud</title>
  5. 	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  6. 	<LINK HREF="style/format_index.css" REL="stylesheet" TYPE="text/css" />
  7. 	<script type="text/javascript" src="style/menu.js"></script>
  8. </head>
  9.  
  10. <body>
  11.  
  12. 	<div id="STRONA">
  13.  
  14. 		<div id="LOGOWANIE">
  15. 			<div id="LOGIN">
  16. 				<form action="index.html" method="post">
  17. 			  		Login: 
  18. 			  		<input type="text" name="klient_login" maxlength="35" size="18">
  19. 					Hasło: 
  20. 					<input type="password" name="klient_haslo" maxlength="20" size="12">
  21. 					<input type="submit" value="Zaloguj">
  22. 					<a href="index.html">Zapomniałem hasła</a>
  23. 				</form>
  24. 			</div>
  25. 			<div id="REJESTRACJA">
  26. 			<a href="index.html">Rejestracja</a>
  27. 			</div>
  28. 		</div>
  29.  
  30. 		<div id="NAGLOWEK">
  31. 			<div id="PRZYCISKI">
  32. 				<ul>
  33. 					<li><a href="index.html">Strona Główna</a></li>
  34. 					<li><a href="index.html">Regulamin</a></li>
  35. 					<li><a href="index.html">Cenniki</a></li>
  36. 					<li><a href="index.html">Promocje</a></li>
  37. 					<li><a href="index.html">Transport</a></li>
  38. 					<li><a href="index.html">Kontakt</a></li>
  39. 				</ul>
  40. 			</div>
  41. 		</div>
  42.  
  43. 		<div id="KOSZYK">koszyk na zakupy</div>
  44.  
  45. 		<div id="MENU">
  46. 			<div id="NAPIS_MENU">MENU</div>
  47. 			<dl id="menu0">
  48. 				<dt id="poziom1">DACH</dt>
  49. 					<dd>
  50. 					<dl>
  51. 							<dt id="poziom2">OCIEPLENIE</dt>
  52. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  53. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  54. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  55. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  56. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  57. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  58. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  59. 							<dt id="poziom2">FOLIE</dt>
  60. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  61. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  62. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  63. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  64. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  65. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  66. 									<dd id="poziom3"><a href="index.html">Styropian</a></dd>
  67. 						</dl>
  68. 					</dd>
  69. 				<dt id="poziom1">PODŁOGA</dt>
  70. 					<dd>
  71. 						<dl>
  72. 							<dt id="poziom2">OCIEPLENIE</dt>
  73. 								<dd>
  74. 									Element
  75. 								</dd>
  76. 							<dt id="poziom2">FOLIE</dt>
  77. 								<dd>
  78. 									Element
  79. 								</dd>
  80. 						</dl>
  81. 					</dd>
  82. 				<dt id="poziom1">ŚCIANA</dt>
  83. 					<dd>
  84. 						<dl>
  85. 							<dt id="poziom2">OCIEPLENIE</dt>
  86. 								<dd>
  87. 									Element 1
  88. 								</dd>
  89. 							<dt id="poziom2">FOLIE</dt>
  90. 								<dd>
  91. 									Element 1
  92. 								</dd>
  93. 						</dl>
  94. 					</dd>
  95. 			</dl>
  96. 			<script type="text/javascript">
  97. 			// <![CDATA[
  98. 			new Menu('menu0');
  99. 			// ]]>
  100. 			</script>
  101. 		</div>
  102.  
  103. 		<div id="TRESC">tresc</div>
  104. 	</div>
  105.  
  106. </body>
  107.  
  108.  
  109. </html>
[HTML] pobierz, plaintext
user767
3.07.2011, 17:51:27
sprawdź to menu nie ma z nim żadnego problemu a śmiga wszędzie:

[PHP] pobierz, plaintext 
  1.  
  2. <ul id="nav">
  3. <li> <a href="<?php print $url; ?>">Zawartość</a>
  4. <ul>
  5. <li><a href="<?php print $url; ?>">Aktualności </a>
  6. <ul>
  7. <li><a href="<?php print $url; ?>">Dodaj</a></li>
  8. <li><a href="<?php print $url; ?>">Lista</a></li>                 
  9. </ul>
  10. </li>
  11. <li><a href="<?php print $url; ?>">Podstrony</a>
  12. <ul>
  13. <li><a href="<?php print $url; ?>">Dodaj</a></li>
  14. <li><a href="<?php print $url; ?>">Lista</a></li>                  
  15. </ul>
  16. </li>
  17. <li><a href="<?php print $url; ?>">Newsletter</a>
  18. <ul>
  19. <li><a href="<?php print $url; ?>">Wyślij</a></li>
  20. <li><a href="<?php print $url; ?>">Lista</a></li>                  
  21. </ul>
  22. </li>
  23. </ul>
  24. </li>
  25. </ul>
  26.  
  27.  
  28.  
  29.  
  30.  
  31. <ul id="nav">
  32. <li> <a href="<?php print $url; ?>wyloguj.php">Wyloguj</a></li>
  33. </ul>
  34.  
[PHP] pobierz, plaintext


i css:

[PHP] pobierz, plaintext 
  1.  
  2. /* menu */
  3. #nav{list-style: none; }
  4.  
  5. #nav ul { 
  6. padding: 0;
  7. margin+top:0;
  8. list-style: none;
  9. z-index:99;
  10. position:relative;
  11. overflow:visible; 
  12. width:120px;   	
  13. position: absolute;
  14. }
  15.  
  16. #nav li {                  
  17. margin:0;   
  18. position: relative; 
  19. float:left;
  20. width: 12em;
  21. background-color:#434242;
  22. border:solid 1px #434242;
  23. display:block;
  24. height:auto;
  25. width:120px;
  26. }
  27.  
  28. #nav ul li{ background-color:#434242;
  29. border-top-style:solid;
  30. border-bottom-style:solid;
  31. border-left-style:solid;
  32. border-right-style:solid;
  33. border-top-width:1px;
  34. border-bottom-width:1px;
  35. border-left-width:1px; 
  36. border-right-width:1px;
  37. width:120px;
  38. }
  39.  
  40. #nav ul li{ border-width:1px 1px 0 0;}
  41. #nav ul ul li{ border-width:1px 1px 0 1px;}
  42. #nav ul ul li:last-child{border-width:1px;}
  43.  
  44. #nav a {
  45. text-decoration:none; 
  46. display:block;
  47. padding: 0.1em;  
  48. margin:0.2em 0 0.2em 0.1em; 
  49. width:117px; 
  50. height:1.05em;
  51. color:#fff;
  52. font-family: Arial;
  53. font-size:11px;
  54. }
  55.  
  56. #nav a:hover, #nav li:hover{ background-color:#434242; }
  57.  
  58. #nav ul li:hover, #nav ul li a:hover{ background-color:#434242; }
  59.  
  60. #nav ul{ display:none; }
  61.  
  62. #nav ul ul, #nav ul ul ul{
  63. display:none; 
  64. position:absolute; 
  65. margin-top:-3.8em; 
  66. margin-left:120px;  
  67. }
  68.  
  69. #nav ul li>ul, #nav ul ul li>ul{ margin-top:-1.35em; }
  70.  
  71. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, 
  72. #nav li:hover ul ul ul ul ul{
  73. display:none; 	
  74. }
  75.  
  76. #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul 
  77. li:hover ul, #nav ul ul ul ul li:hover ul{
  78. display:block;
  79. }
  80.  
  81. li>ul { top: auto; left: auto; }
  82.  
  83. /* ELEMENTY STRONY */
  84.  
  85. li {
  86.   padding:3px;
  87. }
  88.  
  89. ol, ul {
  90. 	list-style: none;
  91. }
  92.  
  93.  
  94. /* reset */
  95. html, body, div, applet, object,
  96. h1, h3, h4, h5, h6, p, blockquote, pre,
  97. a, abbr, acronym, address, big, cite, code,
  98. del, dfn, em, img, ins, kbd, q, s, samp,
  99. small, strike, strong, sub, sup, tt, var,
  100. b, u, i, center, ul, li, 
  101. dl, dt, dd, ol
  102. fieldset, label,
  103.  caption, tbody, tfoot, thead, tr, th, td {
  104. 	margin: 0;
  105. 	padding: 0;
  106. 	border: 0;
  107. 	outline: 0;
  108. 	font-size: 100%;
  109. 	vertical-align: baseline;
  110. 	background: transparent;
  111. 	background-position: 0 0;
  112. 	background-repeat: no-repeat;
  113. }
  114.  
  115.  
  116.  
[PHP] pobierz, plaintext
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.