Hallo Typo3-Gemeinde,
ich versuche gerade für meine Typo3-Seite ein Slideout-Menü wie es auf www.meade.de zu sehen ist zu erstellen. In einem Thread in "Deutsche Typo3-Seiten" (siehe hier) hat jemand dies auch schon bewerkstelligt. Ich habe den Code übernommen und alles so gemacht wie dort beschrieben, allerdings möchte ich nun einige Fragen stellen:
- Wie passe ich das Design der Buttons und Submenüs an?
- Warum wird in den Buttons kein Text angezeigt?
- Wie kriege ich es hin, dass die Submenüs genau unter den Main-Menü-Buttons angezeigt werden?
Bitte versucht alles so einfach wie möglich zu erkären. Bin am lernen. :o
Hier erstma mein TS:
seite = PAGE
seite.typeNum = 0
seite.stylesheet = fileadmin/template4/style.css
# Benoetigte Libaries einfuegen
seite.includeLibs.ypMenu = fileadmin/template4/ypMenu.php
seite.headerData.10 = TEXT
seite.headerData.10.value = <script type="text/javascript" src="fileadmin/template4/ypSlideOutMenus.js" language="JavaScript"></script><script type="text/javascript" src="fileadmin/template4/jslib.js" language="JavaScript"></script>
seite.10 = TEMPLATE
seite.10 {
template = FILE
template.file = fileadmin/template4/index.htm
workOnSubpart = DOKUMENT
marks.INHALT = CONTENT
marks.INHALT < styles.content.get
marks.MENU_MAIN >
marks.MENU_MAIN = HMENU
marks.MENU_MAIN.1 = GMENU
marks.MENU_MAIN.1 {
IProcFunc = user_menu->firstLevel
expAll = 1
wrap = |
IFSUB = 1
IFSUB {
wrap = |
XY = [50.w]+50, 25
backColor = #cccccc
50 = TEXT
50 {
text.field = title
fontSize = 12
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
100 = || IMAGE
100.file = fileadmin/template4/spacer.gif
}
NO {
wrap = |
XY = [50.w]+20, 25
backColor = #cccccc
50 = TEXT
50 {
text.field = title
fontSize = 12
fontFile = fileadmin/fonts/verdana.ttf
fontColor = #222222
offset = 10,17
niceText = 1
}
100 = || IMAGE
100.file = fileadmin/template4/spacer.gif
}
RO < marks.MENU_MAIN.1.NO
RO = 1
RO {
backColor = #ff0000
}
IFSUBRO < marks.MENU_MAIN.1.NO
IFSUBRO = 1
IFSUBRO {
backColor = #ffca51
}
}
marks.MENU_MAIN.2 = TMENU
marks.MENU_MAIN.2 {
IProcFunc = user_menu->secondLevel
expAll = 1
NO.linkWrap = |
}
marks.MENU_MAIN.3 = TMENU
marks.MENU_MAIN.3 {
IProcFunc = user_menu->thirdLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
marks.MENU_MAIN.4 = TMENU
marks.MENU_MAIN.4 {
IProcFunc = user_menu->fourthLevel
expAll = 1
NO.linkWrap = <li>|</li>
}
}
# append Menu JS to page
seite.11 = USER
seite.11.userFunc = user_menu->menuEnd
Das Template habe ich vorerst aus dem Pack von http://youngpup.net/2001/ypslideoutmenus (css) übernommen. Erstmal möchte ich, dass das Menü aussieht wie dort.
<html>
<head>
<script language="javascript">
var menus = [
new ypSlideOutMenu("menu1", "down", 5, 80, 170, 59),
new ypSlideOutMenu("menu2", "down", 57, 80, 170, 40),
new ypSlideOutMenu("menu3", "down", 147, 80, 170, 97),
new ypSlideOutMenu("menu4", "down", 237, 80, 170, 21)
]
for (var i = 0; i < menus.length; i++) {
menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
}
ypSlideOutMenu.writeCSS();
</script>
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="menubar">
###MENU_MAIN###
</div>
<!---
<div id="menu1Container">
<div id="menu1Content" class="menu">
<div class="options">
<a href="/ideas/javascript_debugger/">javascript debugger</a>
<a href="/ideas/onRollMouseWheel/">monitoring the mouse-wheel</a>
<a href="/ideas/resizeable_flash_textfield/">resizable text fields in flash</a>
</div>
</div>
</div>
<div id="menu2Container">
<div id="menu2Content" class="menu">
<div class="options">
<a href="/experiments/email_wiretap/">email wiretap</a>
<a href="/experiments/beatnik_piano/">beatnik piano</a>
</div>
</div>
</div>
<div id="menu3Container">
<div id="menu3Content" class="menu">
<div class="options">
<a href="/components/ypXmlTree/">ypXmlTree</a>
<a href="/components/ypRing/">ypRing</a>
<a href="/components/ypBranch/">ypBranch</a>
<a href="/components/ypSlideOutMenu/">ypSlideOutMenu</a>
<a href="/components/ypSimpleScroll/">ypSimpleScroll</a>
</div>
</div>
</div>
<div id="menu4Container">
<div id="menu4Content" class="menu">
<div class="options">
<a href="/writings/i_want_my_DOM/">i want my DOM, dammit</a>
</div>
</div>
</div>
<div id="about">
<code>Note that this sample doesn't look good in older browsers (even ie5!) that don't support all of CSS. This has nothing to do with the component, I've just implemented some extra CSS here to make it look cool. The same could be achieved with TABLE elements, but I just didn't feel like making them.</code>
</div>
-->
<!-- ###DOKUMENT### end -->
</body>
</html>
Unter http://www.volldiegosse.de/t3 könnt ihr das Ganze "bewundern" :roll:
Stylesheet:
body {
font-size:11px;
font-family:arial, sans-serif;
color:#444444;
}
#menubar {
position:absolute;
width:450px;
left:5px;
top:55px;
background-color:#F9F1C8;
border:1px solid #AD5800;
padding:2px;
}
#menubar a {
color:#AD5800;
letter-spacing:1px;
border:1px solid #F9F1C8;
padding-left:5px;
padding-right:5px;
text-decoration:none;
}
#menubar a.active {
border-bottom-color:#CCC599;
border-right-color:#CCC599;
border-left-color:#FFFFFF;
border-top-color:#FFFFFF;
}
.menu .options {
margin-right:1px;
margin-bottom:1px;
border:1px solid #AD5800;
background-color:#F9F1C8;
}
.menu a {
color:#AD5800;
display:block;
padding:2px 10px;
text-decoration:none;
background-color:transparent;
}
.menu a:hover {
background-color:#AD5800;
color:#FAF7E1;
}
#about {
position:absolute;
left:5px;
top:200px;
}
Ich weiss, dass alles etwas unordentlich ist, aber ich hoffe ihr könnt mir trotzdem helfen. 🙂
Vielen Dank schon mal im Voraus.
Mfg Felix