Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozwijane menu, problem z submenu.
Forum PHP.pl > Forum > Po stronie przeglądarki
MasterChest
24.03.2013, 20:18:42
Witam.

Otóż od paru godzin męczę się ze zrobieniem rozwijanego menu.
Jakąś wiedzę w css i html posiadam, niejeden layout już zakodowałem lecz tutaj po prostu już brak mi cierpliwości bo czego bym nie ustawił/zmienił to i tak źle się wyświetla i już brak mi pomysłów.


Tak aktualnie u mnie to wygląda, zabawa marginesami i paddingami nie sprawia mi zbyt wiele przyjemności, ale nawet nie jestem w stanie ustawić tego mniej więcej równo, bo zmieniam wartość marginesu, to się przesuwa nie w tą stronę, kombinuję z paddingami, to samo.
W dodatku jak widać, tło submenu jest nierówne i już brak mi pomysłów jak to wyrównać.

Poniżej daję cały kod.
CSS:
[HTML] pobierz, plaintext 
  1. #category{
  2. background-image: url('../img/category2.png');
  3. width:100%;
  4. height:68px;
  5. margin:auto;
  6.  
  7. }
  8.  
  9. .category{
  10. width:1100px;
  11. margin:auto;
  12. }
  13.  
  14. #categories{
  15. margin-top:7px;
  16. float:left;
  17. font-family: 'Agency';
  18. font-size: 28px;
  19. list-style:none;
  20. margin-left:230px;
  21. }
  22.  
  23. #categories li{
  24. background: url('../img/line.png') 0 1px no-repeat;
  25. height:51px;
  26. margin-left:-95px;
  27. padding-left:55px;
  28. margin-right:50px;
  29. padding-right:1px;
  30. padding-top:10px;
  31. margin-bottom:-20px;
  32. float:left;
  33. }
  34.  
  35. #categories li a{
  36. margin-top:30px;
  37. color: #5e5f60;
  38. text-decoration:none;
  39. font-family: 'Agency';
  40.  
  41.  
  42. }
  43.  
  44. #categories li a:hover{
  45. color: #177be9;
  46. text-decoration:none;
  47. font-family: 'Agency';
  48. }
  49.  
  50. #categories .first{
  51. background:none;
  52. padding-left:20px;
  53.  
  54. }
  55.  
  56. -moz-transition: opacity 1s ease-in-out;
  57. -o-transition: opacity 1s ease-in-out;
  58. -ms-transition: opacity 1s ease-in-out;
  59. transition: opacity 1s ease-in-out;}
  60.  
  61. #categories li li{
  62. opacity: 0;
  63. display:block;
  64. background:none;
  65.  
  66. }
  67.  
  68. #categories li{
  69. overflow:hidden;
  70. }
  71.  
  72. #categories li:hover, #categories li:focus{
  73. overflow: visible;
  74.  
  75. }
  76.  
  77.  
  78. #subcat li li ul{
  79.  
  80. position:absolute;
  81. top:0;
  82. left:99%;
  83. background:none;
  84. }
  85.  
  86. #subcat{
  87. background-color:#ffffff;
  88. border-right:1px solid #9d9b9b;
  89. border-left:1px solid #9d9b9b;
  90. border-bottom:1px solid #9d9b9b;
  91. margin-top:15px;
  92. margin-left:-30px;
  93. float:left;
  94. font-family: 'Agency';
  95. font-size: 20px;
  96. list-style:none;
  97. margin-left:-15px;
  98. }
  99.  
  100. #subcat li{
  101.  
  102. overflow:hidden
  103.  
  104. }
  105.  
  106. #subcat li:hover{
  107. overflow:visible;
  108. }
[HTML] pobierz, plaintext


HTML:

[HTML] pobierz, plaintext 
  1. <div id="category">
  2. 		<div class="category">
  3. 			<ul id="categories">
  4. 				<li class="first"><a href="#">ELECTRONICS</a>
  5. 				<ul id="subcat">
  6. 				<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li><br />
  7. 				<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li>
  8. 				</ul></li>
  9. 				<li><a href="#">VOUCHERS</a></li>
  10. 				<li><a href="#">GAMING</a></li>
  11. 				<li><a href="#">WEBDESIGN</a></li>
  12. 			</ul>
  13. 		</div>
  14. 	</div>
[HTML] pobierz, plaintext


Efekt jaki chcę otrzymać to Submenu wyrównane z głównym menu i równomiernie rozłożone wszystkie odnośniki.
Pomożecie?


PS. Tak wiem, kod css jest troszku pokomplikowany, kombinowałem jak mogłem ale mimo wszystko nic mi nie wyszło konkretnego.
AdIoS_Neo
24.03.2013, 23:58:43
Witam,
oto działający kod:
[CSS] pobierz, plaintext 
  1. #category{
  2. 	background-image: url('../img/category2.png');
  3. 	width:100%;
  4. 	height:68px;
  5. 	margin:auto;
  6. }
  7.  
  8. .category{
  9. 	width:1100px;
  10. 	margin:auto;
  11. }
  12.  
  13. #categories{
  14. 	margin-top:7px;
  15. 	margin-left:230px;
  16. 	float:left;
  17. 	font-family: 'Agency';
  18. 	font-size: 28px;
  19. 	list-style:none;
  20. }
  21.  
  22. #categories > li{
  23. 	float:left;
  24. 	position: relative;
  25. 	background: url('../img/line.png') 0 1px no-repeat;
  26. 	height:51px;
  27. 	padding: 10px 1px 0 55px;
  28. }
  29.  
  30. #categories li a{
  31. 	margin-top:30px;
  32. 	color: #5e5f60;
  33. 	text-decoration:none;
  34. 	font-family: 'Agency';
  35. }
  36.  
  37. #categories li a:hover{
  38. 	color: #177be9;
  39. }
  40.  
  41. #categories .first{
  42. 	background:none;
  43. 	padding-left:20px;
  44. }
  45.  
  46. #categories li ul{
  47. 	position: absolute;
  48. 	top: -99999px;
  49. 	left: 0px;
  50. 	opacity: 0;
  51. 	width:100%;
  52. 	background-color:#ffffff;
  53. 	border: solid #9d9b9b;
  54. 	border-width: 0px 1px 1px 1px;
  55. 	font-size: 20px;
  56. 	list-style:none;
  57.  
  58. 	transition: opacity .4s ease-in-out;
  59. 	-moz-transition: opacity .4s ease-in-out;
  60. 	-webkit-transition: opacity .4s ease-in-out;
  61. 	-o-transition: opacity .4s ease-in-out;
  62. 	-ms-transition: opacity .4s ease-in-out;
  63. }
  64.  
  65. #categories li:hover>ul, #categories li:focus>ul{
  66. 	top: 100%;
  67. 	opacity: 1;
  68. }
  69.  
  70.  
  71. #subcat li li ul{
  72. 	position:absolute;
  73. 	top:0;
  74. 	left:99%;
  75. 	background:none;
  76. }
  77.  
  78. #subcat li{
  79. 	overflow:hidden
  80. }
  81.  
  82. #subcat li:hover{
  83. 	overflow:visible;
  84. }
[CSS] pobierz, plaintext


w html'u chyba nic nie zmieniałem ale na wszelki wypadek wkleję:
[HTML] pobierz, plaintext 
  1. <div id="category">
  2. 	<div class="category">
  3. 		<ul id="categories">
  4. 			<li class="first">
  5. 				<a href="#">ELECTRONICS</a>
  6. 				<ul id="subcat">
  7. 					<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li>
  8. 					<li class="first"><a href="">&rsaquo;&rsaquo; SUBCAT</a></li>
  9. 				</ul>
  10. 			</li>
  11. 			<li>
  12. 				<a href="#">VOUCHERS</a>
  13. 				<ul>
  14. 					<li>test</li>
  15. 				</ul>
  16. 			</li>
  17. 			<li>
  18. 				<a href="#">GAMING</a>
  19. 			</li>
  20. 			<li>
  21. 				<a href="#">WEBDESIGN</a>
  22. 			</li>
  23. 		</ul>
  24. 	</div>
  25. </div>
[HTML] pobierz, plaintext
MasterChest
26.03.2013, 19:49:43
Dzięki.
Jeszcze parę poprawek musiałem zrobić by odpowiednio dostosować ale śmiga. smile.gif
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.