Menu na horizontal !

[Marcus Marinho 0]

Galera,

Tô precisando fazer um menu em CSS, mas na horizontal... para colocar no topo do site. Como exemplo, podemos utilizar o tuto abaixo, mas teria que ser na horizontal.... Já tentei, mas não conseguir achar nenhum.... você conhecem algum tuto ou podem me ajudar nisso por favor ?

 

http://www.maujor.com/tutorial/ddownmenu/horizontal-pt3.html

 

abraços

[hunternh 2]

Outro tópico pedindo a mesma coisa:

 

http://forum.imasters.com.br/index.php?showtopic=227276

[Giovani 104]

Depois quando a gente pede para pesquisar o pessoal ainda tem a cara de pau de chamar a gente de chato. <_< Vamos pesquisar um pouco antes de postar pessoal, por favor!

Outro tópico pedindo a mesma coisa:http://forum.imasters.com.br/index.php?showtopic=227276

[hunternh 2]

É verdade Gio, no fórum de JS umas 5 ou 6 pessoas pediram validação de radio button em tópicos diferentes, sendo que eu já havia postado uma solução, mas fazer o que, o pessoal não pesquisa.

[Eliseu SB 0]

Tem esse site que vai resolver seu problema, e mais, tem muito conteúdo e exemplos.

 

http://css.maxdesign.com.au/listamatic/

 

Espero ter ajudado, abraço!!!

[Marcus Marinho 0]

Muito obrigado a todos pelos posts !

 

Hunternh e Gio ,

Eu realmente não ví essas respostas na pesquisa. Procurei algo aqui no imasters, mas não encontrei. Gostaria de pedir desculpas caso eu tenha incomodado os senhores !

 

Mais uma vez, obrigado !

 

Marquinho

[Giovani 104]

Marcus Marinho, não precisa se desculpar.

E não se preocupe, esse recado é para todos visualizarem.

 

Se você disse que não conseguiu achar na pesquisa tudo bem.....mas tem gente que nem pesquisa.

 

Abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Marcus Marinho 0]

Beleza... e obrigado !

 

Só gostaria de esclarecer então uma dúvida. O Hunter, no outro t'ópico sobre esse tipo de menu, disse:

Esse código permite colocar quantos submenus forem necessário sem precisar alterar o css, estou aberto a sugestões para melhoria do código e simplificação espero que gostem.

Mas eu não consegui visualizar e entender aonde eu deveria adicionar. Seriam as <li> usando as respectivas classes? Se sim, no caso de retirar os submenus, seria apenas deleta-las, certo ?

 

abraços,

Marquinho

[Paulo de Tarso F. M. 24]

(...) Seriam as <li> usando as respectivas classes? Se sim, no caso de retirar os submenus, seria apenas deleta-las, certo ?

Sim, meu caro Marcus Marinho. Para adicionar um item ao menu, adicione apenas uma nova <li>. Quanto aos submenus, mesma coisa: se quiser adicionar, basta inserir uma nova <ul> dentro de uma <li>. E para remover um submenu, basta excluir essa <ul> interna, não se esquecendo de deixar a tag de fechamento </li> (é que, como será excluído um submenu, pode-se esquecer que aquele item pertence ao elemento principal e não ao submenu que você estará excluindo)...

 

Abraço!

[Marcus Marinho 0]

Opa... valeu !Eu consegui fazer o que eu queria com esse menu, mas estou tento o seguinte problema. Criei um menu, sendo que alguns itens possuem submenus e dentro dese submenu possuem mais submenus. Exemplo: Marcus -> Marcus -> Marcus. Ou seja, tenho um menu Marcus que contém um submenu Marcus que ainda têm um sub Marcus. Eu tentei incluir um submenu, mas sem ítens dentro dele. Tipo: Marcus(como menu principal) -> Vinicius.Mas está dando erro de script. Segue a mensagem:'this.getElementsBy TagName(...).0.style' é nulo Ou não é um objeto. Como se ele não achasse o "<ul>". Mas como eu não quero ítens dentro do submenu, então não coloquei. Porque isso acontece e como posso resolver?Mais uma vez, muito obrigado !abração

[Marcus Marinho 0]

Pessoal, também estou com a seguinte dúvida. Já tentei alterar o JS, o CSS e nada. Eu gostaria de, tanto no menu principla quanto em algum submenu que não tenha outros ítens dentro, também alterem a cor de fundo e o link de cinza para vermelho. Como eu posso fazer isso também?abraços

[Paulo de Tarso F. M. 24]

Meu caro Marcus Marinho, você não tem nenhum link para q possamos ver o que você realmente quer? Pq dessa maneira, fica difícil te ajudar...

 

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

[Marcus Marinho 0]

Olá... conseguir colocar na web e segue o link:

 

http://m.domaindlx.com/marcusmarinho/teste/teste.html

 

Bom, o que eu gostaria é o seguinte:

 

1) Alterar a cor do fundo, do menu "página principal" para cinza como no menu serviços quando passamos o mouse por cima do link e a cor do link de cinza para vermelho como nos submenus.

 

2) Quando eu inclui o sub menu Teste1(Que não possui ítens dentro dele), ele apresenta a seguinte mensagem de erro:

 

'this.getElementsBy TagName(...).0.style' é nulo Ou não é um objeto.

 

Como se ele não achasse o "<ul>". Mas como eu não quero ítens dentro do submenu, então não coloquei.

 

Porque isso acontece e como posso resolver?

 

3) Também gostaria de colocar a memsa configuração para os submenus teste5,teste6,teste7...

 

Segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Menu horizontal e vertical</title> <script type="text/javascript"> function vertical() {    var navItems = document.getElementById("nav").getElementsByTagName("li");        for (var i=0; i< navItems.length; i++) {       if(navItems[i].className == "submenu") {          navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}          navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#ffffff";}       }    } } function horizontal() {    var navItems = document.getElementById("barra").getElementsByTagName("li");        for (var i=0; i< navItems.length; i++) {       if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu"))       {            if(navItems[i].getElementsByTagName('ul')[0] != null)          {             navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}             navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}          }       }    } } </script> <style type="text/css"> body { font: normal 62.5% verdana; } ul.menubar {    margin: 0px;    padding: 0px;    background-color: #FFFFFF; /* IE6 Bug */    font-size: 100%;    } ul.menubar .menuvertical {    margin: 0px;    padding: 0px;    list-style: none;    background-color: #FFFFFF;    border: 1px solid #ccc;    float:left; } ul.menubar ul.menu {    display: none;    position: absolute;    margin: 0px; } ul.menubar a {    padding: 5px;    display:block;    text-decoration: none;    color: #777;    padding: 5px; } ul.menu, ul.menu ul {    margin: 0;    padding: 0;    border-bottom: 1px solid #ccc;    width: 150px; /* Width of Menu Items */    background-color: #FFFFFF; /* IE6 Bug */ } ul.menu li {    position: relative;    list-style: none;    border: 0px; }  ul.menu li a {    display: block;    text-decoration: none;    border: 1px solid #ccc;    border-bottom: 0px;    color: #777;    padding: 5px 10px 5px 5px; } /* Fix IE. Hide from IE Mac \*/ * html ul.menu li { float: left; height: 1%; } * html ul.menu li a { height: 1%; } /* End */ ul.menu ul {    position: absolute;    display: none;    left: 149px; /* Set 1px less than menu width */    top: 0px; } ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; } ul.menu li a:hover { color: #E2144A; } </style> </head> <body onload="vertical();horizontal();"> <ul id="barra" class="menubar">     <li>	<li>	<li class="menuvertical">	<a href="#">Página principal</a></li>    <li class="menuvertical"><a href="#">Serviços</a>       <ul id="nav" class="menu">        <li class="submenu"><a href="#">Teste1</a></li>        <li class="submenu"><a href="#">teste2</a>             <ul style="width: 150px; border-bottom: 1px solid #ccc; margin: 0; padding: 0; background-color: #FFFFFF">             <li><a href="#">teste3</a></li>            <li><a href="#">Software</a></li>            </ul>        </li>        <li class="submenu"><a href="#">teste4</a>             <ul style="width: 150px; border-bottom: 1px solid #ccc; margin: 0; padding: 0; background-color: #FFFFFF">             <li><a href="#">teste5</a></li>             <li><a href="#">teste6</a></li>             <li><a href="#">teste7</a></li>            </ul>        </li>         <li class="submenu"><a href="#">teste8</a>             <ul style="width: 150px; border-bottom: 1px solid #ccc; margin: 0; padding: 0; background-color: #FFFFFF">             <li><a href="#">teste9</a></li>            <li><a href="#">teste10</a></li>            </ul>        </li>      <li class="submenu"><a href="#">teste11</a>             <ul style="width: 150px; border-bottom: 1px solid #ccc; margin: 0; padding: 0; background-color: #FFFFFF">             <li><a href="#">teste12</a></li>            <li><a href="#">teste13</a></li>            <li><a href="#">teste14</a></li>            </ul>        </li>                  <li class="submenu"><a href="#">teste15</a>           <ul style="width: 150px; border-bottom: 1px solid #ccc; margin: 0; padding: 0; background-color: #FFFFFF">             <li><a href="#">teste16</a></li>             <li><a href="#">teste17</a></li>             <li><a href="#">teste18</a></li>           </ul>         </li>            </ul>    </li>      <li class="menuvertical"><a href="#">teste19</a>       <ul id="nav" class="menu">         <li><a href="#">teste20</a></li>         <li><a href="#">teste21</a></li>         <li><a href="#">teste22</a></li>       </ul>     </li>   </ul>     </body> </html>

 

 

Espero que agora, fique mais facil de me entender.. rsrsrsrsrsrs

 

 

abração e valeu mesmo !

[hunternh 2]

Remova a função vertical e a declaração da mesma na tag body para não aparecer o erro de js.Mais tarde eu passo como mudar as cores

[Marcus Marinho 0]

Ok...muito obrigado pela dica...Fico no aguardo..abração..

[hunternh 2]

Ai vai um exemplo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu horizontal</title><script type="text/javascript">//<![CDATA[function horizontal() {	var navItems = document.getElementById("barra").getElementsByTagName("li");		for (var i=0; i< navItems.length; i++) {		if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu"))		{			if(navItems[i].getElementsByTagName('ul')[0] != null)			{				navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}				navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}			}		}	}}//]]></script><style type="text/css">body { font: normal 62.5% verdana; }ul.menubar{	margin: 0;	padding: 0;	background-color: #FFFFFF; /* IE6 Bug */	font-size: 100%;}ul.menubar .menuvertical{	width: 148px;	margin: 0px;	  padding: 0px;	  list-style: none;	  background-color: #FFFFFF;	border: 1px solid #ccc;	float:left;	cursor: pointer;}ul.menubar ul.menu{	display: none;	position: absolute;	margin: 0px;}ul.menubar a{	padding: 5px;	display:block;	text-decoration: none;	color: #777;}ul.menubar li a:hover { color: #E2144A; background-color: #F0F0F0;}ul.menu,ul.menu ul{	margin: 0;	padding: 0;	border-bottom: 1px solid #ccc;	width: 150px; /* Width of Menu Items */	background-color: #FFFFFF; /* IE6 Bug */}ul.menu li{	position: relative;	list-style: none;	border: 0px;}ul.menu li hr{	width: 148px;	padding: 0px;	margin: 0px;}ul.menu li a{	border: 1px solid #ccc;	border-bottom: 0px;	padding: 5px 10px 5px 5px;}/* Fix IE. Hide from IE Mac \*/* html ul.menubar li { float: left; height: 1%; }* ul.menubar li a { height: 1%; }/* End */ul.menu ul{	position: absolute;	display: none;	left: 149px; /* Set 1px less than menu width */	top: 0px;}ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }</style></head><body onload="horizontal();"><ul id="barra" class="menubar">	<li class="menuvertical"><a href="#">Menu 1</a>		<ul id="nav2" class="menu">		  <li><a href="#">Home</a></li>				  <li class="submenu"><a href="#">About</a> 			<ul>			  <li><a href="#">History</a></li>			  <li><a href="#">Team</a></li>			  <li><a href="#">Offices</a></li>			</ul>		  </li>				  <li class="submenu"><a href="#">Services</a> 			<ul>			  <li><a href="#">Web Design</a></li>			  <li><a href="#">Internet Marketing</a></li>			  <li class="submenu"><a href="#">Hosting</a> 				<ul>				  <li><a href="#">Dedicated</a></li>						  <li class="submenu"><a href="#">Virtual</a>					<ul>					  <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="#">Shared</a></li>				  <li><a href="#">Managed</a></li>				</ul>			  </li>			  <li><a href="#">Domain Names</a></li>			  <li><a href="#">Broadband</a></li>					</ul>		  </li>		  <li class="submenu"><a href="#">Contact Us</a> 			<ul>			  <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>		</ul>	</li>	<li class="menuvertical"><a href="#">Menu 2</a></li>	<li class="menuvertical"><a href="#">Menu 3</a>		<ul id="nav3" class="menu">		  <li><a href="#">Home</a></li>				  <li class="submenu"><a href="#">About</a> 			<ul>			  <li><a href="#">History</a></li>			  <li><a href="#">Team</a></li>			  <li><a href="#">Offices</a></li>			</ul>		  </li>				  <li class="submenu"><a href="#">Services</a> 			<ul>			  <li><a href="#">Web Design</a></li>			  <li><a href="#">Internet Marketing</a></li>			  <li class="submenu"><a href="#">Hosting</a> 				<ul>				  <li><a href="#">Dedicated</a></li>						  <li class="submenu"><a href="#">Virtual</a>					<ul>					  <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="#">Shared</a></li>				  <li><a href="#">Managed</a></li>				</ul>			  </li>			  <li><a href="#">Domain Names</a></li>			  <li><a href="#">Broadband</a></li>					</ul>		  </li>		  <li class="submenu"><a href="#">Contact Us</a> 			<ul>			  <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>		</ul>	</li></ul>	</body></html>

[Marcus Marinho 0]

VAleu mesmo !Com certeza eu tenho aprendido bastante aqui... brigadão...

[Marcus Marinho 0]

Pessoal,Sei que faz tempo que pedi esta ajuda... mas devido a alguns motivos... tive que ficar um tempo afastado.....Voltei a trabalhar nisso novamente.. e notei que, quando eu vou fazer o complemento da página depois deste código todo pronto, que por sinal tá funcionando muito bem, eu vou para parte de design, os campos do menu e submenus.. ficam completamente embaralhados na tela.... Sendo assim, impossível a continuação do restante da página.... como posso resolver isso ?abraços,MArqiunho

[Paulo de Tarso F. M. 24]

Hey Marcus Marinho, não tem link não? Se não pudermos ver o problema, fica difícil te ajudar... Se o link for o mesmo que está em um outro post mais acima, tentei acessar (pelo menos aqui no micro da empresa) e apareceu:

The page cannot be displayed

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

[Marcus Marinho 0]

Não é já pronto no internet explorer... e sim.. quando estou editando no front page por exemplo... Quando eu peço para visualizar... fica ok.. mas quando eu vou para o modo de edição, ele fica todo embaraljado na pagina(modo de edição)...abraços