Hi,
wie gestalte ich denn ein GMENU_LAYERS Menü mit mehr als einer subebene ? Speziell die Ausrichtung der 2. Untermenüebene gestaltet sich schwierig, die klappt immer ganz links am Rand des Menüs und nicht relativ zum Parent-Menüpunkt auf...any ideas 😃 ?
Hab bisher folgenden Code :
page = PAGE
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden;
xPosOffset = -20
lockPosition = x
entryLevel = 1
expAll = 1
NO {
backColor = #FFAB0E
XY = [10.w]+80, 30
10 = TEXT
allWrap = |
10.text.field = title
10.offset = 5,17
10.fontColor = #FFFFFF
10.fontFile = fileadmin/verdana.ttf
10.fontSize = 13
}
}
page.10.2 = GMENU_LAYERS
page.10.2 {
expAll = 1
layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden;
xPosOffset = -20
lockPosition = y
NO {
allWrap = |*|
backColor = #FFEEEE
XY = 120, 18
10 = TEXT
10 {
text.field = title
offset = 5,12
fontColor = #FFAB0E
fontFile = fileadmin/fonts/verdana.ttf
fontSize = 11
niceText = 1
}
}
}
page.10.3 = GMENU_LAYERS
page.10.3 {
layerStyle = position:absolute;left:20px;top:35px;width:30px;VISIBILITY:hidden;
xPosOffset = -20
dontFollowMouse = 1
NO {
allWrap = <br />
backColor = #FFEEEE
XY=100,18
10 = TEXT
10 {
text.field = title
offset = 5,12
fontColor = #FFAB0E
fontFile = fileadmin/fonts/verdana.ttf
fontSize = 11
niceText = 1
}
}
}
page.10.4 = GMENU
page.10.4 {
expAll = 1
NO {
allWrap = |*| <br />
backColor = #FFEEEE
XY=100,18
10 = TEXT
10 {
text.field = title
offset = 5,12
fontColor = #FFAB0E
fontFile = fileadmin/fonts/verdana.ttf
fontSize = 11
niceText = 1
}
}
}
Man kann das Ergebnis hier sehen : http://www.calophainsloft.de/web/index.php?id=35
Muss das ein GMENU werden oder ginge auch ein TMENÜ? Ich hab mir vor ein paar Tagen mit so einem DropDown und der Ausrichtung auch die Haare gerauft.
Meine Lösung sollte aber auch mit einem GMENÜ klappen...
Ich habe gerade nochmal deinen anderen Thread gelesen, wolltest du es nicht ursprünglich anders haben?
Ich bin heute über ein Tutorial zum Thema horizontales Menü gestolpert, vielleicht hilfts dir ja:
http://www.alistapart.com/articles/hybrid/
Hi, erstmal vielen Dank für den Link zu Hybrid-CSS-Menüs, das hilft mir evtl. auf der anderen Baustelle weiter...
Kannst du deinen TS-Code für dein TMENÜ mit mehr als 1 Subebene posten bzw. wenn du das nicht möchtest den "Kniff" zur ausrichtung der 2. Menüebene beschreiben ? Thx !
Sorry hat etwas gedauert...
Also ich habs mit normalem TMENU und CSS gelöst, das ginge dann sicher auch mit nem GMENU und CSS.
Hier mal der TS:
temp.dropmenu = COA
temp.dropmenu.wrap = <div id="dropdown">|<hr style="width:100%; visibility: hidden; clear: both; height: 0px;" /></div>
#
temp.dropmenu.10 = HMENU
temp.dropmenu.10.entryLevel = 1
temp.dropmenu.10 {
1 = TMENU
1.wrap = <ul>|</ul>
1.expAll = 1
1.noBlur = 1
1.NO = 1
1.NO{
stdWrap.case = upper
wrapItemAndSub = <li onmouseover="javascript: this.className+='over';" onmouseout="javascript: this.className=this.className.replace('over', '');"> | </li>
}
}
temp.dropmenu.10.2 < temp.dropmenu.10.1
#temp.dropmenu.10.2.wrap = <div id="dropebene2"><ul>|</ul></div>
temp.dropmenu.10.3 < temp.dropmenu.10.1
Hier der passende CSS Code... Das Ding funktioniert im IE und FF über drei Ebenen und dazu auch zweireihig in der ersten Ebene, falls es zuviele Punkte werden... Die IE User müssen allerdings JS eingeschaltet haben sonst geht nichts.
#dropdown {
font-family: verdana, sans-serif;
width:800px;
position:relative;
font-size:0.85em;
z-index:81;
margin: 0;
padding: 0;
}
div#dropdown ul{
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
div#dropdown ul li{
list-style: none;
color: #626044;
float: left;
margin: 0;
text-align: left;
padding: 2px 0;
}
div#dropdown ul li a{
text-decoration: none;
color: #000;
padding: 0;
margin: 0;
font-size: 13px;
text-align: left;
padding-left:10px;
display:block;
}
div#dropdown ul li a:hover{
}
#dropdown li ul {
float: left;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: auto;
background: #00ff00;
z-index: 50;
}
#dropdown li ul li{
float:none;
margin: 0;
z-index: 50;
padding: 5px 1px;
background: #00ff00;
text-align: left;
width: 180px;
display: block;
}
#dropdown li ul a{
padding: 0;
margin: 0;
display: block;
z-index: 50;
background:#00ff00;
line-height: 1.1em;
}
#dropdown ul li ul li a{
color: #000000;
}
#dropdown li > ul > li a{
color: #000000;
}
#dropdown li > ul {
margin: 0;
padding: 0;
top: auto;
left: auto;
width: 180px;
z-index: 50;
}
#dropdown li > ul > li {
margin: 0;
padding: 4px 1px;
z-index: 50;
top: auto;
left: auto;
font-weight: normal;
}
#dropdown li ul a:hover{
z-index: 50;
position: relative;
color: #000000;
font-weight: normal;
}
#dropebene2{
display:block;
position: absolute;
top: auto;
left: auto;
background: red;
float: left;
}
#dropdown li ul li ul li{
padding: 0;
z-index: 50;
position: relative;
top: -15px;
left: 0px;
padding: 4px 1px;
background:#00ff00;
text-align: left;
}
#dropdown li ul li ul{
padding: 0;
display: none;
position: absolute;
top: auto;
left: 180px;
width: 180px;
z-index: 50;
background: #00ff00;
}
#dropdown li > ul > li > ul{
background: transparent;
}
#dropdown li > ul > li > ul > li{
margin: 0;
padding: 4px 1px;
z-index: 50;
top: -15px;
left: 0px;
font-weight: normal;
}
#dropdown li:hover ul { display: block; z-index: 150; font-weight: normal;}
#dropdown li.over ul {display: block; z-index: 150; font-weight: normal;}
#dropdown li:hover ul li ul{ display: none; z-index: 150; font-weight: normal;}
#dropdown li.over ul li ul{display: none; z-index: 150; font-weight: normal;}
#dropdown li ul li:hover ul { display: block; z-index: 150; font-weight: normal;}
#dropdown li ul li.over ul {display: block; z-index: 150; font-weight: normal;}
Ich kommentiere es nicht, das ist mir jetzt gerade zu aufwendig. Da ist bestimmt einiges doppelt, wo man ein bisschen Code sparen könnte, aber so funktioniert es auf jeden Fall.
Grundsätzlich sind die Anweisungen mit den > Zeichen nur für FF um unterschiedliche Positionierungen in IE und FF hinzukriegen.
Müsste sogar valider Code sein.
Sodale,
nach dem Problem mit den horizontalen Menüpunkten habe ich nun auch das Problem mit mehr als einer Subebene im Menü gelöst. Dazu muß man Layer quasi schachteln, hier die entscheidenden Passagen aus meinem Typoscript, die Layerbreite muß in layer-style verringert werden, wenn man vertikal aufgelistete Submenüs will.
menu = PAGE
menu.bodyTag = <body background="fileadmin/menue_03.jpg" style="background-position: left; background-repeat: no-repeat;" topmargin = 0 leftmargin=300 rightmargin = 0>
menu.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
menu.10 = HMENU
menu.10.1 = GMENU_LAYERS
menu.10.1 {
dontHideOnMouseUp = true
layerStyle = position:absolute;left:30px;top:25px;width:450px;VISIBILITY:hidden;
xPosOffset = -300
lockPosition = x
expAll = 1
NO {
backColor= #8ac2c2
XY = [10.w]+61, 20
10 = TEXT
allWrap = |
10.text.field = title
10.offset = 5,16
10.fontColor = #FFFFFF
10.fontFile = fileadmin/verdana.ttf
10.fontSize = 14
}
}
menu.10.2 = GMENU_LAYERS
menu.10.2 {
expAll = 1
layerStyle = position:absolute;left:30px;top:15px;width:120px;VISIBILITY:hidden;
xPosOffset = -650
lockPosition = x
NO {
allWrap = |*|
backColor = #8ac2c2
XY=[10.w]+25,18
10 = TEXT
10 {
text.field = title
offset = 5,10
fontColor = #FFFFFF
fontFile = fileadmin/fonts/verdana.ttf
fontSize = 11
niceText = 0
}
}
}
menu.10.3 = GMENU
menu.10.3.target=kontent
menu.10.3 {
expAll = 1
NO {
allWrap = |*|
backColor = #8ac2c2
XY=[10.w]+25,18
10 = TEXT
10 {
text.field = title
offset = 5,10
fontColor = #FFFFFF
fontFile = fileadmin/fonts/verdana.ttf
fontSize = 11
niceText = 0
}
}
}
"menu" ist Teil eines Framesets, also nicht wörtlich nehmen, da kann jedes PAGE-Objekt stehen....
Hope to have helped you,
Frank