Slide Menu

Andre Summers · Junho 11, 2008

Oi, pessoal.

Encontrei na net um excelente script de Slide menu no qual o menu fica oculto até que você clique numa abinha para liberá-lo.

Esse script funciona bem, só que estou tendo dificuldades em transferir o menu de um lado para o outro (ele ta na direita mas quero na esquerda).

Podem me ajudar?

Demo

index.html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Teste</title>
 
<style media="all" type="text/css">
 
	body{
		position:relative;
		paddign:0px;
		font-size:100%;
	}
 
	h2{
		color:#FFFFFF;
		font-size:90%;
		font-family:arial;
		margin:10px 10px 10px 10px;
		font-weight:bold;
	}
 
	h2 span{
		font-size:105%;
		font-weight:normal;
	}
 
	ul{
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
	}
 
	li{
		margin:0px 10px 3px 10px;
		padding:2px;
		list-style-type:none;
		display:block;
		background-color:#DA1074;
		width:177px;
	}
 
	li a{
		width:100%;
	}
 
	li a:link,
	li a:visited{
		color:#FFFFFF;
		font-family:verdana;
		font-size:70%;
		text-decoration:none;
		display:block;
		margin:0px 0px 0px 0px;
		padding:0px;
		width:100%;
	}
 
	li a:hover{
		color:#FFFFFF;
		text-decoration:underline;
	}
 
	#sideBar{
		position: absolute;
		width: auto;
		height: auto;
		top: 70px;
		right:-7px;
		background-image:url(images/background.gif);
		background-position:top left;
		background-repeat:repeat-y;
	}
 
	#sideBarTab{
		float:left;
		height:137px;
		width:28px;
	}
 
	#sideBarTab img{
		border:0px solid #FFFFFF;
	}
 
	#sideBarContents{
		overflow:hidden !important;
	}
 
	#sideBarContentsInner{
		width:100px;
	}
 
</style>
 
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
 
</head>
 
<body>
 
<div id="sideBar">
 
	<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
 
	<div id="sideBarContents" style="width:0px;">
		<div id="sideBarContentsInner">
			<h2>Menu<span>Lateral</span></h2>
 
			<ul>
				<li><a href="#">Link One</a></li>
				<li><a href="#">Link Two</a></li>
				<li><a href="#">Link Three</a></li>
				<li><a href="#">Link Four</a></li>
				<li><a href="#">Link Five</a></li>
			</ul>
 
		</div>
	</div>
 
</div>
 
</body>
</html>

side-bar.js

CODE

var isExtended = 0;var height = 450;
var width = 200;
var slideDuration = 1000;
var opacityDuration = 1500;
 
function extendContract(){
 
	if(isExtended == 0){
 
		sideBarSlide(0, height, 0, width);
 
		sideBarOpacity(0, 1);
 
		isExtended = 1;
 
		// make expand tab arrow image face left (inwards)
		$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
 
	}
	else{
 
		sideBarSlide(height, 0, width, 0);
 
		sideBarOpacity(1, 0);
 
		isExtended = 0;
 
		// make expand tab arrow image face right (outwards)
 
		$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
	}
 
}
 
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
		var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'height': [fromHeight, toHeight],
			 'width': [fromWidth, toWidth]
		});
}
 
function sideBarOpacity(from, to){
		var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
		myEffects.custom({
			 'opacity': [from, to]
		});
}
 
function init(){
	$('sideBarTab').addEvent('click', function(){extendContract()});
}
 
window.addEvent('load', function(){init()});

João Melo · Junho 11, 2008

Muda o css

antes

#sideBarTab{
float:left; /*alinhamento esquerdo*/
height:137px;
width:28px;
}

depois

#sideBarTab{
float:right; /*alinhamento direito*/
height:137px;
width:28px;
}

Entrar

Arquivado

Slide Menu

Recommended Posts

Andre Summers 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Melo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante