Hallo Typo3 Gemeinde 🙂 ,
ich habe eine anspruchsvolle Website in Typo3 umzusetzen, die hoffe ich doch schon jemand so in der Art mal realisiert hat.
Habe folgende Menüstruktur:
Seite1 Seite2 Seite3 Seite4 Seite5
Jetzt direkt darunter soll je nach dem welche Seite gewählt würde die Untermenü erscheinen, als Beispiel die Seite3:
Seite3a Seite3b Seite3c Seite3d Seite3e
Und wenn man jetzt über diese Untermenüpunkte mit der Maus fährt soll ein dropdownmenü erscheinen mit weiteren Unterpunkten.
Habe es in meinem template als probe so realisiert:
<div id="subnavigation">
<ul id="menu2">
<li><a href="#">Seite3a</a></li>
<li><a href="#">Seite3b</a></li>
<li><a classaktuell="" href="#">Seite3c</a></li>
<ul><span>
<li><a href="#">Seite3c_1</a></li>
<li><a href="#">Seite3c_2</a></li>
<li><a href="#">Seite3c_3</a></li>
<li><a href="#">Seite3c_4</a></li>
<li><a href="#">Seite3c_5</a></li>
</span></ul>
<li><a href="#">Seite3d</a></li>
<li><a href="#">Seite3e</a></li>
</ul>
</div>
Und der dazugehörige CSS-Code:
/* Unternavigation */
#subnavigation {
height:3%;
weight:100%;
font-size:x-small;
background-color:#BFBFFF;
margin:1px;
padding:5px 5px 10px 5px;
}
/* Die Subnavigation */
div#subnavigation div{
clear:left;
}
ul#menu2 {
margin: 0; padding: 0;
text-align: left;
background-color:#9999FF;
}
ul#menu2 li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0; padding: 0 5px;
}
* html ul#menu2 li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#menu2 li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Untermenu2 ausblenden */
}
* html ul#menu2 li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#menu2 li:hover ul {
display: block; /* Untermenu2 in modernen Browsern einblenden */
}
ul#menu2 li ul li {
float: none;
display: block;
margin-left:-0.8em;
margin-bottom:0.3em;
margin-top:-0.3em;
border-top:1px solid #fff;
width:180px;
}
ul#menu2 li ul li a:hover{
background:#BFBFFF;
width:180px;
}
ul#menu2 a, ul#menu2 span {
display: block;
width: 100%; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.1em 0em;
text-decoration: none;
color:#000000;
}
* html ul#menu2 a, * html ul#menu2 span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#menu2 li a:hover {
text-decoration:underline;
color:#000000;
}
ul#menu2 span a:hover {
/*background-color:#BFBFFF;*/
text-decoration:none;
color:#000000;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color:#000000;
text-de?coration:underline;
}
ul#menu2 li ul span a{ /* aktuelle Unterseite kennzeichnen */
background-color:#9999FF;
width:180px;
padding-left:10px;
}
Hab diesen code teilweise von selfhtml übernommen! #giggle#
Wie ist wohl so ein Menüstruktur mit TS zu realisieren? Ich habe es soweit, das die Untermenü von Seite3 korrekt angezeigt werden, nur weiß ich nicht wie ich das dropdownmenü einbinden soll #paralyzed#
Mein bisheriges TS:
lib.subnavi = HMENU
lib.subnavi {
special = directory
special.value = 9
wrap = <ul id="menu2">|</ul>
1 = TMENU
1.NO.stdWrap.htmlSpecialChars = 1
1.NO.allWrap = <li>|</li>
1.NO.linkWrap =| |*| | ||*| | |
1.CUR = 1
1.CUR.allWrap = <li class="aktuell">|</li>
1.CUR.linkWrap =| |*| | ||*| | |
1.Act = 1
1.ACT < .1.NO
2 = TMENU
2.NO.stdWrap.htmlSpecialChars = 1
2.NO.allWrap = <li>|</li>
2.NO.linkWrap =| |*| | ||*| | |
2.CUR = 1
2.CUR.allWrap = <li class="aktuell">|</li>
2.CUR.linkWrap =| |*| | ||*| | |
2.Act = 1
2.ACT < .1.NO
}