TemplaVoila + Horizontales Menü mit 3 IMG Zuständen

kohoutek · #1 11.09.04, 19:25

Da habe ich "wirklich" nichts zu gefunden.

Meine gesamte Seite ist via einem externen Stylesheet definiert.

Das Template wurde via TemplaVoila errichtet.

Es sind drei verschiedene Navigationen vorhanden. Eine von diesen ist eine Top Navigation. Diese besteht aus Images. Es gibt ein IMG für jeweils eine Kategorie für den Zustand "normal", "hover" und "selected/current". Alle einzelnen IMG Links sind in der CSS Datei definiert.

Wenn ich ein vertikales Menü mit TemplaVoila erstelle, brauche ich nichts ändern. Das Menü funktioniert sofort und einwandfrei. Das vertikale Menü hat für jeden der drei Zustände Hintergrundbilder. Ansonsten läuft es via TMENU. Da brauch ich einfach nur die div "id" eingeben und fertig.

Aber dasselbe gilt scheinbar nicht für ein horizontales Menü.
Ich habe mir die TSREF angeschaut und auch die TemplaVoila doku gelesen.
Das hat mir nicht weitergeholfen. :? Es reicht offenbar nicht aus, bei dem horizontalen Menü die div "id" einzustellen. Wenn man div eingibt, wird es eh zu einem vertikalem Menü.

Somit habe ich folgendes versucht:

Code:

# Menu 1 cObject

lib.navigation = HMENU
lib.navigation.1 = TMENU
lib.navigation.1 {
# Normal state properties
NO = 1
NO.stdWrap.htmlSpecialChars = 1
NO.allWrap = &lt;ul>&lt;li>&lt;a id="home" href="/typo3/index.php?id=6">&lt;span class="hidden">home&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="news" href="/typo3/index.php?id=61>&lt;span class="hidden">news&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="videoguide" href="/typo3/index.php?id=64">&lt;span class="hidden">video guide&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="audioguide" href="/typo3/index.php?id=65">&lt;span class="hidden">audio guide&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="tour" href="/typo3/index.php?id=66">&lt;span class="hidden">Tour History&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="chronicles" href="/typo3/index.php?id=18">&lt;span class="hidden">Pearl Jam Chronicles&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="community" href="/typo3/index.php?id=67">&lt;span class="hidden">Pearl Jam Community&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="multimedia" href="/typo3/index.php?id=52">&lt;span class="hidden">Pearl Jam Multimedia&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="memorabiliae" href="/typo3/index.php?id=68">&lt;span class="hidden">Pearl Jam Memorabiliae&lt;/span>&lt;/li>&lt;/a>&lt;li>&lt;a id="miscellaneous" href="/typo3/index.php?id=33">&lt;span class="hidden">Pearl Jam Miscellaneous&lt;/span>&lt;/li>&lt;/a>| &lt;/ul> 
		
}

Das erscheint mir doch irgendwie nicht richtig? Zwar funktioniert es so einigermaßen, ausser dass bei mouseover statt der HOVER images, die Current images angezeigt werden. Aber das geht doch bestimmt auch sauberer? Nur weiss ich da selbst nicht so recht weiter.

Habt ihr einen Tipp?

Danke.

kohoutek · #2 11.09.04, 23:50

War die Frage zu blöd? :?

Ich benutze nur eine Ebene, habe alle Menü Eigenschaften im Stylesheet bereits definiert, habe jedem Link eine ID zugewiesen. Ich benutze weder Layers, Gifbuilder noch Javascript. Ich will ein einfaches horizontales CSS Menü. Die Textlinks sind versteckt, daher span class "hidden". Ich arbeite nur in Firefox und da sah der o.g. Code auch gut aus. Öffne ich dieselbe Seite im IE, sieht es schon nicht mehr so gut aus. Ich habe die neue deutsche Doku gelesen und kein Beispiel gefunden, welches ein Menü auf reiner CSS Basis nutzt. Auch die anderen Tutorials im Netz basieren entweder auf dem Gif Builder, Javascript oder mehreren Layers. Und soweit ich das verstanden hatte, braucht man die stylesheet nicht nochmal im Setup angeben, da sie doch bereits via templavoila vorhanden ist.

Editiert:

Ich habs endlich geschafft, nachdem ich über 10 Stunden daran gesessen habe. Man oh man. Also besonders CSS freundlich hinsichtlich der graphischen Menü Erstellung ist typo3 ja net gerade. Das GMenu und das IMGMenu ist ja völlig unbrauchbar für reine CSS grafik Menüs. Aber egal. Es ist vollbracht. Nun habe ich ein rein grafisches Menü via TMENU. lol. Ich bin glücklich! :D

**lutz** · #3 12.09.04, 07:28

Zitat:

Zitat von kohoutek

Also besonders CSS freundlich hinsichtlich der graphischen Menü Erstellung ist typo3 ja net gerade.

wie kommst du denn da drauf? wie wär´s mit einer begründung anstatt diesen satz einfach so hinzu werfen?

Zitat:

Zitat von kohoutek

Das GMenu und das IMGMenu ist ja völlig unbrauchbar für reine CSS grafik Menüs.

dito.
zu klären wäre hier auch, was du überhaupt unter css-grafik menüs verstehst.

Zitat:

Zitat von kohoutek

Ich habs endlich geschafft,...
Es ist vollbracht...
Ich bin glücklich! :D

gratuliere!
du bist der/die erste hier, der/die diese unsitte einführt, anderen die lösung eines problems vorzuenthalten...
warum sollte man dir denn dann zukünftig noch antworten?

**mavo** · #4 12.09.04, 08:34

Zitat:

Zitat von lutz

du bist der/die erste hier, der/die diese unsitte einführt, anderen die lösung eines problems vorzuenthalten...
warum sollte man dir denn dann zukünftig noch antworten?

Eine Bitte, die Lösung zu posten, hätte wohl auch gelangt!? Ich finde dieser Unterton passt nicht in dieses gute, hilfsbereite Forum.

Noch nen schönen Sonntag.

Ciao mavo

**lutz** · #5 12.09.04, 08:50

Zitat:

Zitat von mavo

Ich finde dieser Unterton passt nicht in dieses gute, hilfsbereite Forum.

was für ein unterton?
ich dachte, ich hätte mich klar ausgedrückt...

daniel · #6 12.09.04, 08:58

naja, der letzte satz war vielleicht überflüssig, was jedoch nix daran ändert, dass der lutz prinzipiell recht hat und sich diese unsitte gar nicht erst einschleichen sollte!

AFisch · #7 12.09.04, 09:59

@kohoutek

Also hier mal mein horizontales Menu. Irgendwie muss ich auch sagen, das du in deiner ersten Lösung einen gewalltigen Denkfehler hattest. Mit Typo3 hat das nix zu tun.

Hier der CSS Code:

Code:

/* Root Menu Styles */
a.menuLinkFirst {
display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:9px;height:20px;width:102px;
background-image: url('rootmenu/m1_no.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a.menuLinkFirstAct
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:9px;height:20px;width:102px; 
background-image: url('rootmenu/m1_act.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a:hover.menuLinkFirst 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:9px;height:20px;
width:102px;background-image: url('rootmenu/m1_ov.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a.menuLinkLast 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px; padding-left:10px;height:20px;width:101px; 
background-image: url('rootmenu/m7_no.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a.menuLinkLastAct
{display:block;text-align:left;padding-top:4px;padding-bottom:0px; padding-left:10px;
height:20px;width:101px; background-image: url('rootmenu/m7_act.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a:hover.menuLinkLast 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:10px;height:20px;
width:101px; background-image: url('rootmenu/m7_ov.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a.menuLink 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:10px;height:20px;width:97px;
background-image: url('rootmenu/m2_no.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a.menuLinkAct 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:10px;height:20px;width:97px;
background-image: url('rootmenu/m2_act.gif');color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

a:hover.menuLink 
{display:block;text-align:left;padding-top:4px;padding-bottom:0px;padding-left:10px;height:20px;width:97px;background-image: url('rootmenu/m2_ov.gif');
color:#ffffff;font-size:13px;text-decoration:none;font-style:normal;font-weight:bold;}

.menuList 
{position:relative;display:inline; margin:0px; padding:0px;}

li.naviItem 
{list-style-type:none; float:left;}

Und hier das Setup dazu.

Code:

# Template für Root Menu
temp.firstMenu = HMENU
temp.firstMenu.maxItems = 1

temp.firstMenu.1 = TMENU
temp.firstMenu.1 {
NO.allWrap = &lt;li class="naviItem"> | &lt;/li>
NO.ATagParams = class="menuLinkFirst"
ACT = 1
ACT.allWrap = &lt;li class="naviItem"> | &lt;/li>
ACT.ATagParams = class="menuLinkFirstAct"
}

temp.firstMenu2 = HMENU
temp.firstMenu2.begin = 2
temp.firstMenu2.maxItems = 5
temp.firstMenu2.wrap = | 

temp.firstMenu2.1 = TMENU
temp.firstMenu2.1 {
NO.allWrap = &lt;li class="naviItem"> | &lt;/li>
NO.ATagParams = class="menuLink"
ACT = 1
ACT.allWrap = &lt;li class="naviItem"> | &lt;/li>
ACT.ATagParams = class="menuLinkAct"
}

temp.firstMenu3 = HMENU
temp.firstMenu3.begin = 7
temp.firstMenu3.maxItems = 1

temp.firstMenu3.1 = TMENU
temp.firstMenu3.1 {
NO.allWrap = &lt;li class="naviItem"> | &lt;/li>
NO.ATagParams = class="menuLinkLast"
ACT = 1
ACT.allWrap = &lt;li class="naviItem"> | &lt;/li>
ACT.ATagParams = class="menuLinkLastAct"
}

temp.rootMenu = COA
temp.rootMenu.wrap = &lt;ul class="menuList"> | &lt;/ul>
temp.rootMenu.1 &lt; temp.firstMenu
temp.rootMenu.2 &lt; temp.firstMenu2
temp.rootMenu.3 &lt; temp.firstMenu3

#Und dann irgendwann mal
marks.wasweissichwas &lt; temp.rootMenu

Der erste und der Letze Menupunkt sind in diesem Menu anders (abgerundet). Aus dem Grund hab ich das ganze zum Schluss mit einem COA zusammengebaut. Es sind die Zustände "mouseOver" und "Act" drin.

@lutz
Hast du schon mal dran gedacht, das kohoutek den Code vieleicht nicht posten wollte, weil er Ihr selbst noch nicht gefällt? Das ist doch kein Grund so Harsch zu werden.

Gruß AFisch

**lutz** · #8 12.09.04, 10:10

Zitat:

@lutz
Hast du schon mal dran gedacht, das kohoutek den Code vieleicht nicht posten wollte, weil er Ihr selbst noch nicht gefällt? Das ist doch kein Grund so Harsch zu werden.

is doch überhaupt kein problem es einfach zu sagen.
wieso also sollte ich mir grundsätzlich von vorneherein ausdenken müssen, was evtl. sein könnte, wenn da nix steht?

auch wenn du es als harsch empfindunden hast, so war ich nur gerne sehr eindeutig.

p.s.: zweite und letzte antwort dazu, der thread hat schließlich ein anderes thema.

kohoutek · #9 12.09.04, 15:09

Na, ich glaub, ich habe mich tatsächlich mächtig getäuscht, was die Freundlichkeit hier angeht.

Es tut mir Leid, dass ich um 6 Uhr morgens, hunds Müde und ohne eine Minute geschlafen zu haben, nicht gleich die Lösung aufbereitet habe.
Ich bin noch nicht einmal fertig mit meinem Menü. Ich bin lediglich einen Schritt weitergekommen aber noch lange nicht mit meinem Menü fertig.
Und ich denke, es macht mehr Sinn, einen einwandfreien und sauberen Code zu posten, oder?

Lutz und andere. Finde es ziemlich schade, dass man hier gleich angegriffen wird, ohne ersichtlichen Grund. Es gibt immer noch die Möglichkeit zu "fragen" bevor man voreilige Schlüsse zieht.

Echt schade.

kohoutek · #10 12.09.04, 15:14

An AFisch.

Ich danke Dir für Dein Beispiel. Das ist super nett von Dir und ich kann sehr viel daraus lernen. GRACIAS!:D

Mit meinem CSS Stylesheet hatte der Fehler nichts zu tun. Mein CSS ist sauber und funktioniert einwandfrei ausserhalb typo3. Es ist lediglich die Umsetzung im setup meinerseits, die mächtig daneben war.

Hier ist mein CSS code aus dem Stylesheet.

Code:

       #navigation {
        
  	width: 900px;
        min-width:900px;
  	height: 20px;
        min-height:20px;
        top:113px;
  	margin: 0;
  	padding: 0;
        background: url(../images/nav/topnav.gif) no-repeat;
}
    
    #navigation ul {
           position:absolute;
           width: 900px;
           height: 20px;
           margin: 0;
           padding: 0;
           list-style: none;
           text-align: left;
}
     

    #navigation ul li {

           list-style: none;
           margin: 0;
           padding: 0;

}
     
   #navigation ul li a {
           height: 20px;
           display: block;

}


     #navigation ul li a#home, ul li a:active#home{

           position: absolute;
           top: 0;
           left: 0;
           width: 54px;
           background: url(../images/nav/home.gif) top left no-repeat;
}

     #navigation ul li a:hover#home {

           background: url(../images/nav/h_home.gif) top left no-repeat;
}

     #navigation ul li a#homecurrent {

           position: absolute;
           top: 0;
           left: 0;
           width: 54px;
           background: url(../images/nav/c_home.gif) top left no-repeat;
}

     #navigation ul li a#news {

           position: absolute;
           top: 0;
           left: 54px;
           width: 94px;
           background: url(../images/nav/news.gif) top left no-repeat;
}

     #navigation ul li a:hover#news, ul li a:active#news{

           background: url(../images/nav/h_news.gif) top left no-repeat;
}
     #navigation ul li a#newscurrent {

           position: absolute;
           top: 0;
           left: 54px;
           width: 94px;
           background: url(../images/nav/c_news.gif) top left no-repeat;
}

    #navigation ul li a#videoguide {

           position: absolute;
           top: 0;
           left: 147px;
           width: 93px;
           background: url(../images/nav/vg.gif) top left no-repeat;
}
     #navigation ul li a:hover#videoguide, ul li a:active#videoguide {
           
background: url(../images/nav/h_vg.gif) top left no-repeat;

}

     #navigation ul li a#videoguidecurrent {

           position: absolute;
           top: 0;
           left: 147px;
           width: 93px;
           background: url(../images/nav/c_vg.gif) top left no-repeat;
}

     #navigation ul li a#audioguide {

           position: absolute;
           top: 0;
           left: 240px;
           width: 92px;
           background: url(../images/nav/ag.gif) top left no-repeat;
      }
     #navigation ul li a:hover#audioguide, ul li a:active#audioguide {
           background: url(../images/nav/h_ag.gif) top left no-repeat;
      }
     #navigation ul li a#audioguidecurrent {
           position: absolute;
           top: 0;
           left: 240px;
           width: 92px;
           background : url(../images/nav/c_ag.gif) top left no-repeat;
}

     #navigation ul li a#tour {

           position: absolute;
           top: 0;
           left: 332px;
           width: 95px;
           background : url(../images/nav/tour.gif) top left no-repeat;
}

     #navigation ul li a:hover#tour, ul li a:active#tour {

           background: url(../images/nav/h_tour.gif) top left no-repeat;
}
     #navigation ul li a#tourcurrent {

           position: absolute;
           top: 0;
           left: 332px;
           width: 95px;
           background: url(../images/nav/c_tour.gif) top left no-repeat;
}
     #navigation ul li a#chronicles {

           position: absolute;
           top: 0;
           left: 427px;
           width: 80px;
           background: url(..images/nav/chronicles.gif) top left no-repeat;
}
     #navigation ul li a:hover#chronicles, ul li a:active#chronicles {
           
background: url(../images/nav/h_chronicles.gif) top left no-repeat;

}
     #navigation ul li a#chroniclescurrent {

           position: absolute;
           top: 0;
           left: 427px;
           width: 80px;
           background: url(../images/nav/c_chronicles.gif) top left no-repeat;
}

     #navigation ul li a#community {

           position: absolute;
           top: 0;
           left: 507px;
           width: 88px;
           background: url(../images/nav/community.gif) top left no-repeat;
}

     #navigation ul li a:hover#community, ul li a:active#community {

           background: url(../images/nav/h_community.gif) top left no-repeat;
}
     #navigation ul li a#communitycurrent {

           position: absolute;
           top: 0;
           left: 507px;
           width: 88px;
           background: url(../images/nav/c_community.gif) top left no-repeat;
}

    #navigation ul li a#multimedia {

           position: absolute;
           top: 0;
           left: 595px;
           width: 88px;
           background: url(../images/nav/mm.gif) top left no-repeat;
}

     #navigation ul li a:hover#multimedia, ul li a:active#multimedia {

           background: url(../images/nav/h_mm.gif) top left no-repeat;
}

     #navigation ul li a#multimediacurrent {

           position: absolute;
           top: 0;
           left: 595px;
           width: 88px;
           background: url(../images/nav/c_mm.gif) top left no-repeat;
}

     #navigation ul li a#memorabiliae {

           position: absolute;
           top: 0;
           left: 683px;
           width: 96px;
           background: url(../images/nav/memo.gif) top left no-repeat;
}
     
#navigation ul li a:hover#memorabiliae, ul li a:active#memorabiliae {

           background: url(../images/nav/h_memo.gif) top left no-repeat;
}

     #navigation ul li a#memorabiliaecurrent {

           position: absolute;
           top: 0;
           left: 683px;
           width: 96px;
           background: url(../images/nav/c_memo.gif) top left no-repeat;
}

     #navigation ul li a#miscellaneous {

           position: absolute;
           top: 0;
           left: 779px;
           width: 120px;
           background: url(../images/nav/misc.gif) top left no-repeat;
}
     #navigation ul li a:hover#miscellaneous, ul li a:active#miscellaneous {

           background: url(../images/nav/h_misc.gif) top left no-repeat;
}
     #navigation ul li a#miscellaneouscurrent {

           position: absolute;
           top: 0;
           left: 779px;
           width: 120px;
           background: url(../images/nav/c_misc.gif) top left no-repeat;
}

Das ist alles haargenau richtig und sauber. Aber, wie bereits schon hier erwähnt, die Umsetzung von mir war und ist noch nicht so richtig einwandfrei.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontales Menü mit \| trennen.	Mauki	GMENU, HMENU, TMENU und Co.	11	14.04.08 11:42
Seiten "Nicht im Menü" trotzdem bei Zuständen anzeigen	Trinity	GMENU, HMENU, TMENU und Co.	0	16.10.07 13:25
Horizontales Menü 2 Ebenen	Leopard99	GMENU, HMENU, TMENU und Co.	2	27.07.06 15:34
Horizontales Menü Aufklappbar ?	tp0682	GMENU, HMENU, TMENU und Co.	1	22.12.05 07:46

Suche

Userpanel

TemplaVoila + Horizontales Menü mit 3 IMG Zuständen