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-)
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
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
Hallo,
nun man kann wohl nur so pauschal antworten: Es liegt an deinem CSS
lg georg
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
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
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
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
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
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 🙂
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
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
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
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
Hallo Astrid,
mach doch mal schnell eine quicktest: original css + ts von mir, funktioniert dann das submenü?
georg
Hallo Georg,
hatte den Test schon gemacht, funktioniert wunderbar...
Astrid
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
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
Es liegt an
<SCRIPT type=text/javascript>
window.onload=function(){
Nifty("#menu a","transparent");
}
</SCRIPT>
lg georg
Vielen Dank erstmal für die Mühe!
Jetzt habe ich transparent aus dem Script rausgenommen, aber es funktioniert immer noch nicht...