Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Jak z tego zrobić menu rozwijane
Forum PHP.pl > Forum > Przedszkole
darkowski
23.04.2014, 11:48:41
Witam zainstalowałem sobie darmowy sklep GEKOSALE i chciałbym go troche zmodyfikować tzn. chciałbym żeby menu kategorii wyglądało inaczej czli, że jak najade myszką na jakiś produkt to wtedy rozwine mi się podkategoria czyli np.

Kategoria

BLUZY
(rozwija się)
- z kapturem
- bez kaptura itd.

Na forum gekosale wyczytałem, że za kategorie odpowiedzialny jest maincategoriesbox który wygląda tak:

[PHP] pobierz, plaintext 
  1. <div class="category-list clear-fix">
  2. {if count($maincategories) > 0}
  3. <ul>
  4. {section name=categoryId loop=$maincategories}
  5. <li>
  6. 	<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">
  7. 		{if isset($maincategories[categoryId].photo) &&  $maincategories[categoryId].photo !=''}
  8. 			<img src="{$maincategories[categoryId].photo}" alt="{$maincategories[td].name}"/>
  9. 		{else}
  10. 			<img src="{$DESIGNPATH}_gallery/_100_100/1.png" alt="{$maincategories[td].name}"/>
  11. 		{/if}
  12. 	</a>
  13. 	<div class="category_name">
  14. 		<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">{$maincategories[categoryId].name}</a>
  15. 	</div>
  16. </li>
  17. {/section}
  18. </ul>
  19. {/if}
  20. </div>
  21.  
  22.  
  23.  
  24.  
[PHP] pobierz, plaintext


Ale nie wiem co tu zmienić żeby wyświetlało tak jak ja chce
amii
23.04.2014, 15:22:59
Zakładam, że ta lista podkategorii jest już tworzona jeśli tak to dopisz wewnątrz elementu listy następną listę (kategorii powiązanych z produktem )- domyślnie jest ukryta. Następnie możesz to obsłużyć nawet zwykłym hover w css - czyli zamienić display: none na display: block.
No i na deser pozostaje kwestia ostylowania w css co najważniejsze to spozycjonuj kontener czyli najprawdopodobniej category-list jako relative a doczepianą listę jako absolute, reszta to już kwestia estetyki.
-darkowski-
23.04.2014, 16:34:34
Sprawa wyąda tak że orginalnie menu jest takie że jak się najedzie na kategorie to sie wysówają podkategorie ale w bok a nie w dół i to bym chciał zmienić.

Czyli ten kod co podałem to nie jest do menu tyljo trzeba pogrzebać w pliki css.

Moja strona to amnezja.net.pl i tam jest menu które chciałbym zmienić
amii
24.04.2014, 11:40:25
No to wystarczy, że zmodyfikujesz dla .submenu
margin-right, top, width i podłożysz wysoki z-index
darkowski
24.04.2014, 13:14:55
Znalazłem w static.css 

[PHP] pobierz, plaintext 
  1. /*
  2. * SUBCATEGORIES LIST: WIDE
  3. */
  4.  
  5. .layout-box-type-product-list .layout-box-content > ul {
  6. 	list-style: none;
  7. }
  8.  
  9. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li {
  10. 	padding: 15px 15px 15px 130px;
  11. 	border-bottom: solid 1px #dedede;
  12. }
  13.  
  14. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:last-child {
  15. 	padding: 15px 15px 15px 130px;
  16. 	border-bottom: solid 0px #dedede;
  17. }
  18.  
  19. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:after {
  20. 	content: '.'; 
  21. 	display: block; 
  22. 	height: 0; 
  23. 	clear: both; 
  24. 	visibility: hidden;
  25. }
  26.  
  27. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:hover,
  28. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:focus,
  29. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:active {
  30. 	text-decoration: none;
  31. }
  32.  
  33. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image {
  34. 	float: left;
  35. 	width: 100px;
  36. 	margin: 0 15px 0 -115px;
  37. 	min-height: 100px;
  38. 	line-height: 100px;
  39. 	vertical-align: middle;
  40. 	text-align: center;
  41. }
  42.  
  43. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image img {
  44. 	vertical-align: middle;
  45. }
  46.  
  47. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .name{
  48. 	margin-right: 15px;
  49. 	margin-bottom: 10px;
  50. 	font-size: 13px;
  51. 	color: black;
  52. 	font-weight: bold;
  53. 	text-decoration: none;
  54. }
  55.  
  56. .layout-box-type-product-list .layout-box-content > ul.subcategories-list > li .description {
  57. 	margin-top: 15px;
  58. }
  59.  
  60. .layout-box-type-slide-show .layout-box-content {
  61. 	padding: 0px;
  62. }
  63.  
  64. .nivoSlider {
  65. 	position:relative;
  66. 	width: auto !important;
  67. }
  68. .nivoSlider img {
  69. 	position:absolute;
  70. 	top:0px;
  71. 	left:0px;
  72. }
  73.  
  74. .nivoSlider a.nivo-imageLink {
  75. 	position:absolute;
  76. 	top:0px;
  77. 	left:0px;
  78. 	width:100%;
  79. 	height:100%;
  80. 	border:0;
  81. 	padding:0;
  82. 	margin:0;
  83. 	z-index:6;
  84. 	display:none;
  85. }
[PHP] pobierz, plaintext


oraz 

[PHP] pobierz, plaintext 
  1.  
  2. /*
  3. * CATEGORY MENU
  4. */
  5.  
  6. .layout-box-type-categorymenu .layout-box-content {
  7. 	padding: 0;
  8. }
  9.  
  10. .layout-box-type-categorymenu .layout-box-content p {
  11. 	padding: 10px 10px 0;
  12. }
  13.  
  14. .layout-box-type-categorymenu:hover {
  15. 	z-index: 100;
  16. }
  17.  
  18. .layout-box-type-categorymenu ul {
  19. 	margin: 0px 0 0;
  20. 	list-style: none;
  21. }
  22.  
  23. .layout-box-type-categorymenu .layout-box-content > ul > li {
  24. 	border-top: solid 1px #dedede;
  25. 	padding-right: 10px;
  26. 	position: relative;
  27. }
  28.  
  29. .layout-box-type-categorymenu .layout-box-content a {
  30. 	text-decoration: none;
  31. 	color: #000;
  32. }
  33.  
  34. .layout-box-type-categorymenu .layout-box-content a:hover,
  35. .layout-box-type-categorymenu .layout-box-content a:focus,
  36. .layout-box-type-categorymenu .layout-box-content a:active {
  37. 	font-weight: bold;
  38. }
  39. #breadcrumbs ul li,
  40. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a,
  41. .layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
  42. 	background: transparent url('../../_images_frontend/core/icons/bullets.png') right center no-repeat;
  43. }
  44.  
  45. .layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
  46. 	display: block;
  47. 	position: relative;
  48. 	padding: 4px 10px;
  49. 	background-position: 100% -7px;
  50. }
  51. .layout-box-type-categorymenu .layout-box-content > ul > li.active > a {
  52. 	font-weight: bold;
  53. }
  54. .layout-box-type-categorymenu .layout-box-content li.current > a {
  55. 	font-weight: bold;
  56. }
  57. .layout-box-type-categorymenu .layout-box-content > ul > li > a {
  58. 	display: block;
  59. 	position: relative;
  60. 	padding: 4px 10px;
  61. 	background: none;
  62. }
  63.  
  64. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu {
  65. 	display: none;
  66. 	width: 210px;
  67. 	position: absolute;
  68. 	right: 3px;
  69. 	top: 4px;
  70. 	margin-right: -196px;
  71. 	background: transparent url('../../_images_frontend/core/backgrounds/shadow-flat.png');
  72. }
  73.  
  74. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper {
  75. 	position: relative;
  76. 	left: -3px;
  77. 	top: -5px;
  78. 	padding: 2px 0 0;
  79. 	margin: 0 0 -2px;
  80. 	background: #faf0f0;
  81. 	border: solid 1px #dedede;
  82. }
  83.  
  84. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul {
  85. 	position: relative;
  86. }
  87.  
  88. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu:after,
  89. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper:after {
  90. 	content: '.'; 
  91. 	display: block; 
  92. 	height: 0; 
  93. 	clear: both; 
  94. 	visibility: hidden;
  95. }
  96.  
  97. .layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a {
  98. 	display: block;
  99. 	padding: 4px 10px 4px 25px;
  100. 	background-position: 10px -7px;
  101. }
  102.  
  103. .layout-box-type-categorymenu .layout-box-content > ul > li.active,
  104. .layout-box-type-categorymenu .layout-box-content > ul > li:hover {
  105. 	background: #faf0f0;
  106. 	z-index: 100;
  107. }
  108.  
  109. .layout-box-type-categorymenu .layout-box-content > ul > li:hover > a {
  110. 	margin-right: 5px;
  111. 	background: #faf0f0;
  112. 	z-index: 200;
  113. 	font-weight: bold;
  114. }
  115.  
  116. .layout-box-type-categorymenu .layout-box-content > ul > li:hover > .submenu {
  117. 	display: block;
  118. }
  119.  
[PHP] pobierz, plaintext


Jak możesz to napisz co tu trzeba zmienić
amii
24.04.2014, 13:35:56
No już Ci powiedziałem co powinieneś zrobić. Weź sobie za pomocą konsoli potestuj (ja używam konsoli w Chrome) tam możesz zmieniać i od razu masz efekt na ekranie mi to zajęło 5 sek. Jak sobie dopasujesz to wyedytuj w css (z tego co widzę to .submenu masz w http://amnezja.net.pl/design/_css_frontend...e/gekosale.css
darkowski
25.04.2014, 19:53:28
Ale że niby jak za pomicą konsoli. Daje zbadaj element i co dalej bo nie wiem za bardzo jak tego używać

ok skumałem biggrin.gif

To rozwijanie powiedzmy opanowałem, a dałoby się zrobić tak żeby po najechaniu na napis BLUZY to ten link nie byłby aktywany tzn. żeby się nie dało w niego klikać tylko żeby po najechaniu na niego powodowało rozwinięcie menu, ponieważ jak kliknie się w niego to wychodzi badziewie a ja nie wiem jak to zmienić czyli żeby zdjęcie było na środku i napis pod nim a nie tak jak teraz rozwalone to wyszystko
amii
26.04.2014, 17:19:08
Możesz temu linkowi w JS przypsać do kliknięcia coś w stylu onclick="return false;" co zapobiega domyślnem zachowaniu.
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.