magentoforum.pl

witam,
Poniżej znajduje się instrukcja implementacji pionowego menu kategorii (menu umieszczonego w lewej kolumnie).

a) W app/design/frontend/default/twoj_motyw/template/catalog/navigation/ tworzymy plik left_menu.phtml o następującej zawartości:

<div class="box vert-nav">
    <div class="head">
        <h3><?php echo $this->__('Category Navigation:') ?></h3>
    </div>
    <div class="border-creator">
        <ul id="nav_vert">
        <?php foreach ($this->getStoreCategories() as $_category): ?>
        <?php echo $this->drawItem($_category) ?>
        <?php endforeach ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topLeftLinks') ?>
</div>

b) W app/design/frontend/default/twoj_motyw/layout/catalog.xml odnajdujemy:

<reference name="left">
       	<block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml"/>
</reference>

i np powyżej dodajemy (oczywiście blok z menu można ustawić wg własnych upodobań):

<reference name="left">
	<block type="catalog/navigation" name="catalog.vertnav" template="catalog/navigation/left_menu.phtml" />
</reference>

c) Otwieramy skin/frontend/default/twoj_motyw/css/menu.css i poniżej:

/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; }

dodajemy następujący fragment odpowiadający za styl menu (tu również wszystkie kolory itp można definiować według swoich upodobań):

#nav_vert { background:#CED0CC; padding:0 20px; font-size:1.1em; }
/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav_vert li { position:relative; text-align:left; }
#nav_vert li.over { z-index:999; }
#nav_vert a,
#nav_vert a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav_vert span { display:block; cursor:pointer; white-space:nowrap; }
#nav_vert li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav_vert li { float:none; }
#nav_vert li.active a { color:#d96708; }
#nav_vert a { float:left; padding:5px 12px 6px 8px; color:#ffffff; font-weight:bold; }
#nav_vert li.over a,
#nav_vert a:hover { color:#d96708; }

/************ 1ST LEVEL ************/
#nav_vert ul li,
#nav_vert ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/nav_divider.gif) repeat-x 0 100%; }
/*#nav ul li.over { background:#d5e4eb url(../images/nav_divider.gif) repeat-x 0 100%; }*/
#nav_vert ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav_vert ul a,
#nav_vert ul a:hover { float:none; padding:0; background:none; }
#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav_vert ul { position:absolute; width:15em; top:10px; left:-10000px; border:1px solid #899ba5; }

/* Show menu */
#nav_vert li.over > ul { left:115px; }
#nav_vert li.over > ul li.over > ul { left:100px; }
#nav_vert li.over ul ul { left:-10000px; }

#nav_vert ul li a { background:#ecf3f6; }
#nav_vert ul li a:hover { background:#d5e4eb; }
#nav_vert ul li a,
#nav_vert ul li a:hover { color:#2f2f2f !important; }
#nav_vert ul span, #nav_vert ul li.last li span { padding:3px 15px 4px 15px;}

/************ 3RD+ LEVEL ************/
#nav_vert ul ul { top:5px; }[/code]
d) Otwieramy skin/frontend/default/twoj_motyw/css/boxes.css gdzie poniżej:
Kod: Zaznacz cały
.narrow-by dd {
    background:url(../images/narrow_by_dd_bg.gif) repeat-x 0 100%;
    padding:0 12px .8em 12px;
    }
.narrow-by dd li { margin-bottom:.3em; line-height:1.3em; }
.narrow-by dd.last { background:none; }

należy dodać:
[code]
/********************** Vertical Menu */
.vert-nav .head {
    margin:0;
    background:url(../images/vert_menu_head.gif) no-repeat;
    height:24px;
    }
.vert-nav h3 { display:none; }
.vert-nav .border-creator { border-style:solid; border-color:#848484; border-width:0 1px 1px 1px; }

e) Ostatnim już krokiem będzie utworzenie pliku graficznego (195x24px) z nagłówkiem dla boxu menu. Plik wystarczy zapisać jako vert_menu_head.gif i wrzucić do katalogu skin/frontend/default/twoj_motyw/images/

Witam!

Zrobiłam wszystko i żadnych zmian na stronie nie widzę

witam,
Dziwne, ja po wejściu na Twoją stronkę widzę menu. Jeśli możesz to wyczyść cache zarówno ten sklepowy jak i cache przeglądarki lub wejdź na stronkę i przeładuj ją (kombinacja Ctrl + F5).

Rzeczywiście, wyczyściłam cache i wszystko gra, sorry za panikę

Witam,

A ja zrobiłem jak wyżej opisano - wszystko wyszło ok, tylko menu pionowe jakoś "koślawo" wygląda w IE - w FF ok, całkiem nieźle.
Walczył już ktoś z css pod IE żeby menu było ok, i coś podpowie ... początkującemu ????

linek http://www.sklep.randam.pl - tylko nie krytykujcie odrazu, to raptem dopiero kilka dni pracy - pls....

Natomiast pozytywna krytyka mile widziana. Nad wizerunkiem jeszcze cały czas pracuję i uczę się z tego jak i inyych forów.

Pozdrawiam
Mi

witam,
z jakiej wersji IE korzystasz?? u mnie na FF 3.0.3 i IE 7.0 wszystko wygląda normalnie.

IE 7.0.5730.11
FF 3.0.6

Zamieszczam zrzucik ekranowy

p.s. Chodzi o to przesunięcie

IE 8.0 (dokładnie 8.0.6) rozwiązał problem

Witam,

po pierwsze dzięki za super tutorial. Udało mi się wprowadzić pionowe menu Mam jednak pytanie w jakich plikach pogrzebać aby uzyskać następujący efekt:



Chciałbym uzyskać taki oto kod z tym że chciałbym aby domyślnie pojawiały się jedynie główne kategorie, natomiast podkategoria wyświetlałaby się tylko dla wybranej kategorii po kliknięciu w nią. Czyli na początku wyświetla się lista <ul class="level0"> a następnie gdy kliknie się któryś element wyświetla się cała lista level0 a kliknięty element z tej listy przybiera class="selected" i wyświetla się lista <ul class="level1"> dla danej kategorii jeśli istnieje. To samo ma się dziać z elementami listy level1 i wtedy wyświetla się level2.

Mam nadzieję że nie zamotałem zbytnio Dla przykładu podam stronę: http://www.needbead.pl - proszę kliknąć np. półfabrykaty i strona się przeładowuje wraz z rozwiniętymi podkategoriami półfabrykatów.

Z góry dziękuję

Witam

Zrobiłem wszystko według instrukcji i brak jakichkolwiek efektów na stronie głównej. Wyczyściłem cały cache przeglądarki i nadal nic, odświerzyłem stronę kombinacją klawiszy ctrl+F5 i nadal nic

Proszę o pomoc, co mogłem zrobić źle

Z góry dziękuję za pomoc

edit. odśwerzyłem cache w sklepie i pojwiła się belka z obrazkiem menu którą stworzyłem jednak brak jest reszty menu. Kategorie utworzyłem. Nie wiem co jest nie tak, co mogłem zrobić źle, że nie wyświetlają się kategorie pogrupowane w menu

Ja mam coś takiego z tym menu po lewej:

Są kategorie główne zawierające podkategorie. Jak klikam na podkategorii to jest OK, jak klikam w którąś z kategorii głównych to mam dodatkowe niebieskie menu a w nim wyświetlają się podkategorie a poniżej mam to szare menu (czyli to które ma być) z powyższego kodu zawierające kategorie główne. Co może być nie tak? Chciałbym mieć tylko 1 menu wynikające z powyższego kodu. Przeglądarka to FireFox.

Reasumując: jak kliknę w kategorię główną to mam bezpośrednio pod sobą 2 menu z czego pierwsze jest niepotrzebne, a to co się w nim wyświetla (podkategorie) chce by było wyświetlane w tym drugim menu.

Zauważyłem, że niechciane menu pojawia się, gdy klikam w taką pozycję w menu, która posiada podkategorie.