Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Menu z linkami pod nim, po najechaniu
Forum PHP.pl > Forum > Przedszkole
thomson89
19.11.2009, 12:01:52
Witam!

Chciałbym zrobić takie menu, aby po najechaniu na któryś przycisk pod nim, pokazałyby się dwa, trzy link (ale same linki). Zrobiełm menu, ale kompletnie nie wiem jak zrobić aby pod przyciskiem pojawiały się te linki.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 	#menu_podstrona ul, ul li {
  5. 		display: block;
  6. 		list-style: none;
  7. 		margin: 0;
  8. 		padding: 0;
  9. 	}
  10.  
  11. 	#menu_podstrona ul li {
  12. 		float: left;
  13. 	}
  14.  
  15. 	#menu_podstrona ul a:link, ul a:visited {
  16. 		text-decoration: none;
  17. 		display: block;
  18. 		width: 90px;
  19. 		text-align: center;
  20. 		background-color: #ccc;
  21. 		color: #000;
  22. 		border: 2px outset #ccc;
  23. 		padding: 5px;
  24. 	}
  25.  
  26. 	#menu_podstrona ul a:hover {
  27. 		border-style: inset;
  28. 		padding: 7px 3px 3px 7px;
  29. 	}		
  30. 	</style>
  31. </head>
  32. <body>
  33. <div id="menu_podstrona">
  34. <table>
  35. <tr>
  36. 	<td>		
  37. 		<ul>
  38. 		<li><a href="">Pokaż grupy</a><br></li>
  39. 		<li><a href="">Pokaż strefy</a></li>
  40. 		<li><a href="">Pokaż obszary</a></li>
  41. 		<li><a href="">Dodaj</a></li>
  42. 		<li><a href="">Edytuj</a></li>
  43. 		<li><a href="">Usuń</a></li>
  44. 		</ul>
  45. 		</div>
  46. 	</td>
  47. </tr>
  48. </table>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext
Daiquiri
19.11.2009, 12:28:46
Mała podpowiedź, zastanów się może nad usunięciem tabelki. W tabelkach przedstawia się dane tabelaryczne, nie "kroi" strony.
thomson89
19.11.2009, 18:48:26
No, dobrze. Dzięki.

Ale teraz, chciałbym, aby te linki wyświetlały się po środku obszaru pod przyciskiem. W tej chwili, linki zaczynają się wyświetlać od przycisku na który najechałem, do końca. A chcę, żeby środek wszystkich linków był pod danym przyciskiem.

Mój kod:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
  3. <style type="text/css">
  4.  
  5. #menudemo08 a {float: left;}
  6.  
  7. #menudemo08 dl {width: 700px;}
  8.  
  9. * {
  10.  
  11. margin: 0;
  12.  
  13. padding: 0;
  14.  
  15. }
  16.  
  17. #menudemo08 {
  18.  
  19. position: relative;
  20. list-style: none;
  21. border: solid #fff;
  22. border-top-width:0;
  23. border-bottom-width:20px;
  24. border-left-width:0;
  25. height: 37px;
  26. background: #fff;
  27.  
  28. }
  29.  
  30. #menudemo08 li,
  31.  
  32. #menudemo08 dd {
  33.  
  34. float: left;
  35.  
  36. }
  37. /* wyglad ogolny */
  38. #menudemo08 li {
  39.  
  40. border: solid #fff;
  41.  
  42. border-width: 1px 0;
  43.  
  44. }
  45. /* wyglad ogolny ul */
  46. #menudemo08 ul {
  47.  
  48. list-style: none;
  49.  
  50. border: 1px solid #fff;
  51.  
  52. }
  53. /* wyglad linkow (ogolny) */
  54. #menudemo08 a {
  55.  
  56. color: #000;
  57. font-size: 16px;
  58. text-decoration: none;
  59. display: block;
  60. border: 2px outset #ccc;
  61. line-height: 22px;
  62. width: 90px;
  63. padding: 5px;
  64. text-align: center;
  65.  
  66. }
  67. /* dl wyswietlanie */
  68. #menudemo08 li dl {
  69.  
  70. display: none;
  71.  
  72. }
  73. /* wyglad obszaru z linkami */
  74. #menudemo08 li:hover dl {
  75.  
  76. display: block;
  77. position: absolute;
  78. top: 38px;
  79. background: #fff;
  80. border: 1px solid #fff;
  81.  
  82. }
  83. /* wyglad linku */
  84. #menudemo08 li dd a {
  85.  
  86. font-size: 14px;
  87. font-weight: normal;
  88. padding: 0 6px;
  89. border: 1px solid #fff;
  90. line-height: 22px;
  91. height: 22px;
  92. background: #fff;
  93. width: auto;
  94.  
  95. }
  96.  
  97. /* kolor przycisku */
  98. #item a {
  99.  
  100. background-color: #ccc;
  101.  
  102. }
  103. /* kolor po najechaniu */
  104. #menudemo08 a:hover {
  105.  
  106. border-style: inset;
  107.  
  108. }
  109. /* kolor linku */
  110. #menudemo08 li dd a:hover {
  111.  
  112. text-decoration: underline;
  113. border: 1px solid #fff;
  114.  
  115. }
  116.  
  117. </style>
  118. </head>
  119.  
  120. <body>
  121.  
  122. <ul id="menudemo08">
  123.  
  124. <li id="item"><a href="">Pokaż grupy</a><br></li>
  125. <li id="item"><a href="">Pokaż strefy</a></li>
  126. <li id="item"><a href="">Pokaż obszary</a></li>
  127.  
  128. <li id="item"><a href="">Dodaj</a>
  129.  
  130. <dl>
  131.  
  132. <dd><a href="maxi05.php">Przypis</a></dd>
  133. <dd><a href="maxi05.php">Grupę</a></dd>
  134. <dd><a href="maxi04.php">Strefę</a></dd>
  135. <dd><a href="maxi03.php">Obszar</a></dd>
  136.  
  137. </dl>
  138.  
  139. </li>
  140.  
  141. <li id="item"><a href="mini.php">Edytuj</a>
  142.  
  143. <dl>
  144.  
  145. <dd><a href="maxi05.php">Przypisy</a></dd>
  146. <dd><a href="maxi05.php">Grupy</a></dd>
  147. <dd><a href="maxi04.php">Strefy</a></dd>
  148. <dd><a href="maxi03.php">Obszary</a></dd>
  149.  
  150. </dl>
  151.  
  152. </li>
  153.  
  154. <li id="item"><a href="micro.php">Usuń</a>
  155.  
  156. <dl>
  157.  
  158. <dd><a href="maxi05.php">Przypis</a></dd>
  159. <dd><a href="maxi05.php">Grupę</a></dd>
  160. <dd><a href="maxi04.php">Strefę</a></dd>
  161. <dd><a href="maxi03.php">Obszar</a></dd>
  162.  
  163. </dl>
  164.  
  165. </li>
  166.  
  167. </ul>
  168.  
  169. </body>
[HTML] pobierz, plaintext
Blame
19.11.2009, 18:53:46
Nic nie przychodzi mi do głowy ale możesz po prostu pokombinować z marginami.
thomson89
19.11.2009, 19:16:34
blinksmiley.gif Ale dla każdego buttona, będzie trzeba inne marginy dać. Co jeżeli zmienię te linki? Dodam jakiś? Znowu marginy?

Dla zobrazowania
Daiquiri
19.11.2009, 20:15:53
Przecież po to masz CSS, żeby zmieniać wygląd masowo smile.gif. Daj margin-left: -50%; dla elementu #menudemo08 li dd a. Powinno być OK.

@down Nie rozumiem
thomson89
19.11.2009, 20:26:23
Nie wiem czemu, ale -100...
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.