Zamiana menu2 na obrazkowe

Tama

2012-11-11 11:53

Witam, chciałbym aby każdy przycisk w menu pod banerem był osobnym obrazkiem, ale nie bardzo wiem jak to zrobić. Podejrzewam że chodzi o modyfikację tego kodu


<ul><!-- START LIST -->
      <li class="l$aData[sStyle]<!-- IF:START SELECTED --> selected<!-- IF:END SELECTED -->">
      <a href="$aData[sLinkName]">$aData[sName]</a><!-- IF:START BASKET-PRODUCTS -->  <span>$lang[Basket_products]:&nbsp;<strong>$iOrderProducts</strong></span><!-- IF:END BASKET-PRODUCTS -->
      $aData[sSubContent]
    </li><!-- END LIST -->
  </ul>

ale jestem laikiem, więc byłbym wdzięczny gdyby ktoś mi wytłumaczył co i jak

» Quick.Cart v5.x

selekcjoner

2012-11-11 13:29

W style.css lub menu.css dodaj:

#menu2 .l1{background:url('img/obrazek.jpg');}
#menu2 .l2{background:url('img/obrazek.png');}
#menu2 .l3{background:url('img/obrazek.png');}

simlution.org

Tama

2012-11-11 14:36

Dzięki za szybką odpowiedź, ale niestety nadal nie działa. Wydaje mi się że problem tkwi w numeracji przycisków, nie mogę ich rozdzielić, nadal wszystkie podlegają jednemu stylowi.

selekcjoner

2012-11-11 14:42

Wrzuć link do strony to postaram się pomóc, nie wiem czy dobrze Cię rozumiem, menu pod banerem to menu2, więc powinno działać.

simlution.org

Jeśli chodzi o menu: Biżuteria Ozdoby itp to one są numerowane i przyjmują klasy:
Biżuteria - class="l1"
Ozdoby - class="l2"
itp
Widzę, że masz w kodzie:
#menu2 .l4{background:url('img/kontakt.jpg');}
a takiego akurat nie ma, bo kontakt jest ostatni i ma klasę class="lL"
zrób tak dla class="l1", class="l2" itd

simlution.org

Tama

2012-11-11 16:07

Działa, dzięki wielkie za pomoc

selekcjoner

2012-11-11 17:14

Jeśli chcesz, aby dla submenu było inne style to w /templates/default/menus.tpl w linii 19 zmień <ul class="sub$aData[iDepth]"> na np. <ul id="submenu" class="sub$aData[iDepth]"> i później ustaw:
#submenu .l1{background:url('img/obrazek.jpg');}
#submenu .l2{background:url('img/obrazek.png');}
#submenu .l3{background:url('img/obrazek.png');}

simlution.org

Tama

2012-11-12 21:09

A wiesz może jeszcze co zrobić żeby obrazek w submenu zmieniał się gdy aktywna jest główna kategoria? Na tej stronie wygląda to tak, że gdy jestem w zakładce biżuteria to wszystkie obrazki w submenu są takie same

selekcjoner

2012-11-13 10:02

W templates/default/menus.tpl w linii 4 <ul> zamień na <ul class="menus">.
Później w style.css w liniach: 68, 71, 74, 76 znajdź "#menu2 .l1.selected a" i zamień na ".menus .l1.selected a" (oczywiście analogicznie zmieniając l1, l2, l3)
Jak coś będzie jeszcze źle to będziemy myśleć:)

simlution.org

Tama

2012-11-13 19:14

Już prawie dobrze :P Teraz zmienia się obrazek ale tylko po najechaniu

selekcjoner

2012-11-14 02:22

Spróbuj podmienić w style.css cały kod dla: /* MENU TOP 2 */ oraz /* Submenu */ na taki:



/* MENU TOP 2 */
#menu2 ul{float:left;height:100%;margin:0;list-style:none;}
#menu2 li a{float:left;height:66px;padding:13px 25px 0;color:#a02626;font-size:1.17em;text-decoration:none;}
#menu2 li a:hover, #menu2 .selected a{color:#a02626;text-decoration:underline;}

#menu2 .l1{float:left;background:url('img/bizuteria.jpg');}
#menu2 .l1 a{float:left;width:207px;}
#menu2 .l1 a:hover, .menus .l1.selected a{background:url('img/bizuteria2.jpg');}
#menu2 .l2{float:left;background:url('img/ozdoby.jpg');}
#menu2 .l2 a{float:left;width:166px;}
#menu2 .l2 a:hover, .menus .l2.selected a{background:url('img/ozdoby2.jpg');}
#menu2 .l3{float:left;background:url('img/info.jpg');}
#menu2 .l3 a{float:left;width:150px;}
#menu2 .l3 a:hover, .menus .l3.selected a{background:url('img/info2.jpg');}
#menu2 .lL{float:left;background:url('img/kontakt.jpg');}
#menu2 .lL a:hover, .menus .lL.selected a{background:url('img/kontakt2.jpg');}

/* Submenu */
#submenu .l1, #submenu .l1 a{background:url('img/bran.png') no-repeat;width:200px;height:40px}
#submenu .l1 a:hover, #submenu .l1.selected a{background:url('img/bran2.png') no-repeat;}
#submenu .l2, #submenu .l2 a{background:url('img/kolczyki.png') no-repeat;width:200px;height:40px}
#submenu .l2 a:hover, #submenu .l2.selected a{background:url('img/kolczyki2.png') no-repeat;}
#submenu .l3, #submenu .l3 a{background:url('img/nasz.png') no-repeat;width:200px;height:40px}
#submenu .l3 a:hover, #submenu .l3.selected a{background:url('img/nasz2.png') no-repeat;}
#submenu .lL, #submenu .lL a{background:url('img/pier.png') no-repeat;width:200px;height:40px}
#submenu .lL a:hover, #submenu .lL.selected a{background:url('img/pier2.png') no-repeat;}

Dokładnie go skopiuj i wklej, zobacz jak działa, ewentualnie cofniesz zmiany.