Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] Menu rozwijane w css, działa ale problem z tuningiem
lukash82
post
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Damonsson
post
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Dodaj do stylów:

[CSS] pobierz, plaintext 
  1. #top .menu li:hover{
  2.     margin            : 0;
  3.     background        : white;
  4.     display            : block;} 
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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