Strona główna forum Wsparcie Tutoriale Pionowe menu kategorii w Magento

Pionowe menu kategorii w Magento

Czyli zrób to sam, krok po kroku...

Post 11 lis 2008, o 20:16
jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

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:
.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/
Nie masz wystarczających uprawnień, aby zobaczyć pliki załączone do tego postu.

Pionowe menu kategorii w Magento

PostTeraz jest 29 mar 2024, o 01:46
Google

Posty: 427
Lokalizacja: Internet


Posty: 74
Gadu-Gadu: 0

Witam!

Zrobiłam wszystko i żadnych zmian na stronie nie widzę :-(
Uśmiechnij się - jutro możesz nie mieć zębów ...

jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

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).


Posty: 74
Gadu-Gadu: 0

Rzeczywiście, wyczyściłam cache i wszystko gra, sorry za panikę :-)
Uśmiechnij się - jutro możesz nie mieć zębów ...


Posty: 9
Gadu-Gadu: 0

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

jemoon Avatar użytkownika
Administrator

Posty: 529
Lokalizacja: Gdańsk
Gadu-Gadu: 0

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


Posty: 9
Gadu-Gadu: 0

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 :lol:
Nie masz wystarczających uprawnień, aby zobaczyć pliki załączone do tego postu.


Posty: 8
Gadu-Gadu: 5194042

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:

<div id="kategorie">
   <ul class="level0">
      <li class="selected">
         <a href="#"><span>Kategoria główna 1</span></a>
         <ul class="level1">
            <li>
               <a href="#"><span>Podkategoria 1</span></a>
            </li>
            <li class="selected">
               <a href="#"><span>Podkategoria 2</span></a>
               <ul class="level2">
                  <li>
                     <a href="#"><span>Pod-podkategoria 1</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Pod-podkategoria 2</span></a>
                  </li>                                       
               </ul>
            </li>
         </ul>
      </li>
      <li>
         <a href="#"><span>Kategoria główna 2</span></a>
      </li>                                     
   </ul>
</div>


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ę ;)

Post 30 kwi 2009, o 09:48

Posty: 1
Gadu-Gadu: 0

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 :cry:

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 :(

Post 12 maja 2009, o 12:49

Posty: 4
Gadu-Gadu: 0

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.

Następna strona

Powrót do Tutoriale