Zum Inhalt springen

Menüs basierend auf CSS

Erstellt am 7. März 2006 · 136 Antworten · letzte Antwort am 16. November 2006 · Seite 4 von 7

Tags: Frage

moadin ·

Hallo just2b,

was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...

moadin

just2b ·
moadin schrieb

Hallo just2b,

was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...

moadin

ja schon alles richtig... ist aber denk ich bei den layer-menüs auch nicht anders, oder irr ich mich? naja mal schauen ob mir was einfällt dazu,.. oder wem anderen, hilfe = willkommen 😉

georg

moadin ·

Hi just2b,

auf grainau.de wird bspw. ein DHTML-Menü eingesetzt, das entsprechend der Fensterbreite das Menü nach Links bzw. Rechts aufklappt. Allerdings wird das halt über Javascripts (onmouseover/out)gesteuert und ein Blick in den Quellcode zeigt dass das für TYPO3 nicht unbedingt geeignet ist.
Da gefällt mir deine kompakte Version schon sehr viel besser...!

Wäre ja super wenn es dafür eine Lösung gäbe.
Ich könnte mir vorstellen irgendwie ein JS einzubinden dass entsprechend den margin-right den document.write der CSS-Klasse überschreibt.
Ist bisher aber nur eine Idee.

Viele Grüße,

moadin

MrTwister ·

Hi,
danke just2b für das geile HowTo.
Genau was ich vergeblich gesucht hatte.
Ich hatte mich schon bei der Templateerstellung für ein CSS basiertes Dropdown Menu entschieden.
Bei der Einbindung in Typo wurde die Liste aus den Menüeinträgen im BE einfach nicht korrekt angezeigt; bis ich auf dein HowTo gestoßen bin.
Hab dein Typoscript eingefügt und zack - JUBEL juhuhuhuuhuh - es funktioniert.

Danke dir vielmals!

Hier könnt ihr euch das Menu anschaun:
Die Seite soll später unter http://www.inbits.de erreichbar sein.
Momentan noch unter http://www.inbits.de/home/index.php?id=8

Gruß Andreas

MrTwister ·

Nochmal hi,
das Menü funktioniert jetzt soweit allerdings habe ich noch ein kleines Problem bei der Link Formatierung in den Submenüs.
1.)
Ich würde gerne dem Linktext, zwecks css Formatierung, im <a>-Tag ein <span> Element voranstellen.
So solls aussehn:
-> <a href="#home"><span class="top_nav">Startseite</span></a>
siehe Zeile 4

Hab das mal mit linkWrap probiert, das stellt mir das <span>-Tag aber leider um das <a>-Tag ausenrum (<span><a></a></span>)

2.)
Außerdem soll beim letzten Menüpunkt das Menü weiter links dargestellt werden. Hierzu müsste ich dem letzten <ul> von den Submenüs einen anderen "style" zuweisen - aber wie über ts? siehe Zeile 9

So sollte der Quelltext aussehn:

...
<li><a href="#Beispiel">Unternehmen</a>
  <ul>
    <li><a href="#Beispiel"><span class="navi-sub">Wir über uns</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
<li><a href="#Beispiel">Referenzen</a>
  <ul style="position: absolute; top: 33px; left: -76px;">
    <li><a href="#Beispiel"><span class="navi-sub">Branchen</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
...

Edit:
zu 1.)
Hab das ganze noch mit stdWrap getestet - bringt aber leider keine Veränderung - Zeile 23
Der Typoscript-Code sieht folgendermaßen aus:

subparts {
      # Ersetzen von "navigation" Dropdown Menu
    navigation = HMENU
    navigation {
      special = directory
      special.value = 2
      1 = TMENU
      1 {
        expAll = 1
        noBlur = 1
        NO = 1
        NO.wrapItemAndSub = <li>|</li>

        IFSUB = 1
        IFSUB.wrapItemAndSub = <li>|</li>
        ACTIFSUB < .IFSUB
      }
      
      2 < .1	
      2 {
        wrap = <ul>|</ul>

        # NO.stdWrap = <span class="navi-sub">|</span>

      }
      
      3 < .2
      4 < .2
    }

Vielleicht kann mir dabei jemand helfen - Danke
Gruß Andreas

renaade ·

Hallo MrTwister,

was willst du denn erreichen? Ein padding-left für die Links im Untermenü? Das könntest du auch komplett über das CSS lösen, z.B.

ul#navigation li ul li a {
padding-left: 5px;
}

Ansonsten würde ich die Klasse ist das <li> schreiben, z.B. so:

2 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li class="top_nav">|</li>
}

CSS dazu:
ul#navigation li ul li.top_nav a {
/* deine Styleangaben für die Subnavi */
}

Vielleicht hilft es.

P.S. Ich benutze statt des Javascript übrigens eine .htc-Datei mit Behaviors. Hier kann man das Skript herunter laden: http://www.xs4all.nl/~peterned/csshover.html. Es löst ausser dem Problem mit den Klappmenüs auch noch das mit dem Farbwechsel bei CSS-Buttons. Und es funktioniert auch dann, wenn Javascript ausgeschaltet sein sollte.

MrTwister ·

Hi,
danke erstmal für deine Antwort.

Zu 1.)
Stimmt, wegen dem padding das könnte ich auch in den link tag schreiben.
Mal schaun ob dann auch "display:block" funktioniert
-> So soll das ganze Feld anwählbar sein nicht nur der Text als Link.

Mit "display:block" im a-Tag funktioniert leider nicht. Ist auch wieder mal nur für den ie :/ Müsste also doch ein <span> außenrum.

Zu 2.)
Aber wie bekomm ich es hin nur dem letzten <ul> des listings einen anderen style zu geben?

renaade ·

Hallo MrTwister,

gern geschehen o.O

zu 1.) Wenn das gesamte Linkfeld klickbar sein soll, muss das display:block auch in die "a"-Formatierungen.

zu 2.) Ich würde versuchen, es über eine IF-Schleife zu lösen, die den letzten Eintrag im Menü ausliest und ihm die alternative Formatierung mitgibt. Aber um das in TypoSkript umzusetzen, bin ich noch viel zu sehr Anfängerin 🙁 .

Über die Lösung würde ich mich aber genauso freuen wie du.

Grüße, Renaade

NetPartyzan ·

Moin Moin, hab mich jetzt ne Weile mit dem Menü beschäftigt, es angepasst, und weitere Schnipsel mit einfließen lassen.

Mein Ziel ist es, das Menu möglichst flexibel in Größe und Position erscheinen zu lassen, und desweiteren eine möglichst genaue, browserübergreifende, Darstellung zu erreichen.

Aber ein Prob. (bis jetzt) ( #evil# ) hab ich da noch!!! (Siehe Anhang)

Hab das ganze mal ein wenig dokumentiert, hier der link:
Download: http://www.pixelcruiser.net/fileadmin/downloads/CSS-MENU.zip

Würd mich freuen, wenn jemand das mal checkn könnte!!!
Und DEN Tip für mich hätte!!!
Vielleicht hab ich da ja auch totalen Schrott fabriziert 😢 .
Naja ganz so schlimm wirds schon net sein #giggle# .
Thx und MfG Joh 8-)

MrTwister ·

Hi,
mmh ich hab mir alles runtergeladen und im IE version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
angeschaut.
Konnte keinen Fehler feststellen.
Wahrscheinlich ist es nur ein Darstellungsfehler vom IE 7.
Soviel ich weiß befindet sich der IE 7 sowieso noch in der Beta!?

@renaade
bin leider auch noch Anfänger was typoscript betrifft. Hab mich dazu entschieden den letzten Menüpunkt doch erstmal unverändert anzuzeigen. So schlimm siehts ja net aus o.O

p4tent ·

hallo alles zusammen,

ich kam heute nacht in den genuss diesen wundervollen thread aufzustöbern, der auf einmal mehr oder weniger alle meine probleme löst, da das genau das ist, was ich gesucht habe 8-) 😃

ein kleines problem bzw. eine frage:

ich hab im hintergrund des menüs ein bild, will dem menü aber auch eine hintergrundfarbe geben --> transparenz..
es stellt sich die frage wie ich in das menü transparenz bekomme, worauf ich nach etwas stöbern diesen quellcode fand

style: -moz-opacity:0.5; filter:alpha(opacity=50);

ich weiß, dass das nicht das gelbe vom ei ist, aber ich dachte es genügt mir erst mal...

das problem ist jetzt, nachdem ich den code testweise an verschieden stellen im menü eingefügt habe, dass meistens die 3. ebene nicht mehr angezeigt wird #angry#
woran kann das liegen?
würd mich freuen wenn mir jemand helfen kann, bzw. mir einfach die zeile an der richtigen stelle einfügt..

vielen dank

gruß p4tent

p4tent ·

ja, dass es am css liegt, ist klar...aber es ist nicht mein css sondern das css (quasi unverändert) von dem vertikalen menü..ich hatte gehofft, dass du mir als ersteller da weiterhelfen kannst..

gruß p4tent

just2b ·
p4tent schrieb

ja, dass es am css liegt, ist klar...aber es ist nicht mein css sondern das css (quasi unverändert) von dem vertikalen menü..ich hatte gehofft, dass du mir als ersteller da weiterhelfen kannst..

gruß p4tent

sorry aber ich kann nicht raten! unverändert funktionierts und was DU geändert hast kann ich mir niht aus den fingern saugen! stell ein Bsp online und dann kann mans auch anschaun und helfen... #angry#

georg

p4tent ·

die css-datei ist unverändert, mit der einzigen ausnahme, dass ich im body den hintergrund rausgenommen habe, alles andere ist absolut identsich...alles was ich wissen will, ist wo ich die transparenz einfügen muss, ohne dass die dritte ebene nicht mehr angezeigt wird.
danke

p4tent · 
body { 
	font-family: verdana, arial, helvetica, serif;
	font-size: 62.5%;
	color: black;
                
	
}
 


ul#nav,
ul#nav ul { 
	margin: 0;
	padding: 0;
	width: 150px; /* Width of Menu Items */
	border-bottom: 0px solid #000;
                border-right: 0px solid #000;
                frame:below;
	background: #646461; /* IE6 Bug */
	color: black;
	font-size: 10px;
***********************************************
*     style: -moz-opacity:0.8; filter:alpha(opacity=80);
***********************************************             
	}
 
ul#nav li {
	position: relative;
	list-style: none
              }
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #d2d2d2;
	padding: 5px;
	border: 0px solid #000;
	border-bottom: 1px solid #000;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
                
	}


ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block;} /* The magic */
 
ul#nav li.menuparent { background: transparent url(pfeil.gif) right center no-repeat;}

 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	/*background-color: #f9f9f9; */
                background-color: #646461; 
}
 
 
ul#nav li a:hover { 
	color: #FFF; 	

/*Transparenz:    style: -moz-opacity:0.5; filter:alpha(opacity=50);*/
}

hallo just2b,
das ist der code. wenn ich jetzt wie hier gekennzeichnet die transparenz einfügen will, werden nur noch die erste und zweite menüebene angezeigt, alle weiteren nicht. vielleicht fällt dir auf, was ich die ganze zeit überseh..

viele grüße und danke
p4tent

reetosh ·

Hallo just2b

Zuerst einmal vielen Dank für Dein Howto, einfach Spitze !!!

Hast Du schon eine Zeitverzögerung (beim verlassen mit der Maus) eingebunden?
Wenn ja wäre ich froh für einen Tipp.

THX

Grüsse,
reetosh

Cooba ·

Tagchen erstmal.

Habe mir auch das sehr gute horizontale Dropdown-Menü von Just2b gegönnt. Ich habe es jedoch mit Templa Voilà eingebunden und nicht mit Marks, sowie die meisten hier. Leider will sich das Menü partout nicht ausklappen. Kann euch leider keinen Link geben, da das ganze ein Intranet Server ist.

Der Typoscript Code ist wie folgt:

lib.menu_1 = HMENU 
		
lib.menu_1.1 = TMENU
lib.menu_1.1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	lib.menu_1.2 < .1	
	lib.menu_1.2.wrap = <ul>|</ul>

	lib.menu_1.3 < .2
	lib.menu_1.4 < .2
	




page = PAGE

page.typeNum = 0

page.10 = USER

page.10.userFunc = tx_templavoila_pi1->main_page

Das Javascript und die css Datei sind beide direkt im Web-Template Header drin, der über Templa Voilà direkt eingebunden wurde.

Hab ich irgendetwas vergessen oder nicht beachtet ? Vielleicht hänge ich schon zu lange davor und sehe den Wald vor lauter Bäumen nicht mehr :o

Danke schon mal im voraus 🙂

p4tent ·

Hallo,

ich habe mich jetzt nochmal mit meinem Problem beschäftigt, dass das Menü, wenn ich es transparent mache, nicht mehr richtig funktioniert. ich konnte es nach wie vor nicht lösen, hoffe aber, dass mir doch noch einer von euch helfen kann:

zunächst mal mein setup:

NAV_L = HMENU
                 NAV_L {
	            1 = TMENU
	            1 {
		expAll = 1
		wrap = <ul id="nav" style="filter:Alpha(opacity=80, finishopacity=0, style=0)">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	             }
	            2 < .1
                            2.wrap= <ul>|</ul>
                            3 < .2
                            4 < .2
}

Füg ich die Zeile "style="filter:Alpha(opacity=80, finishopacity=0, style=0)"" wie hier im beispiel in das erste tmenu ein, wird nur die erste anzeige durchsichtig, alle anderen die ausklappen sind nicht durchsichtig.
füge ich jetzt im 2. tmenu bei wrap die selbe zeile ein, werden die erste und die zweite ebene durchsichtig, aber alle weiteren werden nicht angezeigt. lasse ich dagegen die 2. ebene normal und füge den wrap erst beim 3. tmenu ein, wird nur noch die 4. ebene nicht angezeigt und in der zweiten passiert natürlich nichts. ich bin ziemlich am verzweifeln, weil ich nicht weiß was ich tun soll. der vollständigkeit halber füge ich noch die css datei mit an:

css:

body { 
	font-family: verdana, arial, helvetica, serif;
	font-size: 62.5%;
	color: black;
                
	
}
 


ul#nav,
ul#nav ul { 
	margin: 0;
	padding: 0;
	width: 150px; /* Width of Menu Items */
	border-bottom: 0px solid #000;
                border-right: 0px solid #000;
                frame:below;
	background: #646461; /* IE6 Bug */
	color: black;
	font-size: 10px;
                
              	}
 
ul#nav li {
	position: relative;
	list-style: none
              }
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #d2d2d2;
	padding: 5px;
	border: 0px solid #000;
	border-bottom: 1px solid #000;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
                
	}


ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block;} /* The magic */
 
ul#nav li.menuparent { background: transparent url(pfeil.gif) right center no-repeat;}

 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	/*background-color: #f9f9f9; */
                background-color: #646461; 
}
 
 
ul#nav li a:hover { 
	color: #FFF; 	

/*Transparenz:    style: -moz-opacity:0.5; filter:alpha(opacity=50);*/
}

bin für jede hilfe dankbar.

viele grüße
p4tent

rpretory ·
just2b schrieb
AndyKöln schrieb

Wäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.

IMHO nicht, wiel du ja ein display:block brauchst

ob bei diesen menu geht weis ich nicht habe den ganzen code nicht gelesen, der aufbau scheint gleich zu sein.
bei meinen setzte ich den wert:

with: 10px für ie
with: 100% für fox

mit typoscipt als cssimport
ein padding-left + right für einen schönen abstand

#nav a {
padding-top: 0px;
line-height: 18px;
/*width: 100%; import!*/
height: 18px;
display: block;
padding-left: 10px;
padding-right: 10px;
overflow: inherit;
}

somit stellt sich mein menu auf die länge ein!

LG
roman