Hallo zusammen
Eigentlich habe ich schon ein paar Menus in Typo3 erstellt (wenngleich ich immer noch ziemlicher Noob bin...), aber die HTML-/CSS-Vorlage, die ich nun gekriegt habe und die ich in Typo3 umsetzen sollte, bringt mich zur Verzweiflung.
Gewünscht wäre ein ganz simples Text-Menu wie folgt:
-1. Hauptpunkt
---1. Unterpunkt
---2. Unterpunkt
---n. Unterpunkt
-2.Hauptpunkt
-3.Hauptpunkt
-n. Hauptpunkt
Hier das HTML:
[HTML]<div id="nav">
<ul>
<li><a href="#" title="Über uns" class="nav_on">Über uns</a></li>
<ul>
<li><a href="#" title="Vision" class="subnav">Vision</a></li>
<li><a href="#" title="Strategie" class="subnav_on">Strategie</a></li>
<li><a href="#" title="Personen" class="subnav">Personen</a></li>
<li><a href="#" title="Kontakt" class="subnav">Kontakt</a></li>
</ul>
<li><a href="#" title="Projekte">Projekte</a></li>
<li><a href="#" title="Partner">Partner</a></li>
<li><a href="#" title="Ihr Beitrag">Ihr Beitrag</a></li>
</ul>
</div>
[/HTML]
Hier das CSS:
[HTML]#nav {
display: inline;
width: 180px;
margin-left: 20px;
float: left;
}
/* -----HAUPTNAVIGATION ----*/
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin-bottom: 5px;
}
#nav a, a:link, a:active, a:visited {
display: block;
color: #FFF;
font-size: 14px;
text-transform: normal;
text-decoration: none;
font-weight: bold;
outline: 0;
border-bottom: 1px solid #FFF;
}
#nav a:hover {color: #ffd767; border-bottom: 1px solid #ffd767;}
#nav a.nav_on, a:link.nav_on, a:active.nav_on, a:visited.nav_on {
display: block;
color: #ffd767;
font-size: 14px;
text-transform: normal;
text-decoration: none;
font-weight: bold;
outline: 0;
border-bottom: 1px solid #ffd767;
}
/* ------ SUBNAVIGATION ------- */
#nav li li {
list-style: none;
margin-bottom: 5px;
}
#nav a.subnav, a:link.subnav, a:active.subnav, a:visited.subnav {
display: block;
color: #FFF;
font-size: 13px;
text-transform: normal;
text-decoration: none;
font-weight: bold;
outline: 0;
border: none;
padding-left: 15px;
}
#nav a:hover.subnav {color: #ffd767; border: none;}
#nav a.subnav_on, a:link.subnav_on, a:active.subnav_on, a:visited.subnav_on {
display: block;
color: #ffd767;
font-size: 13px;
text-transform: normal;
text-decoration: none;
font-weight: bold;
outline: 0;
border: none;
padding-left: 15px;
}[/HTML]
Und hier mein TS:
[TS]################################
##Configure automaketemplate ##
################################
plugin.tx_automaketemplate_pi1 {
#Read the Template-File
content = FILE
content.file = fileadmin/templates/meineSeite/index.html
#Wrap subparts
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
DIV.id.nav = 1
DIV.id.content = 1
}
relPathPrefix = fileadmin/templates/meineSeite/
}
temp.nav = HMENU
temp.nav {
1 = TMENU
1{
noBlur = 1
wrap =<ul>|</ul>
NO = 1
NO.linkWrap =<li>|</li>
ACT = 1
ACT.linkWrap =<li>|</li>
ACT.ATagParams = class="nav_on"
ACTIFSUB = 1
ACTIFSUB.linkWrap =<li>|</li>
ACTIFSUB.ATagParams = class="nav_on"
}
2 = TMENU
2{
NO =1
wrap =<ul>|</ul>
NO.linkWrap =<li>|</li>
CUR = 1
CUR.linkWrap =<li>|</li>
CUR.ATagParams = class="subnav_on"
}
}
################################
## Quicklinks ##
################################
temp.quicklinks = HMENU
temp.quicklinks.special = directory
temp.quicklinks.special.value = 8
temp.quicklinks.1 = TMENU
temp.quicklinks.1 {
NO.allWrap = <div id="quicklinks"> | </div>
ACT = 1
RO = 1
ACT.allWrap = <div id="quicklinks_active"> | </div>
}
################################
##Make a Template for BODY ##
################################
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_BODY
subparts.content < styles.content.get
subparts.nav < temp.nav
subparts.quicklinks < temp.quickLink
subparts.logo < temp.Logo
subparts.contact < temp.Kontakt
}
################################
##Make a Template for HEAD ##
################################
temp.headTemplate = TEMPLATE
temp.headTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_HEADER
}
###############################
## Default PAGE object: ##
###############################
page = PAGE
page.typeNum = 0
page.headerData.10 < temp.headTemplate
page.10 < temp.mainTemplate
page.config.metaCharset = utf-8
page.config.additionalHeaders = Content-Type:text/html;charset=utf-8
[/TS]
Irgendwo ist da was falsch, denn die Unterpunkte werden auf gleicher Ebene wie die Hauptpunkte angezeigt, wenn ich dann auf einen der Unterpunkte klicke, wird er plötzlich wie im CSS definiert auch als Unterpunkt angezeigt.
Weiss jemand, wo der Fehler liegt und wie ich es hinkriege, dass die Unterpunkte auch tatsächlich als solche dargestellt werden?
Vielen Dank und beste Grüsse
codierwurm
