Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Menu rozwijane w css
Forum PHP.pl > Forum > Przedszkole
lukash82
27.10.2011, 10:40:25
Witam,

Na podstawie http://www.alistapart.com/articles/dropdowns/ zrobiłem takie testowe menu rozwijane. Chciałbym je jednak nieco zmodyfikować ale pomysły mi się skończyły i nie bardzo wiem jak ten temat dalej ruszyć. Działający kod wygląda tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body{
  6. 	background		: grey;}
  7. #top .menu{
  8. 	padding			: 0;
  9. 	margin			: 0 auto;
  10. 	height			: 30px;
  11. 	width				: 300px;
  12. 	text-align			: center;
  13. 	background		: red;}
  14. #top .menu ul{
  15. 	padding			: 0;
  16.   	margin			: 0 auto;
  17.   	list-style			: none;
  18. 	float				: none;}
  19. #top .menu li{
  20.   	position			: relative;
  21. 	margin			: 0;
  22. 	text-align			: center;
  23. 	height			: 30px;
  24. 	float				: left;
  25. 	width				: 100px;}
  26. #top .menu a{
  27. 	margin			: 0;
  28. 	padding			: 0 0 10px 0;
  29. 	display			: block;}
  30. #top .menu a:hover{
  31. 	margin			: 0;
  32. 	padding			: 0 0 10px 0;
  33. 	background		: white;
  34. 	display			: block;}
  35. #top .menu li ul{
  36. 	display			: none;
  37.   	position			: absolute; 
  38.   	top				: 0;
  39.   	left				: 0;}
  40. #top .menu li > ul {
  41. 	top				: auto;
  42. 	left				: auto;}
  43. #top .menu li:hover ul, li.over ul{ 
  44. 	display			: block;
  45. 	background		: green;
  46. 	margin			: 0;}
  47. </style>
  48. <script type="text/javascript"><!--//--><![CDATA[//><!--
  49. 	startList = function() {
  50. 		if (document.all&&document.getElementById) {
  51. 			navRoot = document.getElementById("nav");
  52. 			for (i=0; i<navRoot.childNodes.length; i++) {
  53. 				node = navRoot.childNodes[i];
  54. 				if (node.nodeName=="LI") {
  55. 					node.onmouseover=function() {
  56. 						this.className+=" over";
  57. 					}
  58. 					node.onmouseout=function() {
  59. 						this.className=this.className.replace(" over", "");
  60. 					}
  61. 				}
  62. 			}
  63. 		}
  64. 	}
  65. 	window.onload=startList;
  66. //--><!]]></script>
  67. </head>
  68. <body>
  69. <div id="top">
  70. 	<div class="menu">
  71. 		<ul id="nav">
  72. 			<li><a href="#">menu 1</a></li>
  73. 			<li><a href="#">menu 2</a>
  74. 				<ul>
  75. 					<li><a href="#">podmenu 2-1</a></li>
  76. 					<li><a href="#">podmenu 2-2</a></li>
  77. 					<li><a href="#">podmenu 2-3</a></li>
  78. 				</ul>
  79. 			</li>
  80. 			<li><a href="#">menu 3</a></li>
  81. 		</ul>
  82. 	</div>
  83. </div>
  84. </body>
  85. </html>
[HTML] pobierz, plaintext


I teraz jak najeżdża się na menu to tło zmienia się na białe. Następnie gdy najedziemy na któreś podmenu to wtedy ono też robi się białe jednak tło głównego menu wraca do koloru czerwonego w tym przypadku. Efekt jaki chciałbym osiągnąć to po najechaniu na podmenu, menu główne dalej pozostaje podświetlone na biało. Maci na to jakiś pomysł może?
Damonsson
27.10.2011, 15:11:39
Dodaj do stylów:

[CSS] pobierz, plaintext 
  1. #top .menu li:hover{
  2.     margin            : 0;
  3.     background        : white;
  4.     display            : block;} 
[CSS] 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.