Servus,
habe es endlich hinbekommen mit einem transparenten Layer Menü.
http://www.repetal.de/cms
Jetzt noch ein kleines Problem.
Ich möchte das das LayerMenu bei dem jeweils ausgewählten Hauptmenüpunkt auch AKTIV bleibt. Weil sonst weiß man nie wo man sich gerade im Menü befindet. Also wenn ich z.B auf Aktivitäten klicke soll nur das zugehörige Layermenü auskeklappt bleiben.
Jemand ne Idee!?
Besten Dank.
MfG
salutti
ich würde das mit einem klickpfad realisieren.
hey, ich hab gesehen, dass du das problem von mir gelöst hast... seite zentriert und das untermenu ist nicht verschoben...
kannst du mal dein typoscript posten?
liebe grüsse
heinz
Das mit dem Klickpfad hab ich auch mal eingebaut, gute Idee ;-)
Trotzdem würde ich gerne wissen ob und wenn ja wie das funktioniert
das der Layer stehen, also aktiv bleibt..
Hier noch mein TS:
page = PAGE
page {
includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
typeNum = 0
# Allgemeine Seiteneigenschaften setzen
bodyTag = <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
meta.AUTHOR = REPETAL.de
meta.DESCRIPTION = Hier steht eine Beschreibung
stylesheet = fileadmin/style.css
10 = TEMPLATE
10 {
template = FILE
template.file = fileadmin/vorlage_neu.html
workOnSubpart = DOKUMENT
marks {
KLICKPFAD = COA
KLICKPFAD {
10 = TEXT
10.value = Sie befinden sich hier:
20 = HMENU
20 {
special = rootline
special.range = 2|-1
1 = TMENU
1.NO = 1
1.NO.linkWrap = | //
}
}
MENU_MITTE = HMENU
MENU_MITTE{
1 = TMENU_LAYERS
entryLevel = 1
1 {
wrap=<table><tr align="center" class="menu_level1">|</tr></table>
layerStyle = vertical-align:middle;align:center; position:absolute;VISIBILITY : hidden;left:179px;width:110px;border: 0px solid #669900; background: transparent;
lockPosition = y
hideMenuWhenNotOver = 1200
hideMenuTimer = 1000
expAll=1
directionUp = 1
leftOffset = 0
topOffset = -4
relativeToTriggerItem = 1
align = center
vertical-align=middle
NO = 1
NO.align = center
NO.allWrap = <td class="menu_level1"> | </td>
ACT = 1
ACT.align = center
ACT.allWrap = <td class="menu_level1_aktiv"> | </td>
CUR = 1
CUR.align = center
CUR.allWrap = <td class="menu_level1_aktiv"> | </td>
}
2 = TMENU
2.NO = 1
2.NO.allWrap = <div class="menu_level2"> | </div>
2.ACT = 1
2.ACT.allWrap = <div class="menu_level2_aktiv"> | </div>
2.CUR = 1
2.CUR.allWrap = <div class="menu_level2_aktiv"> | </div>
}
INHALT = CONTENT
INHALT{
table = tt_content
select {
where = colPos = 0
orderBy = sorting
languageField = sys_language_uid
}
}
HEAD = CONTENT
HEAD {
table = tt_content
select {
where = colPos = 3
orderBy = sorting
languageField = sys_language_uid
}
}
}
}
}
tt_content.image.20.spaceBelowAbove = 0
tt_content.image.20.colSpace = 0
tt_content.image.20.rowSpace = 0
tt_content.image.20.captionSplit.stdWrap.spaceBefore = 0
tt_content.image.20.captionSplit.stdWrap.wrap = |
tt_content.image.20.captionSplit.stdWrap.wrap = | <br />
tt_content.image.20.captionSplit.stdWrap.br = 0
tt_content.image.20.captionSplit.stdWrap.br =
tt_content.image.20.captionSplit.stdWrap.br = 1
tt_content.mailform.20.target = _self
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0
content.headerSpace = 0|0
content.space = 0|0
MfG
Hallo,
hast Du es eigentlich herausgefunden?
Gruß
Hallo,
also ich versuch ach schon ewig nun so ein Menü fuer eine zentrierte Seite hinzubekommen, aber das Untermenue ist immer da wo es nicht sein soll. Und wen nes dann an der richtigen Position ist, durch ie Verschiebung mit zb margin, dann ist es spätestens wenn man die Fenstergröße oder Auflösung aendert total verkehrt.
Könntest du vielleicht den zugehörigen CSS Ausshcnitt posten, oder mir Tips geben woran das liegen könnte?
Hab nun schon ettliche Dinge versucht, aber bin immer wieder beim selben Ergebnis gelandet.... #angry#
Servus,
ich habe auch ewig gebraucht bis das mal lief. Hier mal das CSS, vielleicht kannst du damit was anfangen:
html>body .menu_level1 {
width: auto;
min-width: 118px;
align: center;
vertical-align:middle;
}
.menu_level1 {
margin: 8 0 0 15;
width: 103px;
align:center;
vertical-align:middle;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1 a:link {
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: white;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
align:center;
vertical-align:middle;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1 a:visited{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: white;
font-size: 11px;
text-decoration:none;
display:block;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1 a:focus{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1 a:hover {
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1 a:active{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1_aktiv a:link{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
align:center;
vertical-align:middle;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1_aktiv a:visited{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #543002;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1_aktiv a:hover{
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
.menu_level1_aktiv a:active {
margin: 8 0 0 15;
width: 107px;
height: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #543002;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
vertical-align:middle;
align: center;
background-image: url(fileadmin/pics/button_mainmenu.jpg);
}
BODY { font-size:12px; font-family:arial, helvetica, sans-serif; font-weight:normal; text-align: justify; }
.bodytext {text-align: justify;}
strong { color: #669900;}
p {text-align: justify; }
.inhalt {
color: #000000;
font-size: 11px; font-family: arial, helvetica, sans-serif; font-weight: normal;
text-align: justify;}
.inhalt a:link { text-decoration:underline; color:#000000; }
.inhalt a:visited { text-decoration:underline; color:#000000}
.inhalt a:hover { text-decoration:none; color:#000000; }
.inhalt a:active { text-decoration:none; color:#000000; }
.inhalt a:focus { text-decoration:none; color:#000000; }
.menuoben {
color: #FFFFFF;
font-size: 10px; font-family: arial, helvetica, sans-serif;
}
.menuoben a:link { text-decoration:none; color:#FFFFFF; valign:middle;}
.menuoben a:visited { text-decoration:none; color:#FFFFFF; valign:middle;}
.menuoben a:hover { text-decoration:none; color:#FFFFFF; valign:middle;}
.menuoben a:active { text-decoration:none; color:#FFFFFF; valign:middle;}
.menuoben a:focus { text-decoration:none; color:#FFFFFF; valign:middle;}
.menu_level2 a:link {
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #669900;
}
.menu_level2 a:visited {
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #669900;
}
.menu_level2 a:hover {
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #724307;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #724307;
}
.menu_level2_aktiv a:active {
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #724307;
font-weight: bold;
font-size: 10px;
text-decoration: none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #FFFFFF;
}
.menu_level2_aktiv a{
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #724307;
font-weight: bold;
font-size: 10px;
text-decoration: none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #FFFFFF;
}
.menu_level2 a:active {
width: 119px;
font-family: verdana, arial, helvetica, sans-serif;
color: #724307;
font-weight: bold;
font-size: 10px;
text-decoration: none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
border-left: 3px solid #FFFFFF;
}
/*------------------------------------*/
* {text-align: justify; font-size: 11px;}
a {align:center;}
* default styles for extension "tx_veguestbook_pi1" */
.tx-veguestbook-pi1 h2.tx-guestbook-form-error {
font-size:100%;
font-weight:bold;
background:none;
padding:0px;
}
.tx-veguestbook-pi1 ul li {
color:#669900;
}
.tx-veguestbook-pi1 ul {
margin-bottom:0.5em;
}
.tx-veguestbook-pi1 .tx-guestbook-result {
font-size: 100%;
font-weight:bold;
float:left;
}
.tx-veguestbook-pi1 .tx-guestbook-pagination {
font-size:100%;
font-weight:bold;
float:right;
}
.tx-veguestbook-pi1 h2.tx-guestbook-header {
clear:both;
background:#669900;
color:#FFF;
display:block;
font-size:100%;
padding:0.125em 0.125em 0.125em 0.25em;
font-weight:bold;
margin-top:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-left {
float:left;
width:10em;
background:#EFEFEF;
padding:0.25em;
min-height:4em;
}
* html .tx-veguestbook-pi1 .tx-guestbook-left {
height:4em;
}
.tx-veguestbook-pi1 .tx-guestbook-left p {
font-size:100%;
color:#333;
}
.tx-veguestbook-pi1 .tx-guestbook-right {
float:left;
width:29em;
background:#FFF;
padding-left:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-latest p,
.tx-veguestbook-pi1 .tx-guestbook-right p {
font-size:100%;
color:#333;
}
.tx-veguestbook-pi1 .tx-guestbook-latest p.tx-guestbook-date,
.tx-veguestbook-pi1 .tx-guestbook-right p.tx-guestbook-date {
font-size:100%;
color:#669900;
}
.tx-veguestbook-pi1 .tx-guestbook-right h3 {
font-size:100%;
color:#669900;
font-weight:bold;
background:none;
padding:0.25em 0em 0em 0em;
}
.tx-veguestbook-pi1 .tx-guestbook-right .tx-guestbook-comment {
font-size:100%;
color:#333;
font-style: italic;
}
.tx-veguestbook-pi1 .tx-guestbook-latest {
display:block;
padding:0.25em;
clear:both;
}
.tx-veguestbook-pi1 .tx-guestbook-latest p.tx-guestbook-date {
background:#EEE;
display:block;
margin-top:0.25em;
padding:0.125em;
}
.tx-veguestbook-pi1 .tx-guestbook-latest p.tx-guestbook-latest-more a {
background:#EEE;
display:block;
margin-top:0.25em;
padding:0.125em 0.5em 0.25em 0.125em;
text-align:right;
font-weight:bold;
}
.tx-veguestbook-pi1 .tx-guestbook-latest p.tx-guestbook-latest-more a:hover {
background:#669900;
color:#FFF;
text-decoration:none;
}
.tx-veguestbook-pi1 .tx-guestbook-field {
clear:both;
width:100%;
display:block;
}
.tx-veguestbook-pi1 .tx-guestbook-field label {
clear:both;
display:block;
float:left;
width:6em;
}
.tx-veguestbook-pi1 .tx-guestbook-field input.tx-guestbook-form-inputfield-med {
float:left;
width:10em;
margin-top:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-field input.tx-guestbook-form-inputfield-big {
float:left;
width:20em;
margin-top:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-field textarea.tx-guestbook-form-textarea {
width:30em;
display:block;
float:left;
margin-bottom:0.5em;
}
.tx-veguestbook-pi1 .tx-guestbook-field span.tx-guestbook-form-obligationfield {
color:#669900;
}
.tx-veguestbook-pi1 fieldset {
border:none;
}
.tx-veguestbook-pi1 legend {
display:none;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap {
float:left;
display:block;
background:#F7F7F7;
border:1px solid #CCC;
padding:0.25em;
margin-top:0.5em;
}
* html .tx-veguestbook-pi1 .tx-guestbook-freecap {
margin-left:2.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap img {
float:left;
display:block;
pading-left:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap input {
float:left;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap label {
clear:both;
display:block;
float:none;
width:auto;
margin-bottom:0.5em;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap p {
font-size:100%;
padding:0.25em;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap h3 {
display:none;
}
.tx-veguestbook-pi1 .tx-guestbook-freecap span.tx-srfreecap-pi2-cant-read {
color:#669900;
}
.tx-veguestbook-pi1 .tx-guestbook-clear {
clear:both;
display:block;
}
.tx-veguestbook-pi1 input.tx-guestbook-submit {
width:10em;
font-size:100%;
display:block;
margin-bottom:1em;
margin-left:6em;
}
@achsoistdas
Unter Opera passt die Positionierung des Menues überhaupt nicht.
Armin
Danke, habe es mal genau so getestet, aber selbst da wird es voellig falsch positioniert, und auch da veraendert sich die Position wenn ich die größe des Browserfensters veraendere.
Echt zum heulen