Ich möchte das Hauptmenü in dem Stil auf der Seite http://www.proaesthetic.de gerne in mein TYPO3 System integrieren.
Ist das möglich mit TYPO3? Gibt es dazu Tutorials oder ähnliches?
Danke schonmal!
Bitte um Hilfe bei Umsetzung von speziellem Menü
Grundsätzlich ist das mit TYPO3 möglich. Die zweite Menüebene braucht im TS nur das expAll=1. Und es ist halt ein komplexeres CSS notwendig für die optische Umsetzung.
Schwieriger wird es dann, wenn, wie im Beispiel, mal zwei und dann wieder mal nur ein Untermenüpunkt untereinander erscheinen sollen. CSS3 Spalten sind meines Wissens zumindest im IE 8/9 noch nicht umgesetzt und scheiden daher aus. Mir fällt da nur eine Lösung über Bedingungen auf Seiten-ID ein, die dann aber recht statisch ist. Vielleicht hat ja jemand eine bessere Idee?
Sabine
Danke schonmal für die Antwort, ich bin meinem Ziel schon ein bisschen näher gekommen indem ich das MEGA Dropdown Menü integriert habe, hier mal mein TS dazu:
# Hauptmenue
1 = TMENU
1 {
wrap = <ul class="level1"> | </ul>
expAll = 1
NO {
ATagTitle.field = subtitle//title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~ |
wrapItemAndSub = | </li>
allWrap = <li class="inner" id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div class="megadd clearfix"> <ul class="level2"> | </ul></div>
2.NO.allWrap = <li class="inner2" id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul class="level3" > | </ul>
3.NO.allWrap = <li class="inner3" id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul class="level4" > | </ul>
4.NO.allWrap = <li class="inner4" id="pid{field:uid}"> |
}
Das ganze kann sich hier anschauen (ist noch nicht fertig gestylt): http://kunden.m3-communication.de/dr-jung/index.php?id=26
Ist es irgendwie möglich die graue Fläche mit den Untermenüpunkten für die verschiedenen Hauptmenüpunkte in verschiedenen Größen anzuzeigen? Die Fläche wir bei mir durch die Klasse "megadd clearfix" erzeugt und lässt sich natürlich nur für alle Hauptmenüpunkte gleich stylen.
Was mir auf auch sehr gut gefällt sind die grauen Pfeile unter den Hauptmenüpunkten die anzeigen, dass sich noch Untermenüpunkte darunter verbergen. Ich hab keine Ahnung wie die das gemacht haben, hat da jemand ne Idee?
Ausserdem sieht man im Beispiel noch diesen kleinen weißen Pfeil über der Fläche mit den Untermenüpunkten der auf den jeweiligen Hauptmenüpunkt zeigt. Hat jemand ne Idee wie man so etwas realisieren kann? Ich finde das optisch sehr ansprechend.
danke schonmal!!
Um dieselben optischen Effekte zu bekommen wie in dem Beispiel, musst Du die HTML-Struktur entsprechend aufbauen. Wie die Pfeile hinzubekommen sind, kannst Du ja direkt in dem Stylesheet Deiner Beispielseite nachschauen:
#nav_main li:hover .pointer {
background: url("../images/header.png" ) no-repeat scroll 50% 5px transparent;
display: block;
margin-left: -50%;
}
#nav_main li .pointer {
background: url("../images/header.png" ) no-repeat scroll 50% -16px transparent;
display: block;
height: 11px;
left: 50%;
position: relative;
top: 0;
width: 100%;
z-index: 10000;
}
Für die werden hier Sprites verwendet. Geht aber natürlich auch mit einzelnen Grafiken für die Pfeile.
OK vielen Dank schonmal für die Tipps.
Mein Hauptproblem im Moment ist, dass ich die grau hinterlegte Fläche mit den Menüunterpunkten nicht einzeln für jeden Hauptmenüpunkt verschieben kann.
Wenn man im Moment auf http://kunden.m3-communication.de/dr-jung/index.php?id=26 über die Hauptmenüpunkte fährt sieht man es, man kann die grau hinterlegte Fläche bei den Hauptmenüpunkten rechts gar nicht mehr erreichen.
Das Problem dabei ist wie schon beschreiben, dass die grau hinterlegte Fläche bei jedem Menüpunkt die gleiche Klasse hat.
Kann mir hier bitte jemand weiterhelfen ich bin echt schon am verzweifeln das kann doch eigentlich gar nicht so schwer sein aber ich komm einfach nicht drauf.
Hier nochmal mein TS und mein CSS:
# Hauptmenue
1 = TMENU
1 {
wrap = <ul class="level1"> | </ul>
expAll = 1
NO {
ATagTitle.field = subtitle//title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~ |
wrapItemAndSub = | </li>
allWrap = <li class="inner" id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div class="megadd clearfix"> <ul class="level2"> | </ul></div>
2.NO.allWrap = <li class="inner2" id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul class="level3" > | </ul>
3.NO.allWrap = <li class="inner3" id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul class="level4" > | </ul>
4.NO.allWrap = <li class="inner4" id="pid{field:uid}"> |
}
}
#nav {width: 1000px; background-color: silver; height: 40px; font-family: 'Marcellus', serif; font-size: 18px; }
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 ul.level1 {
width: 990px;
height: 25px;
padding-left:10px;
padding-top: 7px;
}
.menu2 ul.level1 li {
display: inline;
height: 40px;
padding: 8px;
font-weight: bold;
}
.menu2 ul.level1 li a {
padding: 10px ;
text-decoration: none;
color: #fff;
font-family: 'Marcellus', regular;
font-size:17px;
font-weight:regular;
text-shadow: 1px 1px 0px #000;
}
.menu2 ul.level2 li a {
padding: 10px ;
text-decoration: none;
color: #fff;
}
.menu2 ul.level1 li li a {
padding: 3px;
display: block;
color: black;
}
.menu2 ul.level1 a:hover,
.menu2 ul.level1 a:active,
.menu2 ul.level1 a:focus
{
-moz-transition-delay: 140ms;
-webkit-transition-delay: 140ms;
color:silver;
}
.menu2 ul.level1 li li {
display: block;
height: auto;
padding: 1px;
}
.menu2 ul.level1 li:hover {
color:silver;
}
.menu2 div.megadd {
position: absolute;
left: -999em;
width: 490px;
background: #faf4ec;
z-index: 100;
clear: both;
vertical-align: bottom;
padding: 10px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 1px 1px 5px #3c3c3c;
-webkit-box-shadow: 1px 1px 5px #3c3c3c;
-moz-box-shadow: 1px 1px 5px #3c3c3c;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#3c3c3c',direction='120',strength='3');
}
.menu2 ul.level1 li:hover div.megadd {
left: 50%;
margin-left: -395px;
}
.menu2 ul.level2 li.inner2, .menu2 ul.level2>li.inner {
width: 200px;
float: left;
}
ul.level3 li a {
padding-left: 10px;
color:#ff0000;
}
.menu2 ul.level4 {
padding-left: 20px;
}
Vielen Dank schonmal für alle Antworten!
versuch es mal mit
li.inner{position:relative;}
und lass bitte den Unfug mit left:-990em;
um den Block zu verstecken.
Dafür gibt es display:none
.menu2 div.megadd {
position: absolute;
left: 0;
top: 1em:
display: none;
}
und als :hover display:block;
Demzufolge ist dieses Statement ebenfalls überflüssig:
.menu2 ul.level1 li:hover div.megadd {
left: 50%;
margin-left: -395px;
}
Übrigens abgesehen davon, dass horizontales zentrieren deutlich eleganter geht.
statt dessen:
.menu2 ul.level1 li:hover div.megadd {
display:block;
}
Tausend Dank Dirk, so hat es jetzt geklappt!
Ja du hast Recht, das left:-990em; war auch eigentlich erstmal nur provisorisch :-).
So, ich bin mittlerweile fast fertig mit meiner ersten TYPO3 Seite, was ich auch zu einem grossen Teil den Tipps, die ich aus diesem Forum bekommen habe zu verdanken habe, ich habe allerdings noch ein kleines Problem mit meinem Hauptmenü bei dem ich euch nochmals um Hilfe bitten würde.
Es geht um die graue Hintergrundfläche, die erscheint wenn man mit der Maus über einen Hauptmenüpunkt der ersten Ebene fährt, ist es irgendwie möglich die Flächen von der Größe her für die verscheidenen Menüpunkte anzupassen?
Hier ist ein Beispiel wie ich das meine: http://www.proaesthetic.de/ .
Die Fläche unter dem Menüpunkt Kontakt ist hier kleiner als die der anderen Menüpunkte.
Ist so etwas mit dem MEGA Dropdown Menü irgendwie möglich?
Ich poste hier nochmal meine Settings, ich bin über jeden Vorschlag sehr dankbar!
# MEGA-Dropdown-Menu rendern
menu = HMENU
menu {
wrap = <div class="menu2">|</div>
# die Pages wollen wir nicht
excludeUidList =
special = directory
# Hier die Start-Page-ID angeben, deren Unterseiten das Hauptmenü abbilden
special.value = 10
# Hauptmenue
1 = TMENU
1 {
wrap = <ul class="level1"> | </ul>
expAll = 1
NO {
ATagTitle.field = subtitle//title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~ |
wrapItemAndSub = | </li>
allWrap = <li class="inner" id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div class="megadd clearfix"> <ul class="level2"> | </ul></div>
2.NO.allWrap = <li class="inner2" id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul class="level3" > | </ul>
3.NO.allWrap = <li class="inner3" id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul class="level4" > | </ul>
4.NO.allWrap = <li class="inner4" id="pid{field:uid}"> |
}
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 ul.level1 {
height: 25px;
padding-top: 7px;
}
.menu2 ul.level1 li {
display: inline;
height: 40px;
padding: 8px;
font-weight: bold;
}
.menu2 ul.level1 li a {
padding: 10px ;
text-decoration: none;
color: #fff;
font-family: 'Marcellus', regular;
font-size:17px;
font-weight:regular;
text-shadow: 1px 1px 0px #000;
}
.menu2 ul.level2 li a {
padding: 10px ;
text-decoration: none;
color: #000;
}
.menu2 ul.level1 li li a {
padding: 3px;
display: block;
color: #830009;
font-family: Arial;
font-size: 14px;
text-shadow: 0 0 0;
}
.menu2 ul.level1 a:hover,
.menu2 ul.level1 a:active,
.menu2 ul.level1 a:focus
{
-moz-transition-delay: 140ms;
-webkit-transition-delay: 140ms;
color:silver;
}
.menu2 ul.level2 a:hover,
.menu2 ul.level2 a:active,
.menu2 ul.level2 a:focus
{
-moz-transition-delay: 140ms;
-webkit-transition-delay: 140ms;
color:#830009;
text-decoration:underline;
}
.menu2 ul.level1 li li {
display: block;
height: auto;
padding: 1px;
}
.menu2 ul.level1 li:hover {
color:silver;
}
.menu2 div.megadd {
position: absolute;
left: -999em;
width: 410px;
background: #faf4ec;
z-index: 100;
clear: both;
vertical-align: bottom;
padding: 10px;
line-height:1.4em;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 1px 1px 5px #3c3c3c;
-webkit-box-shadow: 1px 1px 5px #3c3c3c;
-moz-box-shadow: 1px 1px 5px #3c3c3c;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#3c3c3c',direction='120',strength='3');
}
.menu2 ul.level1 li:hover div.megadd {
left: 50%;
margin-left: -105px;
}
li.inner{position:relative;}
Die Seite kann man hier sehen: http://kunden.m3-communication.de/dr-jung/
Hat niemand eine Idee?
Ich fürchte, ich verstehe deine Fragestellung gar nicht richtig.
Ich leider auch nicht - welche graue Fläche? Kannst Du bitte nochmal beschreiben, welche Fläche genau Du meinst, denn ich sehe gar keine.