p4tent schriebja, 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 schriebAndyKöln schriebWä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...
astrula schriebVielen 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
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
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
Hallo,
du kannst global die Linklänge bestimmen, via CSS, aber nicht für einen Menüpunkt einzeln
lg georg
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