Uwaga! Od sierpnia 2017 forum jest w trybie tylko do odczytu.

Dlaczego? Dlatego, że społeczność TYPO3 przeniosła się na slack'a i stackoverflow:
  • Przeczytaj artykuł wprowadzający do slacka, w którym dowiesz gdzie i jak się zarejestrować.
  • Jeżeli masz pytania odnośnie Polskiej Społeczności TYPO3 zapraszamy na kanał slack'a #community-pl. Rozmawiamy tam w języku polskim.
  • Pytania dotyczące samego TYPO3 zadawaj po angielsku na stackoverflow oznaczając je tagiem "typo3". Następnie posługując się linkiem do tego pytania postaraj się zachęcić ludzi z kanału slack'a #typo3-cms lub bardziej pasujących kanałów tematycznych, żeby na nie odpowiedzieli.
  • Możesz też oczywiście zadawać pytania na slacku bez zakładania wątków na stackoverflow, ale wówczas wiedza ta nie jest indeksowana przez googla i część osób nie będzie chciała Ci z tego powodu pomagać.
  • Dla części osób dzielących się wiedzą ważne jest też budowanie reputacji na stackoverflow. Jest to kolejny powód dla którego powinieneś zadawać pytania na stackoverflow by zwiększyć swoje szanse na znalezienie odpowiedzi. Pamiętaj, żeby oceniać odpowiedzi!
Forum » TYPO3 » Menu
Temat z wieloma odpowiedziami

Menu nie do końca automatyczne


Autor Wiadomość
Napisane: 08.03.2012 [14:21]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
Witam,

Mam ostatnio problem z menu. Znalazłem sobie fajną przykładową realizację niestety w kodzie jest coś za co nie wiem jak się zabrać...
Mianowicie:
HTML
<div id="menuWrapper" class="menuWrapper bg1">
 
              <ul class="menu" id="menu">
                    <li class="bg1" style="background-position:0 0;">                  
                        <a id="bg1" href="adres1">Item1</a>
 
                        <ul class="sub1" style="background-position:0 0;">
                            <li><a href="adres1.1">Item 1.1</a></li>
                            <li><a href="adres1.2">Item 1.2</a></li>
                            <li> ..... </li>
                        </ul>
                    </li>
 
                    <li class="bg1" style="background-position:-353px 0px;">
                        <a id="bg2" href="adres2">Item2</a>
 
                        <ul class="sub2" style="background-position:-353px 0;">
                            <li><a href="adres2.1">Item 2.1</a></li>
                            <li><a href="adres2.2">Item 2.2</a></li>
                            <li><a href="adres2.3">Item 2.3</a></li>
                            <li> ..... </li>
                        </ul>
                    </li>
 
                    <li class="last bg1" style="background-position:-706px 0px;">
                        <a id="bg3" href="adres 3" target="_blank">Item 3</a>
                    </li>
             </ul>
</div>

Całość struktury menu jest odzwierciedlona w strukturze drzewa strony więc przy dodawaniu elementów w drzewie menu powinno też się odpowiednio rozrastać.
Wszystko było by logiczne jako menu 2 poziomowe gdyby nie specyficznie zmienny styl przy kolejnych elementach.
Chodzi mi tu o:
HTML
<li class="bg1" style="background-position:0 0;">
...
<li class="bg1" style="background-position:-353px 0px;">
...
 <li class="last bg1" style="background-position:-706px 0px;">


Czyli klasa się nie zmienia tylko za każdym wywołaniem pętli generującej menu zmienia się wartość background-position o wielokrotność -353px.
Najprościej byłoby wpisać na sztywno parametr przy generowaniu menu że za kolejnym wywołaniem ma uzywać wielokrotności parametru

coś jak pętla
HTML
for( i=0; i<=j; i++)
{
      background-position: (-353*i)px 0px;
}

gdzie i to ilość przebiegów a j to ilość elementów menu najwyższego poziomu.
Teoretycznie wszystko OK, ale jak to zrobić w TS? Bo chyba nie wszystko da się tak "na żywca" przenieść z choćby php do TS?



Napisane: 08.03.2012 [15:18]
kss
zarejestrowany: 19.07.2007
Posty: 1341

Zerknij na http://www.typo3wizard.com/ do działu menu. Są tam przedziwne kombinacje alpejskie...

Możesz też użyć javascriptu do ustalenia przesunięć backgroundu.

=======================================
t33k
Napisane: 09.03.2012 [13:32]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
No ok poszperałem trochę d dokumentacji trochę w linku który podesłałeś i zacząłem kombinować z dodawaniem parametrów.
Mam coś takiego:
TYPOSCRIPT
temp.menu=HMENU 
temp.menu{ 
        1 = TMENU 
        1.NO{ 
        allWrap.insertData=1 
        allWrap=<li  class="bg1" id="{field:nav_title}">|
        wrapItemAndSub = |</li> 
        }

No i byłoby OK, bo mogę dla każdego pola które oznaczam sobie w deklaracji strony "Alternatywny tytuł nawigacyjny"(nav_title) zdefiniować styl CSS o takiej samej nazwie - czyli jest to krok do uniwersalizmu icon_smile.gif

Jednak gdy stosuję to rozwiązanie, to automatycznie wartość alternatywnego tytułu pojawia mi się w menu jako link. Z czego już nie jestem zadowolony.
Chodzi mi o sytuację by otrzymywany kod był podobny do:
HTML
<li class="bg1" id="pano"><a href="http://coś_tam" >PANORAMA</a></li>

Gdzie PANORAMA to "Tytuł strony" czyli jak dobrze rozumiem {field:title} a pano to "Alternatywny tytuł strony" czyli {field:nav_title}
Jak wymusić podstawianie obu we właściwych miejscach?

z góry dzięki za podpowiedź... icon_wink.gif

[Ten temat był edytowany 1 razy. Ostatnio 09.03.2012 o 13:32.]
Napisane: 09.03.2012 [13:49]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
OK... jak zacząłem przeglądać forum temat po temacie to znalazłem :

http://forum.typo3.pl/forum/post/menu/1808.html

Jednak cały czas mam problem z menu 2 poziomu...
Wiem że chyba coś przeoczyłem... ale nie wiem gdzie.
Skrypt generujący menu to:
TYPOSCRIPT
# MENU 
temp.menu=HMENU 
temp.menu.1 = TMENU 
temp.menu.1{ 
                     NO.stdWrap.cObject = COA
                     NO.stdWrap.cObject {
                                  10 = TEXT
                                  10.field = title
                                  }  
                    NO.allWrap.insertData=1 
                    NO.allWrap=<li  class="bg1" id="{field:nav_title}">|</li>
                }   
 
temp.menu.2 = TMENU
temp.menu.2{
 
            NO.allWrap.insertData=1
            NO.allWrap = <ul class="sub1" id="{field:nav_title}><li>|</li></ul>
 
                   }

Niestety w efekcie dostaję tylko poprawnie wygenerowane menu 1 poziomu.

Menu dla jednej gałęzi powinno wyglądać tak:
HTML
<li class="bg1" id="nav_title">
                        <a id="bg1" href="">Link1</a>
 
                        <ul class="sub1" id="nav_title_z poziomu_1">
                            <li><a href="">Link1.1</a></li>
                            <li><a href="">Link1.2</a></li>
                        </ul>
                    </li>

Póki co poprawnie uzyskuję całość poza znacznikiem UL i jego zawartością :/ Czyli jakby drugiego poziomu w ogóle nie było.
Pytanie jeszcze jedno.... czy taka konstrukcja TS spowoduje wyświetlenie w kodzie strony całego menu (obu poziomów)?
Chodzi mi o to, żeby najpierw zobaczyć czy wszystkie elementy menu pojawiają się w źródle strony, a potem pożenić to z formatowaniem HTML/CSS/JS.

Acha i jak w menu 2 poziomu wykluczyć wyświetlanie pewnych pozycji?

[Ten temat był edytowany 2 razy. Ostatnio 10.03.2012 o 13:07.]
Napisane: 10.03.2012 [22:14]
pml
zarejestrowany: 10.01.2010
Posty: 98
Jak chcesz żeby menu było rozwinięte to dodaj:
TYPOSCRIPT
expAll = 1

Żeby wykluczyć pozycję to w BE masz coś takiego jak ukryj w menu.

A tak w ogóle to nie prościej byłoby w samym arkuszu stylów?
CSS
li {styl1}
li+li {styl2}

itd.
Napisane: 10.03.2012 [22:24]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
No ok dzięki.
Niestety postać i klasy narzuca jquery i pozostałe skrypty więc modyfikacja i wygenerowanie menu na podstawie samego css nie wchodzi w rachubę (póki co).
No ukrywanie w BE nie wchodzi w rachubę bo to premanentnie ukryje mi w menu pewnie elementy, a mi zależy tylko na tym żeby przy wyświetlaniu menu np. na pewnym poziomie ukryło ale przy innej okazji jednak w innym menu nie ukrywało.
Hmmm czyli za pomocą entryLevel i ukrywania elementów jestem w stanie skonstruować menu takie jak potrzebuje?
Tylko jak ukrywać elementy o znanym ID?

[Ten temat był edytowany 1 razy. Ostatnio 10.03.2012 o 22:30.]
Napisane: 12.03.2012 [15:31]
artur2000
zarejestrowany: 09.12.2008
Posty: 65
Czytajac ten post nie bardzo widze gdzie sa konkretne problemy, ale jako inpiracje do zaawansowanych rozwiazan w menu warto przyjzec sie i wyprobowac parameter TS "IProcFunc" dla objektu TMENU. Za jego pomoca mozesz dowolnie manipulowac juz przygotowany w formie tablicy element TMENUITEM zanim ostatecznie pojawi sie on w kodzie HTML. W ten sposob mozesz n.p. sprawdzic atrybut HTML id="" i ukryc item za pomoca CSS w zaleznosci od wartosci, co jak rozumiem jest jednym z twoich zyczen, lub dynamicznie generowac jego wartosc bez koniecznosci posilkowania sie polen nav_title.

Np. twoj TS moglby wygladac tak:

PHP
temp.menu=HMENU 
temp.menu{ 
	1 = TMENU 
  1 {
  	NO { 
  		allWrap.insertData=1 
    	allWrap=<li class="bg1" id="{field:nav_title}">|
    	wrapItemAndSub = |</li> 
    }	
    IProcFunc = tx_myclass->procLevel1
  }
	2 = TMENU
	2 {
    NO.allWrap.insertData=1
    NO.allWrap = <ul class="sub1" id="{field:nav_title}><li>|</li></ul>
    IProcFunc = tx_myclass->procLevel2
  }        
}




Certified Level 2 TYPO3 Night Crew Member
Napisane: 12.03.2012 [16:57]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
hmmm a możesz podsunąć jakieś przykładowe rozwiązanie z IProcFunc? Bo szukam na necie ale jakoś kiepsko (chyba że nie potrafię znaleźć...)
Generalnie widzę po kilku kombinacjach, że aby wyświetlić to czego oczekuję, potrzebuję właściwie jednopoziomowego menu z wskazaniem które elementy mają być brane przy generowaniu menu. Wtedy dostaję listę szablonowo sformatowaną.
Implementacja którą chcę przenieść na Typo3 pochodzi stąd http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/

Uproszczony format menu jest taki:
HTML
<li class="lev1" id="nav_title1">
       <a id="bg1" href="">ID1</a>
             <ul class="lev2" style="nav_title1">
                    <li><a href="">ID2</a></li>
                    <li><a href="">ID3</a></li>
             </ul>
</li>
<li class="lev1" id="nav_title2">
       <a id="bg1" href="">ID4</a>
             <ul class="lev2" style="nav_title2">
                    <li><a href="">ID5</a></li>
                    <li><a href="">ID6</a></li>
                    <li><a href="">ID7</a></li>
             </ul>
</li>
<li class="lev1" id="nav_title3">
       <a id="bg1" href="">ID8</a>
             <ul class="lev2" style="nav_title3">
                    <li><a href="">ID9</a></li>
                    <li><a href="">ID10</a></li>
             </ul>
</li>

Taka struktura powinna pojawić się na str. głównej, czyli nie dopiero po kliknięciu na któryś z elementów poziomu1.
Piszesz, że za pomocą wspomnianej funkcji można wpłynąć na wygląd poszczególnych elementów menu, czyli np. zdefiniować, że domyślnie dla każdego elementu menu ma być formatowanie takie jak ma poziom 2, a tylko wskazane ID mają wyglądać inaczej.
Zatem jak to zrobić?

[Ten temat był edytowany 1 razy. Ostatnio 12.03.2012 o 17:16.]
Napisane: 12.03.2012 [17:17]
artur2000
zarejestrowany: 09.12.2008
Posty: 65
Poslugujac sie moim teoretycznym przykladem n.p. musialbys zdefiniowac nastepujaca klase w PHP

PHP
class tx_myclass {
 
   public function procLevel1($menuArr,$conf) {
 
         var_dump($menuArr)
 
         return $menuArr;
 
   }
 
   public function procLevel2($menuArr,$conf) {
 
         var_dump($menuArr)
 
         return $menuArr;
 
   }
 
}


oraz includowac ja w TS

TYPOSCRIPT
includeLibs.my_class = EXT:myExt/class.tx_myclass.php


Po wyczyszczeniu cache TYPO3, przy renderowaniu menu pierwszego poziomu z kazdym punktem zostanie odpalona metoda procLevel1() i var_dump() wyrzuci Tobie tablice z danymi konkretnego MENUITEM. Te dane mozesz dowolnie modyfikowac. Potem objekt TMENU wg tych danych wy<renderuje kod HTML, oczywiscie z Twoimi zmianami. Musisz analogicznie przelozyc to na Twoj przypadek.

Certified Level 2 TYPO3 Night Crew Member
Napisane: 12.03.2012 [23:34]
Merlin
Twórca tematu
zarejestrowany: 14.01.2011
Posty: 64
Pomysł ciekawy z tym ingerowaniem w tablicę... tylko masakrycznie dużo parametrów wyskakuje jako zawartość var_dump.
Ale widzę że póki co to chyba jedyna możliwość ingerencji kod wyjściowy.
No chyba że ktoś ma prostsze rozwiązanie?
Nad rozszyfrowaniem tablicy i jej modyfikacją jutro posiedzę zatem jest jeszcze dłuższa chwila na inne rozwiązania icon_wink.gif
Póki co dzięki Artur2000 za podpowiedź. PHP wydaje się być miejscami prostszy niż TS icon_wink.gif