Como fazer um MENU igual a esse no DREANWEAVER?

[EXCEED NET 0]

Olá, gostaria de fazer um Menu igual a esse: http://www.scriptocean.com/template2.html só que esse está em flash.. gostaria de fazer no Dreamweaver cs4 usando tabelas.

 

Alguém saberia como fazer???

[XauDH 0]

Opa, então cara, pra fazer esse menu você vai precisar de uma outra linguagem além de html.

 

Aconselho usar jquery. Ele tem uns plugins que ajudam muito a fazer isso.

 

Um exemplo:

Demo: Link

Download: Link

[Thiago Retondar 18]

Tópico movido:

 

Webstandards: CSS / XML / XHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Dreamweaver

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[EXCEED NET 0]

Opa, então cara, pra fazer esse menu você vai precisar de uma outra linguagem além de html.

 

Aconselho usar jquery. Ele tem uns plugins que ajudam muito a fazer isso.

 

Um exemplo:

Demo: Link

Download: Link

 

Mais dessa forma o usuário tem q ter o plugin do jquery instalado ou não? outra coisa.. não tem como fazer isso em CCS?

[Eliseu M. 2]

Mais dessa forma o usuário tem q ter o plugin do jquery instalado ou não? outra coisa.. não tem como fazer isso em CCS?

 

Não precisa não. É super simples, coincidentemente, fiz um ontem e salvei o arquivo:

 

<script type="text/javascript" src="http-~~-//jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
         $(document).ready(function(){
                 $("dd:not(:first)").hide();
                 $("dt a").click(function(){
                         $("dd:visible").slideUp("slow");
                         $(this).parent().next().slideDown("slow");
                         return false;
                 });
         });
 </script>
<style>
  body {}
  dl { width: 185px; height:200px; }
  dl,dd { margin: 0; }
  dt { background:#003399; padding: 5px; margin: 0px;
  -webkit-transition:400ms; -moz-transition:400ms; text-shadow:1px 1px 2px #000;}
  dt a { color: #FFF; display:block; font:14px segoe ui; font-weight:bold; text-decoration:none; display:block;}
  dt:hover {background-color:#0033CC;}
  dd a { color: #000; }
  ul { list-style: none; padding: 5px; margin:0; background:#000066; 
  border-top:1px solid white;}
  ul li {opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -webkit-transition:400ms; -moz-transition:400ms;}
  ul li a {color:white; text-decoration:none; font:13px segoe ui; display:block; margin:0; padding:2px;}
  ul li a:hover {text-decoration:none;}
  ul li:hover {text-decoration:underline; opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
</style>
<dl>
       <dt><a href="/">Empresa</a></dt>
       <dd>
       <ul>
               <li><a href="#">Quem Somos</a></li>
               <li><a href="#">Estrutura</a></li>
       </ul>
       </dd>
       <dt><a href="/discuss/">Produtos</a></dt>
       <dd>
       <ul>
               <li><a href="#">Válvulas</a></li>
               <li><a href="#">Conexões</a></li>
               <li><a href="#">Instrumentação</a></li>
               <li><a href="#">Tubos</a></li>
			<li><a href="#">Flanges</a></li>
       </ul>
       </dd>
       <dt><a href="/dev/">Catálogos Técnicos</a></dt>
       <dd>
       <ul>
               <li><a href="/src/">Conexões / Flanges</a></li>
               <li><a href="/dev/bugs/">Válvulas</a></li>
               <li><a href="/dev/recent/">Completo / Simplificado</a></li>
       </ul>
       </dd>
	<dt><a href="#">Contato</a></dt>
	<dt><a href="#">Orçamentos</a></dt>
	<dt><a href="#">Localização</a></dt>
</dl>

 

JQuery é muito simples, é um derivado do JavaScript, mas mto mais poderoso. Se quiser tirar o efeito de deslizamento suave, troque essas linhas:

 

$("dd:visible").slideUp("slow");

$(this).parent().next().slideDown("slow");

 

Por estas:

 

$("dd:visible").toggle();

$(this).parent().next().toggle();

 

:D Té +!

[XauDH 0]

Precisar pode não precisar, mas eu acho bom.

 

Se por algum motivo o link mudar, você vai ficar com parte do seu site sem funcionar.

[William Bruno 1501]

Se por algum motivo o link mudar, você vai ficar com parte do seu site sem funcionar.

 

Então hospede o jQuery no teu próprio servidor. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[EXCEED NET 0]

Então coloquei isso q é desse tudo q eu ví: http://www.cavalcante.net/2007/02/14/menu-com-jquery e fiz só uma implementação q foi: $("ul:not(:first)").hide(); <<-- para ocultar os submenus.

 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){ 
	//ocultando submenu
	$("ul:not(:first)").hide();  
	//adicionando o evento click a todos os links que estão na primeira ul dentro da div menu
	$('#menu').find('ul:eq(0)> li > a').click(function(){
	//adicionando o efeito ao elemento ul que está dentro da mesma li do link que foi clicado
	$(this).parent().find('ul:eq(0)').slideToggle("slow");
  }); 
});
</script>

Só que quando é clicado em 1 ítem do menu e depois clicado em um 2º item... o 1º permanece aberto... gostaria de saber oq complementar nesse código acima para que ao clicar num 2º ítem do menu o 1º fechasse automaticamente.

 

Outra coisa baixei o Jquery e veio 3 arquivos: jquery.accordion.js jquery.accordion.min.js jquery.accordion.pack.js qual desses aí q eu uso?

 

Obrigado.

[GabrielFerrari 41]

#10ª Regra

 

É proibido o post de mensagens com o objetivo de evidenciar o tópico, tornando-o primeiro da lista de tópicos (up), tal como mensagens repetitivas e/ou que não condizem com o assunto do tópico em questão (flood). Tais mensagens serão excluídas e o usuário advertido por MP.

Leia as regras

[stalker_web 0]

Uhm, esse menu parece e (muito) com o Spry Collapsible pannel do dreamweaver. (menu spry)

Será q nao foi apenas usado esse recurso, e criado os links normalmente?

 

Estou até pensando em pedir um tutorial de como editar o Spry Collapsible pannel via css.

espero ter dado uma dica.

até http://forum.imasters.com.br/public/style_emoticons/default/coolio.gif