Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Rozwijane menu, problem z submenu.
MasterChest
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 16.01.2013

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

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.

(IMG:http://imageshack.us/scaled/landing/547/kuuuu.png)
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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
AdIoS_Neo
post
Post #2





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

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

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
Go to the top of the page
+Quote Post
MasterChest
post
Post #3





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 16.01.2013

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

Dzięki.
Jeszcze parę poprawek musiałem zrobić by odpowiednio dostosować ale śmiga. (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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