---
title: "ypSlideOutMenu einbauen"
url: "https://www.typo3.net/d/25246-ypslideoutmenu-einbauen"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","JavaScript & AJAX"]
created: "2005-05-27"
last_reply: "2005-05-30"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# ypSlideOutMenu einbauen

TYPO3 › Menüs · 1 Antwort · gestartet 2005-05-27

## Eröffnungsbeitrag

**maxw** · 2005-05-27 · [Beitrag #1](https://www.typo3.net/d/25246-ypslideoutmenu-einbauen/1)

Hallo zusammen

Wiederum wende ich mich an das informative Forum,welches mir schon sehr geholfen hat.
Dieses Mal möchte ich mein Menu abändern und das ypSlideOutMenu einbinden.Hier mal mein Script:

```typoscript
<script language="javascript" src="../ypSlideOutMenusC.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
	var menus = [
		new ypSlideOutMenu("menu1", "down", 10, 80, 170, 59),
		new ypSlideOutMenu("menu2", "down", 70, 80, 170, 50),
		new ypSlideOutMenu("menu3", "down", 155, 80, 170, 97),
		new ypSlideOutMenu("menu4", "down", 237, 80, 170, 59),
		new ypSlideOutMenu("menu5", "down", 325, 80, 170, 59),
		new ypSlideOutMenu("menu6", "down", 390, 80, 170, 59),
		new ypSlideOutMenu("menu7", "down", 357, 80, 170, 59)
	]

	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>

<style type="text/css">
	/* just basic text formatting - nothing special */
	@import "/_common/demo.css";
		
	body {
		font-size:12px;
		font-family:verdana, sans-serif;
		color:#333333;
	}
	#menubar {
		position:absolute;
		width:550px;
		left:5px;
		top:55px;
		background-color:#527dbd;
		border:1px solid #527dbd;
		padding:3px;
	}
	#menubar a {
		color:#333333;
		letter-spacing:1px;
		border:1px solid #F9F1C8;
		padding-left:5px;
		padding-right:5px;
		text-decoration:none;
	}
	#menubar a.active {
		border-bottom-color:#527dbd;
		border-right-color:#527dbd;
		border-left-color:#527dbd;
		border-top-color:#527dbd;
	}
	.menu .options {
		margin-right:1px;
		margin-bottom:1px;
		border:1px solid #527dbd;
		background-color:transparent;
	}
	.menu a {
		color:#333333;
		display:block;
		padding:3px 10px;
		text-decoration:none;
		background-color:transparent;
	}
	.menu a:hover {
		background-color:transparent	;
		color:#e75908;
	}

	#about {
		position:absolute;
		left:5px;
		top:20px;
	}
</style>

<div id="menubar">
	<a id="act0" href="http://www.wenger-fischer.ch/" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')">Home</a> 
	<a id="act1" href="http://www.wenger-fischer.ch/index.php?id=30" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')">Australia</a> 
	<a id="act2" href="http://www.wenger-fischer.ch/index.php?id=29" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')">Roadtrains</a> 
	<a id="act3" href="http://www.wenger-fischer.ch/index.php?id=28" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')" title="onmouseover=ypSlideOutMenu.showMenu('menu4'); onmouseout=ypSlideOutMenu.hideMenu('menu4')">Gallery</a> 
    <a id="act4" href="http://www.wenger-fischer.ch/index.php?id=27" onmouseover="ypSlideOutMenu.showMenu('menu5')" onmouseout="ypSlideOutMenu.hideMenu('menu5')" title="onmouseover=ypSlideOutMenu.showMenu('menu5'); onmouseout=ypSlideOutMenu.hideMenu('menu5')">Family</a> 
	<a id="act5" href="http://www.wenger-fischer.ch/index.php?id=26" onmouseover="ypSlideOutMenu.showMenu('menu6')" onmouseout="ypSlideOutMenu.hideMenu('menu6')" title="onmouseover=ypSlideOutMenu.showMenu('menu6'); onmouseout=ypSlideOutMenu.hideMenu('menu6')">Offroad</a> 
	<a id="act6" href="http://www.wenger-fischer.ch/index.php?id=24" onmouseover="ypSlideOutMenu.showMenu('menu7')" onmouseout="ypSlideOutMenu.hideMenu('menu7')" title="onmouseover=ypSlideOutMenu.showMenu('menu7'); onmouseout=ypSlideOutMenu.hideMenu('menu7')">Links</a> 
</div>


<div id="menu1Container">
	<div id="menu1Content" class="menu">
		<div class="options">
			<a href="http://www.wenger-fischer.ch/index.php?id=46">News</a>
			<a href="http://www.wenger-fischer.ch/index.php?id=33">Gästebuch</a>
		</div>
	</div>
</div>

<div id="menu2Container">
	<div id="menu2Content" class="menu">
		<div class="options">
			<a href="http://www.wenger-fischer.ch/index.php?id=37">Immigration</a>
			<a href="http://www.wenger-fischer.ch/index.php?id=36">Queensland</a>
		</div>
	</div>
</div>

<div id="menu3Container">
	<div id="menu3Content" class="menu">
		<div class="options">
			<a href="http://www.wenger-fischer.ch/index.php?id=38">King Hauler</a>
		</div>
	</div>
</div>

<div id="menu5Container">
	<div id="menu5Content" class="menu">
		<div class="options">
			<a href="http://www.wenger-fischer.ch/index.php?id=40">Wer sind wir</a>
			<a href="http://www.wenger-fischer.ch/index.php?id=39">Kim</a>
		</div>
	</div>
</div>

<div id="menu6Container">
	<div id="menu6Content" class="menu">
		<div class="options">
			<a href="http://www.wenger-fischer.ch/index.php?id=42">Trial2004</a>
			<a href="http://www.wenger-fischer.ch/index.php?id=41">Spielzeug</a>
		</div>
	</div>
</div>


</div>
```

Dieses habe ich in einer index.html Datei zusammengesetzt, leider übe ich nun schon lange wie ich das einbinden kann. Das bisherige Menu wurde durch einen Platzhalter ###MENU### im Template gesetzt. Die Infos hatte ich im Setup geschrieben, durch GMENU LAYERS.
Wer hat eine Idee wie ich neue Script einbinden könnte ?

Besten Dank im voraus für eure Tips

## Antworten

### [#2](https://www.typo3.net/d/25246-ypslideoutmenu-einbauen/2) · Moeffz · 2005-05-30

Schau mal in diesen Thread:
<http://typo3forum.de/forum/list/list_post//15065/>

Dort wurde das Thema ypSlideOutMenu ziemlich breit ausgewalzt.

---

Quelle: „ypSlideOutMenu einbauen“, typo3.net, https://www.typo3.net/d/25246-ypslideoutmenu-einbauen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.