Hallo Leute,
Ich bin eigentlich nicht sehr neu in Typo3 und script... ich stelle mich nur seit ein paar tagen so an... Ich habe jetzt mehrere Tage in google und hier im Forum verbracht und habe nach meinem Problem gesucht, aber nichts spezielles zu meinem Thema gefunden. Wenn hier ein gelöster Thread existiert dann tuts mir leid.
Und zwar, ich wollte eine neue Seite machen und ein Aufklappmenü mit Javascript machen, weils einfach toll aussieht. Habe dazu ein Tutorial von Mortox gefunden Quelle: Mortox. Dieses habe ich nachgebaut. und in mein Typoscript eingebunden. Jedoch wird mir in meinem angelegten Div auf meiner Homepage kein Menü angezeigt.
Ich hoffe ihr könnt mir meinen Fehler zeigen und mir erklären wie ich ihn behebe.
Zusätzlich noch ein paar Daten:
Seitenbaum
- Startseite
- Seite 1
- - Seite 1.1
- - Seite 1.2
- Seite 2
- Seite 3
usw.
Ausschnit von meinem Typoscript aus dem Haupttemplate:
64 = TEXT
64.value = <div id="menu-top">
65 < temp.menu
#Schliessen von <menu> position 64
66 = TEXT
66.value = </div>
Menü TS:
### Menü ###
temp.menu = HMENU
temp.menu {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
### Zweite ###
2 < .1
}
lib.container < temp.menu
Javascript in den Headbereich einbinden:
page.headerData.4 = TEXT
page.headerData.4.value (
<script type="text/javascript">
//<![CDATA[
function show(element){
element.className += "hover";
}
function hide(element){
element.className = element.className = "";
}
//]]>
</script>
)
page {
headerData {
5 = TEXT
5.value = <meta name= [..]
und zu guter letzt mein noch unformatiertes CSS
#menu-top {
position: absolute;
background-color: #333333;
width: 980px;
height: 40px;
margin: 0 auto;
ul.menu, ul.menu ul {
list-style-type: none;
margin-top: 0;
}
ul.menu a {
display: block;
padding: 3px 10px 3px 10px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
}
ul.menu a:hover {
color: #9e0e0e;
}
ul.menu li {
float: left;
background-color: #b18642;
height: 20px;
list-style-type: none;
}
/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
float:left;
background-color: #b18642;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover {
background-color: #b18642;
}
/* Zweite Ebene */
ul.menu ul {
margin:0;
padding: 0;
position: absolute;
background-color: #b18642;
border-left: 1px solid #FFF9E4;
border-right: 1px solid #FFF9E4;
display: none;
width: 130px;
}
/* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
das wars, wie gesagt... ich hoffe ihr könnt mir weiterhelfen.. 🙁
Vielen Dank im vorraus!