Menu zadziała poprawnie jeśli włączymy wyświetlanie kategorii i podkategorii, aktualnie szukam gdzie to się robi. Użytkownik @yankes zapytał czy da się zrobić takie menu http://cssmenumaker.com/menu/flat-flyout-menu więc zrobiłem (bez plusików bo do tego trzeba więcej zabawy) To menu po prostu dopasowałem na potrzeby sklepu. Da się tu zastosować prawie każde menu oparte o css. Menu wygląda tak: Więcej niż 3 podkategorie w kategorii nie testowałem jednak powinno to zadziałać nawet na większej ich ilości (jednak tego nie polecam bo utrudni to obsługę sklepu) Jak to zrobić? Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Moduły Edytujemy moduł menu i wyłączamy pokazywanie ilości produktów (niestety to jest jedyna niedogodność, z ilością w tej chwili nie działa) Następnie Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Własny styl CSS dodajemy: Kod: @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); @charset "UTF-8"; #cssmenu { padding: 0; margin: 0; border: 0; line-height: 1; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; position: relative; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0px; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: -2px; right: 0; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 1px; left: 99%; } #cssmenu ul li { float: none; } #cssmenu ul ul { margin-top: 1px; } #cssmenu ul ul li { font-weight: normal; } /* Custom CSS Styles */ #cssmenu { width: 100%; background: #333333; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; zoom: 1; font-size: 12px; } #cssmenu:before { content: ''; //* display: block;*// } #cssmenu:after { content: ''; display: table; clear: both; } #cssmenu a { display: block; padding: 15px 20px; color: #ffffff; text-decoration: none; text-transform: uppercase; } #cssmenu > ul { width: 100%; } #cssmenu ul ul { width: 200px; } #cssmenu > ul > li > a { border-right: 4px solid #1b9bff; color: #ffffff; } #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li.active a { background: #1b9bff; } #cssmenu > ul > li a:hover, #cssmenu > ul > li:hover a { background: #1b9bff; } #cssmenu li { position: relative; } #cssmenu ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -6px; } #cssmenu ul ul li.first { -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } #cssmenu ul ul li.last { -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; border-bottom: 0; } #cssmenu ul ul { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } #cssmenu ul ul { border: 1px solid #0082e7; } #cssmenu ul ul a { font-size: 12px; color: #ffffff; } #cssmenu ul ul a:hover { color: #ffffff; } #cssmenu ul ul li { border-bottom: 1px solid #0082e7; } #cssmenu ul ul li:hover > a { background: #4eb1ff; color: #ffffff; } #cssmenu.align-right > ul > li > a { border-left: 4px solid #1b9bff; border-right: none; } #cssmenu.align-right { float: right; } #cssmenu.align-right li { text-align: right; } #cssmenu.align-right ul li.has-sub > a:before { content: '+'; position: absolute; top: 50%; left: 15px; margin-top: -6px; } #cssmenu.align-right ul li.has-sub > a:after { content: none; } #cssmenu.align-right ul ul { visibility: hidden; position: absolute; top: 0; left: -100%; z-index: 598; width: 100%; } #cssmenu.align-right ul ul li.first { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } #cssmenu.align-right ul ul li.last { -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } #cssmenu.align-right ul ul { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } Następnie: Konfiguracja>>Wygląd>>Aktywny styl graficzny>>Edycja zaawansowana edytujemy plik: Menu/box.tpl czyścimy jego zawartość i wklejamy: Kod: <div class="large standard boxhead" > <span>{$boxNs->$box_id->title|escape}</span> </div> <div class="innerbox" id='cssmenu'> {if $boxNs->$box_id->text}<h5 class="boxintro">{$boxNs->$box_id->text}</h5>{/if} {if 1 == $boxNs->$box_id->format} <ul> {else} <ul> {/if} {$boxNs->$box_id->list} {if 1 == $boxNs->$box_id->link_news}<li id="category_novelties"><a href="{$boxNs->$box_id->url_new}" title="{translate key='New products'}" class="novelties"><img src="{baseDir}/public/images/1px.gif" alt="" class="px1">{translate key="New products"}</a></li>{/if} {if 1 == $boxNs->$box_id->link_promotions}<li id="category_promo"><a href="{$boxNs->$box_id->url_promotions}" title="{translate key='Products on sale'}" class="promo"><img src="{baseDir}/public/images/1px.gif" alt="" class="px1">{translate key="Products on sale"}</a></li>{/if} </ul> </div> Gotowe Powodzenia. UWAGA!! Jeśli ktoś edytował już menu powinien zwrócić uwagę na to co robi. Polecam również pozbyć się wszystkich stylów modyfikujących kolory, czcionki i inne elementy menu wstawionych przez Was przed instalacją tego menu.
Dzieki wielkie mistrzu nareszcie troche skrocimy MENU tylko jedna sprawa menu nie rozwija sie po najechaniu ;/ tylko klikam kategorie, odswieza sie strona i dopiero 1 dzial sie rozwija a reszta z menu dalej nieruchoma... dodam ze na nowej nie edytowanej skorce tez tak jest.. ;/
muszę jeszcze sprawdzić odświeżanie menu bo faktycznie styl wczytuje dopiero po jego wykonaniu, zawsze trafi się na jakiś problem
temat jest prawie ogarnięty, w tej chwili na kawałek przerwałem nad nim pracę, muszę wykonać inny projekt związany ze sklepem który prawie kończę
