Edycja rozwijanego menu kategorii – poradnik Shoper

shoper_logo kopiaWitajcie po dłuższej przerwie 🙂 dzisiejszy wpis stworzyłem na prośbę pana Patryka C. i mam nadzieję, że efekt końcowy będzie zadowalający. Efekt nad którym popracujemy to „Kurtyna kategorii” czyli trochę większe menu rozwijane od tego które jest dostępne w standardzie.

Oczywiście efekt końcowy jest kompromisem pomiędzy tym co chciałbym osiągnąć a tym co można zrobić edytując tylko i wyłącznie kod CSS. Jak wiecie z poprzednich poradników należy unikać edycji plików HTML (.tpl) gdyż po ich edycji nie będą już podlegać automatycznej aktualizacji co może prowadzić do późniejszych problemów.

Przejdźmy może do meritum bo pisanie po nocach nie należy najbardziej wydajnych sposobów pracy 🙂

 

Na początek kilka przykładów tego co rozumiem przez pojęcie „Kurtyny kategorii”. Takie menu stosuje się najczęściej przy rozbudowanym drzewie kategorii ale co bardzo istotne drzewo nie powinno być wielopoziomowe. Czyli jeżeli mamy liczne kategorie z podtkategoriami które mają podkategorie a te mają kolejne potkategorie to w sumie powinniśmy przemyśleć drzewko raz jeszcze i trochę je zoptymalizwować 🙂

Tu możecie zobaczyć przykład ze sklepu answear.com:

blog_12_ans

Jak widać na załączonym obrazku mamy mało kategorii głównych kilka podkategorii drugiego rzędu i sporo kategorii trzeciego rzędu.

Poniżej zobaczcie jak wygląda standardowe menu w sklepach Shoper:

blog_12_szabl

A teraz efekt który chciałem osiągnąć w tym poradniku:

blog_12_menu

Jak możecie zobaczyć po najechaniu kursorem myszki wyświetla mi się lista wszystkich kategorii i ich podkategorii. Dodatkowo kategorie główne mają powiększony rozmiar fonta i dodany czerwony kolor tak byście łatwiej mogli tworzyć coś w rodzaju działów.

Przejdźmy zatem do samego kodu. Jak wspomniałem na początku wpisu całość robimy samym kodem CSS. Od dzisiaj kod wyświetlać się będzie trochę inaczej z racji zastosowania małego dodatku do wordpresa 🙂 Mam nadzieje że zwiększy to czytelność samego kodu poradników.

/**/
.menu ul {
margin: 0;
}
.menu .innermenu ul li.parent{
padding: 0 10px;
}
.menu .innermenu li.parent .submenu li {
float: left;
border-bottom: 0;
padding: 0;
}
.menu .innermenu li.parent .submenu li.parent{
padding: 0 10px 0 0;
background: #fff;
}
.menu .innermenu li.parent .submenu > ul.level1 {
margin-top: 0;
background: #fff;
width: 935px;
min-height: 240px;
padding: 10px;
}
.menu .innermenu li.parent .submenu li h3 a {
color: #333;
}
.menu .innermenu li.parent .submenu > ul.level1 > li > h3 > a{
font-size: 1.2em;
color: red;
}
.menu .innermenu li.parent .submenu > ul {
border: 0;
padding: 0;
background: #fff;
box-shadow: none;
}
.menu .innermenu li.parent .submenu ul li .submenu.level2,
.menu .innermenu li.parent .submenu ul li .submenu.level3{
display: inline-block;
left: 0;
position: relative;
top: 0;
z-index: 400;
}

I to by było na tyle 🙂 Taki kawałek kodu wystarczy by namieszać w standardowym menu. Teraz kilka słów objaśniający kod tak by łatwiej wam było zrozumieć jego działanie.

Standardowo w Shoper 5 skrypt zarządzający menu rozwijanym działa tak, że zmienia nam widoczność poszczególnych kategorii wyświetlając okno z ich podkategoriami niższego rzędu (ale zawsze tylko jednego zagłębienia), kolejne zagłębienia wyświetlają się w prawo od kategorii rodzica.

Pozycja poszczególnych sekcji ustalana jest poprzez position:absolute, system może ustalić pozycję bez problemu ponieważ szerokość sekcji z podkategoriami ustalona jest na stałe i wynosi 150px. To znaczy że jak najedziemy kursorem myszki na kategorię będącą rodzicem to jej podkategorie wyświetlą się w oknie położonym 150px w prawo 🙂

Chcąc stworzyć kurtynę musimy zatem zrobić kilka rzeczy:

– ustalić szerokość pierwszego okna zgodnie z szerokością sklepu (pamiętając by odjąć wartości paddingów),

– ustalić szerokość pierwszego okna tak by wszystkie podkategori ładnie się mieściły,

Obie te wartości znajdziecie w

menu .innermenu li.parent .submenu > ul.level1…

– następnym krokiem jest ustalenie by kolejne zagłębienia były widoczne na stałe

To osiągnąłem dodając display: inline-block od klas level2 i level3

– dodałem także wyróżnienie dla kategorii głównych poprzez .menu .innermenu li.parent .submenu > ul.level1 > li > h3 > a {…}

Polecam trochę się pobawić by osiągnąć zadowalający was wygląd całego menu. I pamiętajcie że zawsze bawimy się z wyglądem sklepu pracując na kopii aktywnego stylu.

11 odpowiedzi do “Edycja rozwijanego menu kategorii – poradnik Shoper”

  1. Jak wyłaczyć szare podświetlenie tła podczas najechania myszką na kategorię i podkategorię? Obcenie przy najechaniu na np podkategorię poświetlaja się wszystkie podkategorie i kategoria główna. Ich tłem staje się szary prostokąt.

    1. Zmiana koloru to pozostałość standardowego kodu CSS który zarządza menu, jak chcesz to usunąć to dodaj np. coś takiego:
      .menu .innermenu li.parent .submenu.level1 li:hover{background-color: transparent;}

  2. Witam,
    super sprawa, dziękuję bardzo 🙂 czy mógłbym się jeszcze dowiedzieć jak zrobić ramkę w koło tego menu (np. czarną)?

    Pozdrawiam i z góry dziękuję za odpowiedź

    1. oczywiści, wystarczy zmienić element od którego pozycjonowane jest rozwinięte menu (aktualnie jest do .menu li).
      Dodaj taki kod:
      .menu ul {
      position:relative;
      }
      .menu .innermenu li.parent {
      position: initial;
      }

    1. Styl RWD ma inny kod więc wszystkie wpis na blogu nie będą dotyczyły tego stylu. Proszę zerknąć na datę wpisu, wszelkie opisywane na blogu modyfikacje dotyczyły wersji sklepu aktualnej w momencie powstawania wpisu. W stylu RWD jest dostępne menu rozwijane w nagłówku ale jego edycja wymaga trochę innych modyfikacji.

Skomentuj Grzegorz Rusin Anuluj pisanie odpowiedzi