[CSS][PHP]Jak z tego zrobić menu rozwijane Opcje

[darkowski]

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 
<div class="category-list clear-fix">
{if count($maincategories) > 0}
<ul>
{section name=categoryId loop=$maincategories}
<li>
	<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">
		{if isset($maincategories[categoryId].photo) &&  $maincategories[categoryId].photo !=''}
			<img src="{$maincategories[categoryId].photo}" alt="{$maincategories[td].name}"/>
		{else}
			<img src="{$DESIGNPATH}_gallery/_100_100/1.png" alt="{$maincategories[td].name}"/>
		{/if}
	</a>
	<div class="category_name">
		<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">{$maincategories[categoryId].name}</a>
	</div>
</li>
{/section}
</ul>
{/if}
</div>
 
 
 
 
[PHP] pobierz, plaintext 

Ale nie wiem co tu zmienić żeby wyświetlało tak jak ja chce

[amii]

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--]

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]

No to wystarczy, że zmodyfikujesz dla .submenu
margin-right, top, width i podłożysz wysoki z-index

[darkowski]

Znalazłem w static.css

[PHP] pobierz, plaintext 
/*
* SUBCATEGORIES LIST: WIDE
*/
 
.layout-box-type-product-list .layout-box-content > ul {
	list-style: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li {
	padding: 15px 15px 15px 130px;
	border-bottom: solid 1px #dedede;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:last-child {
	padding: 15px 15px 15px 130px;
	border-bottom: solid 0px #dedede;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:after {
	content: '.'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:hover,
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:focus,
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:active {
	text-decoration: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image {
	float: left;
	width: 100px;
	margin: 0 15px 0 -115px;
	min-height: 100px;
	line-height: 100px;
	vertical-align: middle;
	text-align: center;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image img {
	vertical-align: middle;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .name{
	margin-right: 15px;
	margin-bottom: 10px;
	font-size: 13px;
	color: black;
	font-weight: bold;
	text-decoration: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li .description {
	margin-top: 15px;
}
 
.layout-box-type-slide-show .layout-box-content {
	padding: 0px;
}
 
.nivoSlider {
	position:relative;
	width: auto !important;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
 
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
[PHP] pobierz, plaintext 

oraz

[PHP] pobierz, plaintext 
 
/*
* CATEGORY MENU
*/
 
.layout-box-type-categorymenu .layout-box-content {
	padding: 0;
}
 
.layout-box-type-categorymenu .layout-box-content p {
	padding: 10px 10px 0;
}
 
.layout-box-type-categorymenu:hover {
	z-index: 100;
}
 
.layout-box-type-categorymenu ul {
	margin: 0px 0 0;
	list-style: none;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li {
	border-top: solid 1px #dedede;
	padding-right: 10px;
	position: relative;
}
 
.layout-box-type-categorymenu .layout-box-content a {
	text-decoration: none;
	color: #000;
}
 
.layout-box-type-categorymenu .layout-box-content a:hover,
.layout-box-type-categorymenu .layout-box-content a:focus,
.layout-box-type-categorymenu .layout-box-content a:active {
	font-weight: bold;
}
#breadcrumbs ul li,
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a,
.layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
	background: transparent url('../../_images_frontend/core/icons/bullets.png') right center no-repeat;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
	display: block;
	position: relative;
	padding: 4px 10px;
	background-position: 100% -7px;
}
.layout-box-type-categorymenu .layout-box-content > ul > li.active > a {
	font-weight: bold;
}
.layout-box-type-categorymenu .layout-box-content li.current > a {
	font-weight: bold;
}
.layout-box-type-categorymenu .layout-box-content > ul > li > a {
	display: block;
	position: relative;
	padding: 4px 10px;
	background: none;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu {
	display: none;
	width: 210px;
	position: absolute;
	right: 3px;
	top: 4px;
	margin-right: -196px;
	background: transparent url('../../_images_frontend/core/backgrounds/shadow-flat.png');
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper {
	position: relative;
	left: -3px;
	top: -5px;
	padding: 2px 0 0;
	margin: 0 0 -2px;
	background: #faf0f0;
	border: solid 1px #dedede;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul {
	position: relative;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu:after,
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper:after {
	content: '.'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a {
	display: block;
	padding: 4px 10px 4px 25px;
	background-position: 10px -7px;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li.active,
.layout-box-type-categorymenu .layout-box-content > ul > li:hover {
	background: #faf0f0;
	z-index: 100;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li:hover > a {
	margin-right: 5px;
	background: #faf0f0;
	z-index: 200;
	font-weight: bold;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li:hover > .submenu {
	display: block;
}
 
[PHP] pobierz, plaintext 

Jak możesz to napisz co tu trzeba zmienić

[amii]

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

Ten post edytował amii 24.04.2014, 13:36:55

[darkowski]

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

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]

Możesz temu linkowi w JS przypsać do kliknięcia coś w stylu onclick="return false;" co zapobiega domyślnem zachowaniu.