6 replies to this topic

[DanDan]

Pessoal, me lembro de um site por ai que fazia esses menus, como desse site: http://www.ibta.com.br/saopaulo/

percebam quando vc passa o mouse pelas seções de graduação, pós-graduação

queria saber como criar eles, ou se tem algum topico aqui sobre o assunto... eu to pesquisando mais nao to achando nada, até por não saber o nome correto do mesmo.

quem puder me ajudar eu agradeço

[bdoweb]

dá uma olhada aqui cara ....

http://www.maujor.co...l/ddownmenu.php

[DanDan]

ae valeu, obrigado

[norules]

ta para fazer isso no fireworks mano

[Mateus Pontes]

Da pra faze um menu igual do IBTA com javascript fica bem legal também, claro que com CSS também fica muito legal.

Falow

[DanDan]

usei a dica do bdoweb para criar um menu desses...

li o artigo, mais tenho pouco conhecimento das propriedades do CSS

vou colar o que eu fiz para a minha web
http://www.leaodefar...om.br/teste.asp

Construção do Menu

<ul id="nav">
  <li><a href="#">Principal</a></li>
  <ul id="nav">
	<li><a href="#">A Escola</a> 
	<li><a href="#">History</a></li>
	<li><a href="#">Team</a></li>
	<li><a href="#">Offices</a></li>
	<li><a href="#">Atendimento</a> 
  </ul>
  <li><a href="#">Ensino Básico</a> 
		  <ul id="nav">
			<li><a href="#">History</a></li>
			<li><a href="#">Team</a></li>
			<li><a href="#">Offices</a></li>
		  </ul>
  </li>
  <li><a href="#">Cursos Técnicos</a> 
		  <ul id="nav">
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Internet Marketing</a></li>
			<li><a href="#">Hosting</a></li>
			<li><a href="#">Domain Names</a></li>
			<li><a href="#">Broadband</a></li>
		  </ul>
  </li>
  <li><a href="#">Cursos Superiores</a> 
		  <ul id="nav">
			<li><a href="#">United Kingdom</a></li>
			<li><a href="#">France</a></li>
			<li><a href="#">USA</a></li>
			<li><a href="#">Australia</a></li>
		  </ul>
		</li>
<li><a href="#">Atendimento</a> 
		  </li>
	  </ul>

JAVASCRIPT

<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

CSS CODE

#nav  {
	float: left;
	  width: auto;
	
	list-style: none;
	background: #EEE;
	  padding: 0;
	border: 1px solid #FFF;
	border-width: 1px 0;
	
	  color: #FFFFFF;	 
	  font: 10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav ul  {
	float: left;
	  width: 100%;
	list-style: none;
	background: #EEE;
	  padding: 0;
	border: 0px solid #00599C; #eda;
	border-width: 0px 0;
	
	  color: #FFFFFF;	 
	  font:  10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav a {
	display: block;
	width: 8em;			 
	w\idth: 15em;			  
	color: #7C6240;
	text-decoration: none;
	padding: 0.15em 2em;
	  border: 1px solid #FFF;
	  border-right-color: #CCC; 
	  border-bottom-color: #ccc;
	  color: #FFFFFF;
	  font: 10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav a:hover {
	background: #00599C;
}

#nav a.daddy { 
	background: url(rightarrow2.gif) 96% 50% no-repeat;
}

#nav a.daddy:hover {
	background: #00599; url(rightarrow2.gif) 96% 50% no-repeat;
}

#nav a.daddy1 {
	background: url(downarrow2.gif) 8% 50% no-repeat;
}

#nav a.daddy1:hover {
	background: #00599C; url(downarrow2.gif) 8% 50% no-repeat;
}

#nav li {
	float: left;	
	padding: 0;
	width: 8em;	 
}

#nav li ul  {
	position: absolute;
	left: -999em;
	height: auto;
	  width: 14.2em;
	w\idth: 13.2em; 
	font-weight: normal;
	border-width: 1px; 
	margin: 0;
	background: #00599C;
}

#nav li li {
	width: 13.2em;
}

#nav li ul a {
	width: 13.2em;
	w\idth: 18em; 
}

#nav li ul ul {
	margin: -1.75em 0 0 13.2em; 
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul  {
	left: auto;
	background: #00599C;
}


#nav li:hover, #nav li.sfhover {
	background: #00599C; 
}

queria deixar o menu estilo o que ta na tabela de cima, mais como disse nao tenho conhecimento das propriedades do CSS, postei os codigos com as poucas modificações dele

se alguem me ajudar, ensina ai as mudanças, desde já agradeço

ah e uma coisa, alinhar o CSS foi outra coisa que eu nao consegui...

grato

[Regis-SP]

Aqui tem o que vc quer:

www.opencube.com

Uso esse sistema pra gerar meus menus. É excelente!!!!!
Ele Salva como Java Script, até mesmo em arquivo externo *.js