Zum Inhalt springen

Menüs basierend auf CSS

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

Tags: Frage

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

vpipe ·

Hallo!

Ich versuche seit einiger Zeit vergeblich, das Menü richtig zum laufen zu bekommen. Es wird zwar angezeigt, jedoch nur die erste Menüebene. Die Unterpunkte, die beim drüberhovern aufklappen sollten, erscheinen nicht.

Wisst ihr, woran das liegen könnte?

Die Seitenstruktur sieht so aus:
-Root (Shortcut auf Home)
---Menü oben (Shortcut auf Home)
------Home
------Kontakt
------Impressum
---Menü links (Shortcut auf Home)
------Punkt1
------Punkt2
---------Unterpunkt2.1
---------Unterpunkt2.2
------Punkt3
------Punkt4
---------Unterpunkt4.1

Code wie folgt:

LEFT_NAV = HMENU
LEFT_NAV {
                	special = directory
        special.value = 2
        1 = TMENU
        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
        }
        2 < .1 
        2.wrap = <ul>|</ul>
        3 < .2
        4 < .2
		  
	
              }

Ich hoffe ihr könnt mir helfen!

Viele Grüße,
Verena

astrula ·

Hallo,

ich habe nach langen anderen Versuchen nun auf diese Superarbeit von Just2b zurückgegriffen. Wunderbar mit notwendigen Änderungen funktioniert das Menu (vertikal) mit allen Browsern, außer natürlich Explorer!
Und ich werde demnächst verrückt, finde einfach nicht den Punkt.
Javascript+Css sind direkt in der HTML-Vorlage eingebunden, da ich TemplaVoilà verwende.
Besichtigen kann man mein Menu: http://www.lesablier-editions.com
Und hier mein CSS:

ul#nav,
ul#nav ul {
	margin: 0;
	padding: 0;
	width: 145px; /* Width of Menu Items */
	background: transparent; /* IE6 Bug */
	}
 
ul#nav li {
	position: relative;
	top: 250px;
	left: 5px;
	list-style: none;
	}
 
ul#nav li a {
	display:block; 
text-decoration:none;
font-size: 85%;
height:20px;
line-height:20px;
width:144px;
color:#000;
background: transparent;
text-indent:5px;
	}

ul#nav li a:hover{
color:#fff;
}
 
/* 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: 140px; /* Set 1px less than menu width */
	top: -255px;
	}
 
ul#nav li ul li a { padding: 1px 0;
	background: #CA3232;
	} /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over 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(../images/arrow.gif) right center no-repeat; }
 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	background-color: #CA3232; 
}

Kann mir jemand vielleicht weiterhelfen??
Danke im Voraus,
Astrid

just2b ·

Hallo Astrid,
mach doch mal schnell eine quicktest: original css + ts von mir, funktioniert dann das submenü?

georg

just2b ·

dann liegt der fehler da wo du was geändert hast.. schritt für schritt ändern und kontrolliern, dann findest den fehler schnell

viel erfolg
georg

astrula ·

Habe es jetzt nocheinmal mit deinem Original versucht - funktioniert auch nicht, hatte mich getäuscht. Ist zum verrückt werden.
Momentan habe ich es noch auf meiner Webside.
Was das wohl sein kann??
Astrid

just2b ·

Es liegt an

<SCRIPT type=text/javascript>
     window.onload=function(){
     Nifty("#menu a","transparent");
     }
  </SCRIPT>

lg georg

astrula ·

Vielen Dank erstmal für die Mühe!
Jetzt habe ich transparent aus dem Script rausgenommen, aber es funktioniert immer noch nicht...

just2b ·
astrula schrieb

Vielen Dank erstmal für die Mühe!
Jetzt habe ich transparent aus dem Script rausgenommen, aber es funktioniert immer noch nicht...

zeile 40-44 is noch immer drinnen und wenn du die seite mal lokal speicherst, das raus nimmst, dann wirst sehen dass es an dem liegt

georg

astrula ·

Jawohl, das funktioniert!
Natürlich habe ich so ein kleines Problem mit meinem Menu oben, es ist nicht mehr so gut, wenn ich drübergleite...
Trotzdem vielen Dank!
Astrid

Elfenkind ·

Hallo,
hab es bei mir auch grad eingebaut, funktioniert auch einwandfrei *lob*

Nun hätte ich nur noch eine Frage...
Gibt es eine Möglichkeit die Linklänge anzupassen? Hab das horizontale eingebaut.

Also z.b. das bei dem Link "Link" die farbhinterlegung kürzer ist wie bei dem Link "zweiterlink" das sich die Breite automatisch der Linklänge anpasst bzw. das man die Breite einzeln bestimmen kann?

lg

Elfenkind ·

Wo man die linklänge allg. verkleinern / vergrößern kann hab ich schon gefunden 😉

schade das es nicht einzeln geht, sind halt teilweise gute lücken drin...

also z.b.:

Linknametest (kleiner Abstand) Linknametest (kleiner Abstand) Linknametest (kleiner Abstand) Link (großer Abstand) Link (großer Abstand) Linkname usw...

und das kann man nicht irgendwie anders noch lösen?

lg

just2b ·

du könntest vielleicht mit optionsplit (siehe tsref) noch zusätzliche style-tags einbringen und dann damit stylen, das könnte klappen, hab ich aber noch nie ausprobiert

lg georg

theschaaf · 
seite = PAGE
seite {
   typeNum = 0
   bodyTag = <body bgColor = "#FFFFFF">
   stylesheet = fileadmin/dummyfiles/style.css
   meta.AUTHOR = Jens
   meta.DESCRIPTION = Homepage der CKS Systeme
   
   headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/dummyfiles/horizontal_JS.js"></script>

   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/dummyfiles/template_2.html
   10.workOnSubpart = DOKUMENT
   10.marks {

MENU_OBEN = HMENU
MENU_OBEN {
	special = directory
	special.value = 850

	1 = TMENU
	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
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
}

Bei mir kommt gar nichts,
was hab ich da falsch gemacht? Die Dateien sind alle an dem Ort wo sie hingehöhren, also die Pfade stimmen, hab ich vll einen Teil des TS an der falschen Stellen eingebunden?

Bei mir erscheint unten Links im IE auch immer eine Fehlermeldung, also so ein gelbes Dreieck mit Ausrufungszeichen??

danke auch schonmal für die Bereitstellung der Daten

gruß, theschaaf