diff --git a/phpgwapi/inc/class.egw_framework.inc.php b/phpgwapi/inc/class.egw_framework.inc.php
index 8e201b5fb4..f97ef876b7 100644
--- a/phpgwapi/inc/class.egw_framework.inc.php
+++ b/phpgwapi/inc/class.egw_framework.inc.php
@@ -383,19 +383,6 @@ abstract class egw_framework
 			}
 		}
 
-		if(!$GLOBALS['egw_info']['user']['preferences']['common']['disable_slider_effects'])
-		{
-			$slider_effects_src = $GLOBALS['egw_info']['server']['webserver_url'] . '/phpgwapi/templates/idots/js/slidereffects.js';
-			$slider_effects = '<script src="'.$slider_effects_src.'" type="text/javascript">
-			</script>';
-		}
-		else
-		{
-			$simple_show_hide_src = $GLOBALS['egw_info']['server']['webserver_url'] . '/phpgwapi/templates/idots/js/simple_show_hide.js';
-			$simple_show_hide = '<script src="'.$simple_show_hide_src.'" type="text/javascript">
-			</script>';
-		}
-
 		if ($GLOBALS['egw_info']['flags']['app_header'])
 		{
 			$app = $GLOBALS['egw_info']['flags']['app_header'];
@@ -426,8 +413,6 @@ abstract class egw_framework
 			'img_icon'			=> $var['favicon_file'],
 			'img_shortcut'		=> $var['favicon_file'],
 			'pngfix'        	=> $pngfix,
-			'slider_effects'	=> $slider_effects,
-			'simple_show_hide'	=> $simple_show_hide,
 			'lang_code'			=> $lang_code,
 			'charset'       	=> translation::charset(),
 			'website_title' 	=> strip_tags($GLOBALS['egw_info']['server']['site_title']. ($app ? " [$app]" : '')),
diff --git a/phpgwapi/templates/default/head.tpl b/phpgwapi/templates/default/head.tpl
index 339941862c..882de96c3b 100644
--- a/phpgwapi/templates/default/head.tpl
+++ b/phpgwapi/templates/default/head.tpl
@@ -13,8 +13,6 @@
 		{meta_robots}
 		<link rel="icon" href="{img_icon}" type="image/x-ico" />
 		<link rel="shortcut icon" href="{img_shortcut}" />
-		{slider_effects}
-		{simple_show_hide}
 		{css_file}
 		<style type="text/css">
 			{app_css}
diff --git a/phpgwapi/templates/idots/class.idots_framework.inc.php b/phpgwapi/templates/idots/class.idots_framework.inc.php
index 291294ccc2..f30ce31923 100644
--- a/phpgwapi/templates/idots/class.idots_framework.inc.php
+++ b/phpgwapi/templates/idots/class.idots_framework.inc.php
@@ -111,6 +111,28 @@ class idots_framework extends egw_framework
 			// hide location bar
 			egw_framework::set_onload('window.setTimeout(function(){window.scrollTo(0, 1);}, 100);');
 		}
+
+		// include regular include slidereffects.js
+		if (!$GLOBALS['egw_info']['user']['preferences']['common']['disable_slider_effects'])
+		{
+			self::validate_file('/phpgwapi/templates/idots/js/slidereffects.js');
+		}
+		else
+		{
+			self::validate_file('/phpgwapi/templates/idots/js/simple_show_hide.js');
+		}
+		self::validate_file('/phpgwapi/templates/idots/js/idots.js');
+
+		if ($GLOBALS['egw_info']['user']['preferences']['common']['click_or_onmouseover'] == 'onmouseover' && !html::$ua_mobile)
+		{
+			$show_menu_event = 'mouseover';
+		}
+		else
+		{
+			$show_menu_event = 'click';
+		}
+		$extra['slide-out'] = $this->slide_out_menus($show_menu_event);
+
 		$this->tpl->set_var($this->_get_header($extra));
 
 		$content .= $this->tpl->fp('out','head');
@@ -120,6 +142,43 @@ class idots_framework extends egw_framework
 		return $content;
 	}
 
+	/**
+	 * Return slide-out-menu config for idots.js
+	 *
+	 * @param string $show_menu_event='click'
+	 * @return array
+	 */
+	protected function slide_out_menus($show_menu_event='click')
+		{
+		return array(
+			array(
+				'id' => 'menu1',
+				'dir' => 'down',
+				'left' => 10,
+				'top' => html::$ua_mobile ? 0 : 114,
+				'width' => 180,
+				'height' => 200,
+				'pos' => 'right',
+				'bind' => array(
+					'#extra_icons_show' => array('event' => $show_menu_event, 'method' => 'showMenu'),
+					'#menu1close' => array('event' => $show_menu_event, 'method' => 'hide'),
+				),
+			),
+			array(
+				'id' => 'menu2',
+				'dir' => 'right',
+				'left' => 0,
+				'top' => html::$ua_mobile ? 0 : 105,
+				'width' => 100,
+				'height' => 200,
+				'bind' => array(
+					'#menu2show' => array('event' => $show_menu_event, 'method' => 'showMenu'),
+					'#menu2close' => array('event' => 'click', 'method' => 'hide'),
+				),
+			),
+		);
+	}
+
 	/**
 	* Returns the html from the body-tag til the main application area (incl. opening div tag)
 	*
@@ -502,15 +561,6 @@ egw.set_user('.$GLOBALS['egw']->accounts->json($GLOBALS['egw_info']['user']['acc
 	{
 		$var = parent::_get_navbar($apps);
 
-		if($GLOBALS['egw_info']['user']['preferences']['common']['click_or_onmouseover'] == 'onmouseover' && !html::$ua_mobile)
-		{
-			$var['show_menu_event'] = 'onMouseOver';
-		}
-		else
-		{
-			$var['show_menu_event'] = 'onClick';
-		}
-
 		if($GLOBALS['egw_info']['user']['userid'] == 'anonymous')
 		{
 			$config_reg = config::read('registration');
@@ -610,10 +660,6 @@ egw.set_user('.$GLOBALS['egw']->accounts->json($GLOBALS['egw_info']['user']['acc
 		{
 			$var['app_titles'] = '<td colspan="'.$max_icons.'">&nbsp;</td>';
 		}
-		// mobile support
-		$var['menu1top'] = html::$ua_mobile ? 0 : 114;
-		$var['menu2top'] = html::$ua_mobile ? 0 : 105;
-
 		return $var;
 	}
 
diff --git a/phpgwapi/templates/default/footer.tpl b/phpgwapi/templates/idots/footer.tpl
similarity index 100%
rename from phpgwapi/templates/default/footer.tpl
rename to phpgwapi/templates/idots/footer.tpl
diff --git a/phpgwapi/templates/idots/js/idots.js b/phpgwapi/templates/idots/js/idots.js
new file mode 100644
index 0000000000..829aa84811
--- /dev/null
+++ b/phpgwapi/templates/idots/js/idots.js
@@ -0,0 +1,44 @@
+/**
+ * EGroupware idots template javascript
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package phpgwapi
+ * @subpackage idots
+ * @link http://www.egroupware.org
+ * @author Ralf Becker <RalfBecker@outdoor-training.de>
+ * @version $Id$
+ */
+
+
+/**
+ * idots javascript
+ */
+(function(){
+	// add quick add select box
+	egw.link_quick_add('quick_add');
+
+	// instanciate slideout menus via "data-slide-out" of egw.js script tag
+	var egw_script = document.getElementById('egw_script_id');
+	if (egw_script)
+	{
+		var data_slide_out = egw_script.getAttribute('data-slide-out');
+		if (data_slide_out)
+		{
+			data_slide_out = JSON.parse(data_slide_out);
+			for(var i=0; i < data_slide_out.length; ++i)
+			{
+				var args=data_slide_out[i];
+				
+				new ypSlideOutMenu(args.id, args.dir, args.left, args.top, args.width, args.height, args.pos);
+				for(var selector in args.bind)
+				{
+					var data = args.bind[selector];
+					jQuery(selector).on(data.event, {menu: args.id, method: data.method}, function(event){ 
+						window.ypSlideOutMenu[event.data.method].call(window, event.data.menu);
+						event.preventDefault();
+					});
+				}
+			}
+		}
+	}
+})();
diff --git a/phpgwapi/templates/idots/js/simple_show_hide.js b/phpgwapi/templates/idots/js/simple_show_hide.js
index 8615b9175f..045c26c925 100644
--- a/phpgwapi/templates/idots/js/simple_show_hide.js
+++ b/phpgwapi/templates/idots/js/simple_show_hide.js
@@ -65,7 +65,7 @@ function ypSlideOutMenu(id, dir, left, top, width, height,pos)
 							strCSS += '}'
 							strCSS += '</style>';
 
-						d.write(strCSS);
+						jQuery('head').append(strCSS);
 						//	alert(strCSS);
 //						this.load()
 
diff --git a/phpgwapi/templates/idots/js/slidereffects.js b/phpgwapi/templates/idots/js/slidereffects.js
index 4024681fa1..644d6e9493 100644
--- a/phpgwapi/templates/idots/js/slidereffects.js
+++ b/phpgwapi/templates/idots/js/slidereffects.js
@@ -62,7 +62,8 @@ function ypSlideOutMenu(id, dir, left, top, width, height,pos)
 							strCSS += '}'
 							strCSS += '</style>';
 
-						d.write(strCSS)
+						jQuery('head').append(strCSS);
+
 
 							this.load()
 					}
diff --git a/phpgwapi/templates/default/navbar.tpl b/phpgwapi/templates/idots/navbar.tpl
similarity index 83%
rename from phpgwapi/templates/default/navbar.tpl
rename to phpgwapi/templates/idots/navbar.tpl
index ad8b3c6a17..3e0cde3888 100644
--- a/phpgwapi/templates/default/navbar.tpl
+++ b/phpgwapi/templates/idots/navbar.tpl
@@ -2,15 +2,10 @@
 <div style="position:relative"><div id="divLogo"><a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" title="{logo_title}" alt="EGroupware"/></a></div></div>
 
 <!-- BEGIN app_extra_icons_div -->
-<script language="javascript">
-	new ypSlideOutMenu("menu1", "down", 10, {menu1top}, 180, 200,'right');
-	egw_LAB.wait(function(){egw.link_quick_add('quick_add');});
-</script>
-
-<div id="menu1Container">
+<div id="menu1Container" style="visibility: hidden; position:absolute;">
 	<div id="menu1Content" style="position: relative; left: 0; text-align: left;">
 		<div id="extraIcons">
-			<a id="menu1close" href="#" {show_menu_event}="ypSlideOutMenu.hide('menu1')" title="{lang_close}"><img style="" border="0" src="{img_root}/close.png"/></a>
+			<a id="menu1close" href="#" title="{lang_close}"><img style="" border="0" src="{img_root}/close.png"/></a>
 			<table cellspacing="0" cellpadding="0" border="0" width="100%">
 <!-- BEGIN app_extra_block -->
 				<tr>
@@ -46,7 +41,7 @@
 <!-- BEGIN app_extra_icons_icon -->
 							<td width="26" valign="top" align="right" style="padding-right:3px; padding-top:20px;">
 <!-- BEGIN extra_icons_show -->
-								<a id="extra_icons_show" title="{lang_show_more_apps}" href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu1')"><img src="{img_root}/extra_icons.png" border="0" /></a>
+								<a id="extra_icons_show" title="{lang_show_more_apps}" href="#"><img src="{img_root}/extra_icons.png" border="0" /></a>
 <!-- END extra_icons_show -->
 							</td>
 <!-- END app_extra_icons_icon -->
@@ -64,7 +59,7 @@
 	<div id="divStatusBar"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr>
 		<td width="33%" align="left" id="user_info">{user_info}</td>
 		<td align="center" id="admin_info">{current_users}</td>
-		<td width="33%"  align="right" id="quick_add">{quick_add}</td>
+		<td width="33%"  align="right" id="quick_add"></td>
 	</tr></table></div>
 <!-- END navbar -->
 <!-- END navbar_header -->
@@ -81,15 +76,11 @@
 
 
 <!-- BEGIN sidebox_hide_header -->
-	<script language="javascript">
-		new ypSlideOutMenu("menu2", "right", 0, {menu2top}, 100, 200)
-	</script>
-
 	<div id="sideboxdragarea">
-		<a href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu2')" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
+		<a id="menu2show" href="#" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
 	</div>
 
-	<div id="menu2Container">
+	<div id="menu2Container" style="visibility: hidden; position:absolute;">
 	<!--[if lte IE 6.5]><div class="selectbg" id="dd3"><div class="bdforselection"><![endif]-->
 		<div id="menu2Content" style="position: relative; left: 0; text-align: left;">
 			<table cellspacing="0" cellpadding="0">
@@ -101,7 +92,7 @@
 <!-- BEGIN sidebox_hide_footer -->
 					</div>
 				</td><td id="menu2handle" valign="top">
-					<a href="#" onclick="ypSlideOutMenu.hide('menu2')" ><img src="{img_root}/dragarea_left.png" align="right" /></a>
+					<a id="menu2close" href="#"><img src="{img_root}/dragarea_left.png" align="right" /></a>
 				</td>
 			</tr></table>
 		</div>
diff --git a/phpgwapi/templates/jerryr/class.jerryr_framework.inc.php b/phpgwapi/templates/jerryr/class.jerryr_framework.inc.php
index 3f64080b77..16d2b45aa7 100644
--- a/phpgwapi/templates/jerryr/class.jerryr_framework.inc.php
+++ b/phpgwapi/templates/jerryr/class.jerryr_framework.inc.php
@@ -66,4 +66,41 @@ class jerryr_framework extends idots_framework
 
 		return $this->tplsav2->fetch('topmenu.tpl.php');
 	}
+
+	/**
+	 * Return slide-out-menu config for idots.js
+	 *
+	 * @param string $show_menu_event='click'
+	 * @return array
+	 */
+	protected function slide_out_menus($show_menu_event='click')
+	{
+		return array(
+			array(
+				'id' => 'menu1',
+				'dir' => 'down',
+				'left' => 45,
+				'top' => 5,
+				'width' => 188,
+				'height' => 300,
+				'pos' => 'right',
+				'bind' => array(
+					'#extra_icons_show' => array('event' => $show_menu_event, 'method' => 'showMenu'),
+					'#menu1close' => array('event' => $show_menu_event, 'method' => 'hide'),
+				),
+			),
+			array(
+				'id' => 'menu2',
+				'dir' => 'right',
+				'left' => 0,
+				'top' => 28,
+				'width' => 160,
+				'height' => 200,
+				'bind' => array(
+					'#menu2show' => array('event' => $show_menu_event, 'method' => 'showMenu'),
+					'#menu2close' => array('event' => 'click', 'method' => 'hide'),
+				),
+			),
+		);
+	}
 }
diff --git a/phpgwapi/templates/jerryr/navbar.tpl b/phpgwapi/templates/jerryr/navbar.tpl
index f5638a570b..1ff89cdd3d 100644
--- a/phpgwapi/templates/jerryr/navbar.tpl
+++ b/phpgwapi/templates/jerryr/navbar.tpl
@@ -2,23 +2,19 @@
 <div style="position:relative"><div id="divLogo"><a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" title="{logo_title}" alt="EGroupware"/></a></div></div>
 
 <!-- BEGIN app_extra_icons_div -->
-<script language="javascript">
-	new ypSlideOutMenu("menu1", "down", 45, 5, 188, 300,'right');
-</script>
-
-<div id="menu1Container">
+<div id="menu1Container" style="visibility: hidden; position:absolute;">
 	<div id="menu1Content" class="menuOneBox">
 		<div id="extraIcons">
 			<table cellspacing="0" cellpadding="0" border="0" width="100%">
-			<!-- BEGIN app_extra_block -->
+<!-- BEGIN app_extra_block -->
 				<tr>
 					<td class="extraIconsRowIcon"><a href="{url}" {target}><img src="{icon}" alt="{title}" title="{title}" width="16" border="0" /></a></td>
 					<td align="left" class="extraIconsRow"><a href="{url}" {target}>{title}</a></td>
 				</tr>
-			<!-- END app_extra_block -->
+<!-- END app_extra_block -->
 				<tr><td colspan="2" class="extraIconsHeader" nowrap="nowrap" align="right">
-                                <a href="#" {show_menu_event}="ypSlideOutMenu.hide('menu1')" title="{lang_close}"><img style="" border="0" src="{img_root}/up.button.png"/></a>
-                        </td></tr>
+					<a id="menu1close" href="#" title="{lang_close}"><img style="" border="0" src="{img_root}/up.button.png"/></a>
+				</td></tr>
 			</table>
 		</div>
 	</div>
@@ -50,7 +46,7 @@
 <!-- END app_icon_block -->
 <!-- BEGIN app_extra_icons_icon -->
 							<td width="26" valign="top" align="right" style="padding-right:3px; padding-top:20px;">
-								<a title="{lang_show_more_apps}" href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu1')"><img src="{img_root}/extra_icons.png" border="0" /></a>
+								<a id="extra_icons_show" title="{lang_show_more_apps}" href="#"><img src="{img_root}/extra_icons.png" border="0" /></a>
 							</td>
 <!-- END app_extra_icons_icon -->
 						</tr>
@@ -85,15 +81,11 @@
 
 
 <!-- BEGIN sidebox_hide_header -->
-	<script language="javascript">
-		new ypSlideOutMenu("menu2", "right", 0, 28, 160, 200)
-	</script>
-
 	<div id="sideboxdragarea" style="position:absolute;left:0px;top:38px; z-index: 52;">
-		<a href="#" {show_menu_event}="ypSlideOutMenu.showMenu('menu2')" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
+		<a id="menu2show" href="#" title="{lang_show_menu}"><img src="{img_root}/dragarea_right.png" /></a>
 	</div>
 
-	<div id="menu2Container">
+	<div id="menu2Container" style="visibility: hidden; position:absolute;">
 	<!--[if lte IE 6.5]><div class="selectbg" id="dd3"><div class="bdforselection"><![endif]-->
 		<div id="menu2Content" style="position: relative; left: 0; text-align: left;">
 			<table cellspacing="0" cellpadding="0">
@@ -105,7 +97,7 @@
 <!-- BEGIN sidebox_hide_footer -->
 					</div>
 				</td><td style="padding-top:10px" valign="top">
-					<a href="#" onclick="ypSlideOutMenu.hide('menu2')" ><img src="{img_root}/dragarea_left.png" align="right" /></a>
+					<a id="menu2close" href="#"><img src="{img_root}/dragarea_left.png" align="right" /></a>
 				</td>
 			</tr></table>
 		</div>