Du bist hier: bueltge.de » test »

jQuery und die horizontale Slide-Funktion

So sieht es aus

Klick mich

Content

So geht es

Markup

HTML für einen Bereich Content und einen Bereich Sidebar


<div id="content">
	<a href="#" id="ToogleSidebar" title="ein-/ausblenden">Klick mich</a>
	<div id="sidebar">
		<p>Sidebar</p>
	</div>
	<p>Content</p>
</div>

CSS

Beispielhaftes CSS, was sicher ausgebaut werden muss.


div#content { background: #ccc; width: 99%; height: 200px; float: left;}
#ToogleSidebar { float: left; margin: 1em; }
div#sidebar { background: #ba0100; width: 200px; height: 200px; float: right; }

JavaScript

Bibliothek jQuery einbinden, hier beispielhaft via Google


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.1");
</script>

<script type="text/javascript">
<!--
jQuery(document).ready(function() {
	$("a#ToogleSidebar").click().toggle(function() {
		$('#sidebar').animate({
			width: 'hide',
			opacity: 'hide'
		}, 'slow');
	}, function() {
		$('#sidebar').animate({
			width: 'show',
			opacity: 'show'
		}, 'fast');
	});
});
-->
</script>