Kategorie * Namioty * Obuwie * Akcesoria turystyczne
chcialbym zamiast odsylacza "namioty" miec odsylacz-obrazek o wielkosci 200px szerokosci oraz 117px wysokosci, podobnie z "obuwiem" i "akresoriami" aby po kliknieciu w obrazek moc wybierac dalsza kategorie w okienku po prawej, jakie pliki musze edytowac oraz gdzie wrzucic obrazki? pomoze ktos? :]
Plik templates/container.tpl. Znajdziesz tam zmienną $sMenu3 i ją trzeba by zamienić na sztywne menu lub po prostu edytować plik templates/menu_3.tpl i usunąć wszystko z wszystkich bloków a w HEAD umieścić menu na sztywno, które już może być obrazkowe.
CwiQ
2009-08-13 17:00
<!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName]" $aData[sSelected]>$aData[sName]</a>$aData[sSubContent]</li><!-- END LIST -->
<!-- BEGIN HEAD --><div id="menu3"><div class="type">$aData[sMenuType]</div><ul><!-- END HEAD --> <!-- BEGIN FOOT --></ul></div><!-- END FOOT -->
<!-- BEGIN HEAD_SUB --><ul class="sub$aData[iDepth]"><!-- END HEAD_SUB --> <!-- BEGIN FOOT_SUB --></ul><!-- END FOOT_SUB -->
<!-- BEGIN SELECTED -->class="selected"<!-- END SELECTED -->
kod w menu3 wyglada tak, mozesz mi napisac co na co zamienic bo jestem kompletnym laikiem w tej kwestii :/ powiedzmy ze obrazek bedzi sie nazywal menu1.jpg i chcialbym go wrzucic zamiast belki KATEGORIE, menu ponizej moze zostac jak jest
Witam Kontynuując temat, po podmianie linków tekstowych na obrazkowe jak przechwycić informację o aktualnie wciśniętym przycisku (to co normalnie jest w BEGIN SELECTED)
Musiałbyś wykorzystać zmienną $config['language'] w celu zbadania z jakiego języka korzysta użytkownik i na jej podstawie wykonać jakieś operacje (ładować inny blok np.).
Nie bardzo widzę związek z zmienną języka... Może nieprecyzyjnie opisałem problem. W pliku container.tpl zamiast $sMenu3 mam wypisane "na sztywno" linki zawierające grafiki jako przyciski. Po wciśnięciu przycisku w normalnym menu aktywny przycisk dostaje klasę selected, a w moim przypadku nie (co nie jest dziwne). Teraz potrzebuję przechwycić to co w normalnym skrypcie odpowiada za ustawienie na danym przycisku klasy selected.
Selser, czy chodzi o taką zasadę działania? http://www.kimla.de/tester/qcart/?o-firmie,1 ("selected" zrobiłem tylko w kategoriach, nie producentach) I nie przejmuj się formatem, designem i estetyką. To jest tylko stronka z testerem, często pisana "na kolanie" ;-) Możesz tam poklikać głębiej i swobodnie bez obawy o wiążący zakup.
Zaczniemy od analizy obrazka: /templates/img/navi.gif który jest użyty w menu2 w surowej instalacji QC. Jak widać jest to paseczek składający się jakby z dwóch części: górnej (jaśniejszej) i dolnej (ciemniejszej). Menu2 (pod logo) w stanie nieaktywnym pokazuje górną część navi.gif, a w stanie aktywnym (hover, albo selected) jego część dolną (bottom), co doskonale widać w default.css w linijkach:
#menu2 a{height:38px;background:url('img/nav.gif');} #menu2 a:hover{background:url('img/nav.gif') left bottom;} #menu2 .selected{background:url('img/nav.gif') left bottom;}
W ramach czytelności zostawiłem tylko te wpisy relewantne dla obrazka tła (background).
Aby uzyskać taki efekt graficzny, należy sporządzić sobie taki "podwójny" obrazek. I potem sterując jego pozycją (bottom, top, left, right, lub pixelami) przy MouseEvents (hover) lub zmianie klasy (selected) uzyskamy pożądany efekt "wciśniętego guzika".
Niestety w moich próbach umieszczenia <div> z obrazkiem w Menu3, <div> nie reagował na zmianę klasy (class="selected"), co zmusiło mnie do zrobienia małego "kuku" w Menu3 i default.css O ile w Menu3 jest to jednorazowa zmiana, to po każdym dodaniu nowej strony w panelu admina i przypisanej do tego menu, trzeba dodać 3 linijki w default.css Jest to powodowane koniecznością użycia różnych obrazków w linijkach menu i o tych obrazkach Menu3 jest informowane poprzez default.css. W container.tpl nie trzeba przeprowadzać żadnych zmian, czyli doprowadzić do stanu wyjściowego.
Zmiany w Menu3.tpl (tylko w bloku LIST i SELECTED): Było: <!-- BEGIN LIST --> <li class="l$aData[sStyle]"> <a href="$aData[sLinkName]" $aData[sSelected]> $aData[sName] </a> $aData[sSubContent] </li> <!-- END LIST --> <!-- BEGIN SELECTED --> class="selected" <!-- END SELECTED --> Po zmianach: <!-- BEGIN LIST --> <li class="l$aData[sStyle]"> <a href="$aData[sLinkName]"> <div id="$aData[sName]$aData[sSelected]" title="$aData[sName]"> </div> </a> $aData[sSubContent] </li> <!-- END LIST --> <!-- BEGIN SELECTED --> selected <!-- END SELECTED --> Sens zmian: Wyrzucenie $aData[sSelected] z linku - to już nie napis w menu ma być selected, tylko zawartość <div> z obrazkiem. Dodatkowo dla ułatwienia dodany został "title" aby po najechaniu myszką user wiedział nad czym się znajduje. Jak wspomniałem wcześniej, <div> nie reagował na zmianę klasy, więc zmieniam mu jego "id", dzięki któremu jest bezproblemowo sterowalny poprzez default.css. A jego "id" to zlepek nazwy strony i słowo w bloku SELECTED.
A jak wygląda to w default.css? #Namioty{background:url('img/namioty.gif') no-repeat;} #Namioty:hover{background:url('img/namioty.gif') 0px -171px no-repeat;} #Namiotyselected{background:url('img/namioty.gif') 0px -171px no-repeat;} #Obuwie{background:url('img/obuwie.gif') no-repeat;} #Obuwie:hover{background:url('img/obuwie.gif') 0px -171px no-repeat;} #Obuwieselected{background:url('img/obuwie.gif') 0px -171px no-repeat} #Akcesoria{background:url('img/akcesoria.gif') no-repeat;} #Akcesoria:hover{background:url('img/akcesoria.gif') 0px -171px no-repeat;} #Akcesoriaselected{background:url('img/akcesoria.gif') 0px -171px no-repeat;}
Jak widać steruję pixelami, a nie bottom czy top. Ale każdy może sobie poexperymentować. Te wartości -171px zależą od wysokości obrazka i jego "podziału". Nie kładłem tu formatek z width:, height:, padding:, margin: to musi każdy dopasować sobie sam.
Mam nadzieję, że to spełni Twoje oczekiwania, mimo ręcznej (czasem) roboty w default.css
Wstawiam obrazki wg instrukcji i pojawiają się problemy: 1. nie wszystkie odrazki-odsyłacze są widoczne, tak jakby, myszka wyczuwa linka ale nie wyświetla obrazka, to samo dzieje się z obrazkami do podkategorii. Prosze o jakąs porade w tej sprawie
Sama rozwiązałam, jeśli komuś się przyda piszę w czym rzecz Oczywiście w polskich literach i kodowaniu pliku -default.css (musi być UTF-8) :) Dziekuję Sobie - za cierpliwość
