Hallo, ich versuche jetzt schon seid 2 Tagen dieses Menü in typo3 umzusetzen, nur leider werde ich mit TS nich so richtig warm.
Ist es möglich das horizontale Menü mit typo3 zu generieren? Es ist nicht nötig das es dynamisch ist.
http://test.groovetool.de/
Bin für jeden Tipp dankbar wie man das umsetzen könnte.
Im moment blende ich Grafiken mit hilfe von css ein und aus.
"Ruhezustand"
<div id="claim">
<div id="sub-down" style="background:url(uploads/tf/sub-yellow.gif); height:6px;"></div>
<div id="sub1"><a href="#"><img src="uploads/tf/blank.gif" width="162" height="22" border="0" alt="" /></a></div>
<div id="sub2"><a href="#"><img src="uploads/tf/blank.gif" width="183" height="22" border="0" alt="" /></a></div>
<div id="sub3"><a href="#"><img src="uploads/tf/blank.gif" width="190" height="22" border="0" alt="" /></a></div>
<div id="sub4"><a href="#"><img src="uploads/tf/blank.gif" width="154" height="22" border="0" alt="" /></a></div>
</div>
"1Reiter angeclickt"
<div id="claim">
<div id="sub-down" style="background:url(uploads/tf/sub-1-down.gif); height:37px;"></div>
<div id="sub2"><a href="#"><img src="uploads/tf/blank.gif" width="183" height="22" border="0" alt="" /></a></div>
<div id="sub3"><a href="#"><img src="uploads/tf/blank.gif" width="190" height="22" border="0" alt="" /></a></div>
<div id="sub4"><a href="#"><img src="uploads/tf/blank.gif" width="154" height="22" border="0" alt="" /></a></div>
</div>
usw.
danke für jede hilfe
Hallo,
natürlich möglich!
Wie schaut denn dein bisheriges TS aus?
georg
Also, ich habe bisher nur Typoscript für das menü links fertig.
Hier das Template der Startseite:
page.config.doctype = xhtml_trans
tt_content.stdWrap.dataWrap = |
page = PAGE
page.includeCSS {
file1 = uploads/tf/txt-hanfland_02.css
file1.media = screen,projection
file2 = uploads/tf/nav-hanfland_02.css
file2.media = screen,projection
file3 = uploads/tf/aufbau-hanfland_02.css
file3.media = screen,projection
}
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = uploads/tf/template_02.html
workOnSubpart = DOCUMENT_BODY
}
page.10.subparts.HAUPT_NAVI <tmp.HAUPTNAVIGATION
page.10.subparts.INHALT_MITTE < styles.content.get
page.10.subparts.TOP_NAVI <tmp.TOPNAVIGATION
In einem Systemordner habe ich dann noch das TS welches ich in das Haupttemplate einbinde:
tmp.HAUPTNAVIGATION = HMENU
tmp.HAUPTNAVIGATION {
wrap = <div id="navcontainer" align="left"> | </div>
1 = TMENU
1 {
wrap = <ul id="navlist"> | </ul>
NO = 1
NO.wrapItemAndSub = <li> | </li>
ACT = 1
ACT < .NO
ACT.ATagParams = id=current
}
}
tmp.TOPNAVIGATION = HTML
tmp.TOPNAVIGATION.value =(
<div id="sub-down" style="background:url(uploads/tf/sub-yellow.gif); height:6px;"></div><div id="sub2"><a href="index.php?id=21"><img src="uploads/tf/blank.gif" width="183" height="22" border="0" /></a></div><div id="sub3"><a href="#"><img src="uploads/tf/blank.gif" width="190" height="22" border="0" /></a></div><div id="sub4"><a href="#"><img src="uploads/tf/blank.gif" width="154" height="22" border="0" /></a></div>
)
Der untere teil nach tmp.TOPNAVIGATION is aber wahrscheinlich eher Schwachsinn, da ich da ja nur mein html code reinparse.
Also ich würde mich sogar über Stichworte freuen. Sowas wie "es ist nur mit java script zu realisieren" oder "mit TS möglich mit den befehlen X und Y".
Also das is meine erste typo3 Seite und ich weiss wirlich nich weiter.
Ich habe auch schon versucht Seiten auf gleicher ebene wie die Startseite zu erstellen und das Template von Startseite zu kopieren... naja da Fehlt mir dann ja das Menü auf der linken Seite...
wie dem auch sei, ich bedanke mich für jeden Tip im vorraus
Hallo,
wenn du die grafiken nicht dynamisch erzeugen willst, dann ist der bisherige Weg schon der richtige.
Wenn schon, dann lautet das Stichwort GMENU
georg
hmm, der jetzige funktioniert nur als html ...
wie aktiviert man denn das TS config Feld unter "Seiteneigenschaften"? Ich denke doch das man da TS pro Seite einfügen kann, oder?
TS kannst du immer nur unter Template einfügen, aber was hast du vor?
georg
Also, mein link oben "test.groovetool.de" ist noch nicht mit typo3 realisiert, sondern reines html (css). Ich habe dort 5 verschiedene html Seiten.
Dementsprechend gibt es auch noch 3 weitere Seiten für die anderen aktiven Reiter.
Wenn ich nun ein Template auf der Rootpage habe in dem ich 5 Grafiken anzeige (das würde ich noch hinbekommen) kann ich doch schlecht auf einer Seite die unterhalb der Rootpage liegt andere Grafiken anzeigen lassen, oder sogar welche weglassen.
genau hierdrin liegt mein Problem. Vieleicht stehe ich auch einfach nur auf Kriegsfuss mit TS. Also C++ oder PHP finde ich einfach logisch. TS .... naja
danke Georg das Du wenigstens versuchst mich zu verstehen.
Ich weiß nicht ob es hilft, aber ich habe sowas ähnliches so gelöst.
temp.MAINMENU = HMENU
temp.MAINMENU {
special = directory
special.value = 55
1 = TMENU
1 {
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
}
CUR < .NO
CUR.wrapItemAndSub = <li id=current>|</li>
#CUR.doNotLinkIt = 1
ACT <.CUR
}
}
}
Ausschnitt aus dem HTML-Template
<!-- #nav: Start Hauptnavigation -->
<div id="nav">
<div id="nav_main">###MAINNAV###</div>
</div>
<!-- #nav: Ende Hauptnavigation -->
und hier das CSS
#nav_main {
width:100%;
font-size: 1.2em;
float:left;
color: #fff;
background-color:#98CEFA;
background:#98CEFA url("../../images/bg.png") repeat-x bottom;
}
#nav_main ul {
white-space: nowrap;
line-height: 1em;
margin:0;
padding:0 0 0 50px;
list-style:none;
}
#nav_main li {
float:left;
background: #98CEFA url("../../images/left.png") no-repeat top left;
/* margin-right: 2px; nur einfügen bei ECKIGEN Ecken */
padding: 0 0 0 3px;
margin: 0;
border-bottom:1px solid #000;
}
#nav_main a {
float:left;
display:block;
color:#334;
background: transparent;
background: url("../../images/right.png") no-repeat top right;
padding:5px 11px 3px 8px;
text-transform: none;
text-decoration:none;
font-weight:bold;
width: auto; /* nur IE 5.x */
width/**/:/**/ .1em; /* für IE 6.0 */
}
#nav_main > ul a {width:auto;} /* für alle anderen Browser */
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#nav_main a {float:none;}
/* End IE5-Mac hack */
#nav_main a:hover {
color:#fff;
background-color: transparent;
background: url("../../images/right.png") no-repeat top right;
}
#nav_main #current {
background-image: url("../../images/left.png");
border-width:0
}
#nav_main #current a {
color:#334;
background-image: url("../../images/right.png");
font-weight:bold;
padding-bottom:4px;
padding-top:5px;
}
}
Vielleicht bringts dir ja was.
Gruß
Daniel
Danke Daniel,
ich habe es jetzt allerdings mit GMENU gelöst wie von Georg vorgeschlagen. Dazu musste ich die Grafiken noch umbauen, aber es funktioniert endlich 🙂