Jump to content


Photo

"menu"


  • Faça o login para participar
4 replies to this topic

#1 Oaclety

Oaclety

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 12/09/2008, 22:02

bom, não é bem um meno, mas quando você poem a setinha em cima, ele termina de mostrar a imagem, e vai diminuindo as outras como:
http://www.war-design.com/wd/ (na parte que tem stow, jotm e gravuras)
http://www.angelro.org/v2/ (na parte do orkut, seja vip e etc)

procurei em todo lugar esse javascript e nao consegui, gostaria de ajuda, obrigado.

#2 Kadu DG

Kadu DG

    I Love my Little Girl! http://www.kdsg.net

  • Usuários
  • 597 posts
  • Sexo:Masculino
  • Localidade:Carapicuiba, SP

Posted 13/09/2008, 10:14

isso é Mootools, uma frameowrk se não me engano!

demonstração:
http://demos111.moot...net/Fx.Elements

Site:
http://mootools.net/
Posted Image

#3 Oaclety

Oaclety

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 13/09/2008, 13:43

sim, é o exemplo que eu gostaria, so qu enao consegui usar de geito ninhum.
no site ele fica so os escritos, não fica o efeito, obrigado.

#4 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 13/09/2008, 14:49

Eles tem um fórum lá que é só para quem tá iniciando.

Dá uma tentada...
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#5 Oaclety

Oaclety

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 15/09/2008, 14:10

bom, eu consegui o codigo assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>phatfusion : image menu</title>

<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">

<link href="imageMenu.css" rel="stylesheet" type="text/css" />

&lt;script type="text/javascript" src="../_common/js/mootools.js"></script>
&lt;script type="text/javascript" src="imageMenu.js"></script>



</head>
<body>

	<div id="container">
	
		<div id="logo"><h1>phatfusion</h1></div>
		<div class="nav"><a href="../index.htm">home</a></div>
		<p class="desc">javascript and flash development.</p>
		
		
		<h2 class="imagemenu">image menu</h2>
		<p class="version">version 2.2</p>
		<p class="description">horizontal menu, reveals more of the image as you rollover it.</p>
		
		
		<h3 class="example">example</h3>
		<div id="example">
			<div id="imageMenu">
			<ul>
				<li class="
landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
				<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
				<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
				<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
				<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
			</ul>
			</div>
		
		&lt;script type="text/javascript">
			
			window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
			});
		</script>
		</div>
		
		<h3 class="features">features</h3>
		<div id="features">
			<ul>
				<li>2 optional onClick events - open & close</li>
				<li>href passed to onClick events</li>
				<li>stays open when clicked</li>
				<li>closes when clicked</li>
				<li>select item to pre-open</li>
			</ul>
		</div>
		
		<h3 class="usage">usage</h3>
		<div id="usage">
		<pre><code>var myMenu = new ImageMenu('imageMenu', {
	openWidth:310, 
	onOpen:function(e,i){console.log(e)}
});</code></pre>
			<h3 class="options">options</h3>
			<dl>
				<dt>onOpen</dt>
				<dd>a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function.</dd>
				<dt>onClose</dt>
				<dd>same as above but when clicked closed.</dd>
				<dt>openWidth</dt>
				<dd>width in px of the items when rolled over. default: 200</dd>
				<dt>transition</dt>
				<dd>default: Fx.Transitions.quadOut</dd>
				<dt>duration</dt>
				<dd>the length of the transition. default: 400</dd>
				<dt>open</dt>
				<dd>the id or index of the item to open on start. default: null</dd>
				<dt>border</dt>
				<dd>a px value to tweak the widths when an item is open. default: 0</dd>
			</dl>
		</div>
		
		<h3 class="compatibility">browser compatibility</h3>
		<div id="compatibility">
			<ul>
				<li>Firefox 2 (mac / pc)</li>
				<li>IE 7</li>
				<li>IE 6</li>
				<li>Safari (mac)</li>
			</ul>
		</div>
		
		<h3 class="requirements">requirements</h3>
		<div id="requirements">
			<ul>
				<li><a href="http://www.mootools.net" target="_blank">mootools v1.11</a></li>
			</ul>
		</div>
		
		<h3 class="downloads">downloads</h3>
		<div id="downloads">
			<ul>
				<li><a href="imagemenu.zip">imagemenu.zip</a></li>
			</ul>
		</div>
		
		
	</div>
&lt;script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
&lt;script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3333085-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>


e quando eu ponho no layout, ele desonta o layout todo. decha ele todo quebrado.




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq