Hallo Leute,
habe folgendes Problem:
habe mir ein einfaches Listen-Menu geschrieben.
Allerdings bekomme ich es nicht hin dieses in Typo zu integrieren...
ich habe folgendes menu in html:
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<ul>
<li><a href="#">Link2.2</a></li>
</ul>
<li><a href="#">Link3</a></li>
<ul>
<li><a href="#">Link3.2</a></li>
</ul>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
und hier der css code:
* {
margin: 0;
padding: 0;
border: none; }
body {
background-color: silver;
}
#nav {
/*width: 160px;*/
list-style: none;
background-color: #cbcfd2;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5; }
#nav a, a:visited{
color:#000000;
font-size: 11px;
font-family: verdana, arial, sans-serif;
text-decoration: none;
display: block;
border-bottom: 1px solid #e5e5e5;
padding: 3px 0 3px 15px; }
#nav a:hover {
background-color: #e5e5e5;
color:#4E4E4E; }
#nav li ul a{
padding-left:30px;}
#nav li ul li a{
}
kann mir da jemand helfen..wäre echt super...
das menu würde ich gerne mit einem unterlevel versehen so das inhalte bei klick aufgeklppt werden.
lg
jenny
Hallo Jenny,
Listenmenüs solltest du genug finden, hier mal wieder eins von mir
marks.MENU = HMENU
marks.MENU {
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
georg
ps: habs jetzt nicht an deine vorgaben angepasst 😉
würde das auch so gehen?
was mache ich falsch?
temp.menu_1 = HMENU
temp.menu_1.1 = TMENU
temp.menu_1.1 {
NO.allWrap = <li class="menu1-level1-no"> | </li>
ACT = 1
ACT.allWrap = <li class="menu1-level1-act"> | </li>
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
NO.allWrap = <li class="menu1-level2-no"> | </li>
ACT = 1
ACT.allWrap = <li class="menu1-level2-act"> | </li>
}
du solltest wrapItemAndSub verwenden denn nur so bekommst du eine valide liste, die du dann auch für korrekte verwendung vom CSS notwendig ist
georg
Erstmal danke für die Hilfestellung.
könntest du mir etwas unter die Arme greifen und dir kurz Zeit nehmen das Problem an meinem Bspl. zu lösen..das wäre echt super.
Irgendwie scheine ich die Logik nicht zu verstehen die dahinter steht den dyn. menu/content einzubinden.
meine tsConfig meines root templates sieht folgendermaßen aus:
plugin.tx_automaketemplate_pi1 {
content = FILE
content.file = fileadmin/template/main/eqt.htm
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
TD.all = 1
}
relPathPrefix = fileadmin/template/main/
}
page.10.marks.MENU = HMENU
page.10.marks.MENU {
special = directory
special.value = 5
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
}
CUR < .NO
CUR.doNotLinkIt = 1
}
2 < .1
3 < .1
}
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_BODY
subparts.menu_1 < temp.menu_1
subparts.content < styles.content.get
}
# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_HEADER
}
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
page.headerData.10 < temp.headTemplate
Lg
jenny
page.10.marks.MENU
page.10.marks.MENU {
special = directory
special.value = 5
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
lg georg
da hat sich irgendwie noch nichts geändert...
lg
jenny
von was sprichst du denn? am mittwoch wird nicht geraten 😃
lol 😃
ich meine ich sehe keine veränderung ...
😢
also ich muss doch ts so konfigurieren das der Inhalt der li elemente mit dynamischen inhalt gefüllt werden.
was ich schonmal nicht verstehe ist das in einem Buchbeispiel(typo3-kai laborenz)
eigentlich unnötig viele markups im htmlcode eingefügt wurden:
Zitat:
<td id="menu_1">
<div class="menu1-level1-no"><a href="#">Menu item 1</a></div>
<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
<div class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></div>
<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
<div class="menu1-level2-act"><a href="#">Level 2 item (act)</a></div>
<div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
</td>
hätten da nicht einfach zwei von diesen Zeilen gereicht..??
Mit meinen li Elementen wäre es doch jetzt das selbe Spiel:
ich habe die li und ul elemente per css gestylet, und jetzt muss ich doch nur noch den Inhalt der li's füllen(dazu wrap ich wie indem Bspl.)
Jetzt wäre doch noch zu klären wenn einer der menupunkte aktiv ist also 'act'
und das sich auf einen klick von einem menu ein submenu öffnet.
also bei der div Variante kann ich das ja noch einigermaßen nachvollziehen, aber bei dem listenmenu nicht mehr.
Vorallem wer bestimmt den wo ein li und wo ein ul element erzeugt wird, typo doch wohl, aber warum definiere ich sie dann in der html-file ..?
Oder dienen die wirklich nur der reinen formatierung?
Alles in allem ein großes Fragezeichen....
Hilfe!!!
Lg
Jenny
hallo...
kann mir keiner etwas helfen... 😢
lg
jenny
page.10.marks.MENU
page.10.marks.MENU {
special = directory
special.value = 5
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
wie binde ich denn hier den act zustand mit ein ??
Lg
Jenny
Lad dir die deutsche Einsteiger-Doku runter:
http://www.typo3.net/literatur_zu_typo3/
da wirds einfach und klar erklärt...
hi
kopier dir mal meine navi rein. ich hab drei horizontale und eine verschachtelte vertikale.
horizontal 1:
temp.mainnavi = HMENU
temp.mainnavi.special = directory
temp.mainnavi.special.value = 16
temp.mainnavi.entryLevel = 1
temp.mainnavi.1 = TMENU
temp.mainnavi.1 {
wrap = <ul id="mainnavi">|</ul>
# Normalzustand
NO {
wrapItemAndSub = <li>|</li>
stdWrap.case = lower
}
ACT < .NO
ACT{
wrapItemAndSub = <li id="mainnavi_aktiv">|</li>
}
ACT = 1
horizontal zwei bzw. die subnavi von der ersten:
temp.mainnavi_sub = HMENU
temp.mainnavi_sub.entryLevel = 2
temp.mainnavi_sub.1 = TMENU
temp.mainnavi_sub.1.wrap = <ul id="mainnavi_sub">|</ul>
# Normalzustand
temp.mainnavi_sub.1.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.mainnavi_sub.1.ACT = 1
temp.mainnavi_sub.1.ACT.wrapItemAndSub = <li id="mainnavi_sub_aktiv">|</li>
jetzt die dritte navi links bei mir:
temp.subnavi_h0 = HMENU
temp.subnavi_h0.special = list
temp.subnavi_h0.special.value = 14
temp.subnavi_h0.maxItems = 1
temp.subnavi_h0.1 = TMENU
temp.subnavi_h0.1 {
# Normalzustand
NO {
ATagParams = class="subnavigation"
linkWrap = <div id="subnavi_dot1"><img src="fileadmin/template/bilder/dot.jpg" alt="" border="0" /></div><div id="subnavi_h0">|</div>
}
ACT < .NO
ACT{
ATagParams = class="subnavigation_aktiv"
linkWrap = <div id="subnavi_dot1"><img src="fileadmin/template/bilder/dot_aktiv.jpg" alt="" border="0" /></div><div id="subnavi_h0">|</div>
}
ACT = 1
und jetzt die verschachtelte vertikale navi:
temp.subnavi_sub = HMENU
temp.subnavi_sub.entryLevel = 2
temp.subnavi_sub.1 = TMENU
temp.subnavi_sub.1.wrap = <ul id="subnavi_sub">|</ul>
# Normalzustand
temp.subnavi_sub.1.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.subnavi_sub.1.ACT = 1
temp.subnavi_sub.1.ACT.wrapItemAndSub = <li id="subnavi_sub_aktiv">|</li>
temp.subnavi_sub.2 = TMENU
temp.subnavi_sub.2.wrap = <ul id="subnavi_sub_sub">|</ul>
# Normalzustand
temp.subnavi_sub.2.NO.wrapItemAndSub = <li>|</li>
#Aktivzustand
temp.subnavi_sub.2.ACT = 1
temp.subnavi_sub.2.ACT.wrapItemAndSub = <li id="subnavi_sub_sub_aktiv">|</li>
ich hoffe du kommst damit klar
gruß
achso mein css sieht so aus:
/*-----------------------------Mainnavi-----------------------------------------------*/
#mainnavi_pos {
position: absolute;
z-index: 65;
height: 21px;
width: 759px;
left: 215px;
top: 138px;
background-color:#fdf1b2;
}
ul#mainnavi {
margin: 0px; padding: 0px;
text-align: left;
border: 0px;
}
ul#mainnavi li {
list-style: none;
display: inline;
margin: 0px; padding: 0px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
height:21px;
}
ul#mainnavi li a{
color:#c91315;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}
ul#mainnavi li a:hover{
color:#000000;
}
ul#mainnavi li#mainnavi_aktiv {
background-color:#fad200;
list-style: none;
margin: 0px; padding: 0px;
padding-left:11px;
padding-bottom:2px;
padding-right:11px;
}
* html ul#mainnavi li#mainnavi_aktiv {
background-color:#fad200;
list-style: none;
display: inline;
margin: 0px; padding: 0px;
height:21px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
}
ul#mainnavi li#mainnavi_aktiv a{
color:#000000;
}
/*-----------------------------------Mainnavi_SUB--------------------------*/
#mainnavi_sub_pos {
position: absolute;
z-index: 60;
height: 21px;
width: 788px;
left: 215px;
top: 159px;
background-color: #fad200;
}
ul#mainnavi_sub {
margin: 0px; padding: 0px;
text-align: left;
border: 0px;
}
ul#mainnavi_sub li {
list-style: none;
display: inline;
margin: 0px; padding: 0px;
padding-left:11px;
padding-right:11px;
padding-top:5px;
height:21px;
}
ul#mainnavi_sub li a{
color:#c91315;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
}
ul#mainnavi_sub li a:hover{
color:#000000;
}
ul#mainnavi_sub li#mainnavi_sub_aktiv {
background-color:#fad200;
list-style: none;
display: inline;
margin: 0px; padding: 0px;
height:21px;
padding-left:11px;
padding-top:5px;
padding-right:11px;
}
ul#mainnavi_sub li#mainnavi_sub_aktiv a{
color:#000000;
}
/*------------------------------Subnavi-----------------------------------------------*/
#subnavi_dot1{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 15px;
top: 167px;
}
#subnavi_dot2{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 52px;
top: 167px;
}
#subnavi_dot3{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 88px;
top: 167px;
}
#subnavi_dot4{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 125px;
top: 167px;
}
#subnavi_dot5{
background-color: #fbd615;
position: absolute;
z-index: 80;
height: 29px;
width: 29px;
left: 162px;
top: 167px;
}
#subnavi_h0 {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 16px;
top: 167px;
}
#subnavi_2m {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 50px;
top: 167px;
}
#subnavi_n {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 92px;
top: 167px;
}
#subnavi_tt {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 126px;
top: 167px;
}
#subnavi_z {
position: absolute;
z-index: 85;
padding-top:7px;
padding-left:7px;
height: 29px;
width: 29px;
left: 167px;
top: 167px;
}
a.subnavigation, a.subnavigation:hover, a.subnavigation:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color: #ffffff;
font-weight:bold;
text-decoration:none;
}
a.subnavigation_aktiv, a.subnavigation_aktiv:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color: #000000;
font-weight:bold;
text-decoration:none;
}
/*------------------------------------------Subnavi_SUB---------------------------------*/
#subnavi_sub_pos{
position: absolute;
z-index: 95;
left: 0px;
top: 237px;
}
ul#subnavi_sub {
font-size: 10px;
float: left; width: 209px;
margin: 0px;
padding: 0px;
border: 0px;
/*backcolor-color: #c91315;*/
}
ul#subnavi_sub li {
list-style: none;
margin: 0px; padding: 0px;
margin-bottom: 2px;
}
ul#subnavi_sub li a {
display: block;
padding-left: 22px;
padding-top:2px;
font-weight: bold;
background-color: #f9ce00;
text-decoration:none;
color: #c91315;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li a:hover {
color: #c91315; background-color: #fdf1b2;
padding-left:22px;
}
ul#subnavi_sub li#subnavi_sub_aktiv a {
display: block;
padding-left: 22px;
padding-top:2px;
font-weight: bold;
background-color: #fdf1b2;
text-decoration:none;
color: #000000;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub {
display: block;
padding:0px;
margin:0px;
padding-top:2px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li a{
display: block;
padding-left: 33px;
padding-top:2px;
font-weight:normal;
background-color: #f9ce00;
text-decoration:none;
color: #c91315;
font-size: 10px;
height: 17px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li#subnavi_sub_sub_aktiv a{
display: block;
padding-left: 33px;
padding-top: 2px;
font-weight:normal;
background-color: #f9ce00;
text-decoration:none;
color: #000000;
font-size: 10px;
height: 17px;
background-image: url(../bilder/subnavi_pfeil.gif);
background-repeat: no-repeat;
background-position: 22px 6px;
}
ul#subnavi_sub li#subnavi_sub_aktiv ul#subnavi_sub_sub li a:hover{
color: #c91315;
background-image: url(../bilder/subnavi_pfeil.gif);
background-repeat: no-repeat;
background-position: 22px 6px;
}
#subnavi_verlauf{
position: absolute;
z-index: 90;
left: 0px;
top: 237px;
}
Danke,
habe mir die Dokumentation durchgelesen, aber auf den ACT wird nicht wirklich eingegangen.
Ich habe aber ein neues Problem:
Und zwar werden meine Unterpunkte nicht ausgegeben.
Bevor ich die Seiten weiter verschachtelt habe, wurden die Untermenupunkte noch angezeigt.(entylevel=1)
Hier mal mein Seitenbaum:das template ist im 'root'
Bild: film-akademie.com/test.gif
Nun habe ich folgendes TS:
page = PAGE
page.typeNum = 0
page.includeCSS{
file1 = menu*.css
file2 = css_mod*.css
}
[browser = msie]
page.includeCSS{
file3 = ie*.css
[GLOBAL]
page.bodyTag = <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" id="bg">
page.10 = TEMPLATE
page.10{
template = FILE
template.file=eqt*.html
workOnSubpart = DOCUMENT_BODY
subparts.CONTENT < styles.content.get
subparts.CONTENT.wrap = <div style="padding:5px"> | </div>
subparts.MODULE < styles.content.getRight
subparts.MODULE.wrap = <div style="padding:5px"> | </div>
subparts.MAIN_MENU = HMENU
subparts.MAIN_MENU{
special = directory
special.value = 14
entryLevel = 0
1 = TMENU
1 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
ACT.allWrap = <li class="active">|</li>
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
marks.PATHWAY = TEXT
marks.PATHWAY.field = subtitle//title
subparts.FOOTER_MENU = HMENU
subparts.FOOTER_MENU.wrap = <div class="footer">|</div>
subparts.FOOTER_MENU.1 = TMENU
subparts.FOOTER_MENU.1.NO.linkWrap = | | |*| | | |*| |
subparts.FOOTER_MENU.1.NO.ATagParams = class="links"
}
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes{
P.style = class = txt}
Es wäre echt supernett wenn mir jemand helfen könnte...
Lg
Jenny
vielleicht was mit dem entryLevel falsch??
war jetzt nur so ne Vermutung....
Greetz
versuch es mal über dein autoparser template bzw. dort zu steuern wo du den suppart einbindest über ne id abfrage:
[PIDinRootline = 16]
temp.mainTemplate.subparts.mainnavi_sub < temp.mainnavi_sub
[GLOBAL]
Oh Gott...
ich glaube ich verstehe nicht ganz was du meinst, vielleicht kannst dus mir als newbie etwas einfacher sagen..?
Lg
jenny