Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

hunternh

Menu vertical e horizontal

Por , em Desenvolvimento frontend

Recommended Posts

hunternh    2

hunternh
Postado

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.

 

Se for usar o vertical, retire o código javascript do horizontal e vice-e-versa.

 

A imagem utilizada aqui pode ser baixada aqui: http://rapidshare.com/files/17589906/arrow.gif.html

 

 

Autor do código original do menu vertical : Nick Rigby - http://www.nickrigby.com/

 

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="nav" 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> <br /> <br /> <br /> <br /> <ul id="barra" class="menubar">    <li class="menuvertical"><a href="#">Menu 1</a> 	  <ul id="nav" 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="nav" 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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

O código original eu peguei daqui: http://www.maujor.com/tutorial/ddownmenu/horizontal-pt3.html.

 

Mas como não atendia todas as minhas necessidades, eu peguei a idéia, modifiquei o css, o javascript e criei a barra horizontal também. E mais na barra horizontal em vez de descer, fiz com que o menu fosse subindo, mais ou menos parecido com o botão iniciar do windows.

 

O código desse ultimo está nesse tópico: http://forum.imasters.com.br/index.php?showtopic=215435

 

Porque a pergunta Maujor?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Uma coisa Maujor, estou desenvolvendo esses menus e outros componentes em javascript para ficar mais facil o desenvolvimento, quando estiver tudo pronto eu vou postar, se quiser pode colocar na sua página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado
...

Porque a pergunta Maujor?

1-) Porque uma vez que o código não é seu, você esqueceu de citar a fonte com os devidos créditos.

Eu citarei para esclarecimento:

O autor dos códigos é Nick Rigby

O tutorial deste menu com seus códigos foi publicado no site Alistapart.

Os direitos autorais sobre o menu e códigos pertencem à: Alistapart Copyright que proibem reprodução sem permissão.

 

2-) Gostaria que você esclarecesse qual é a finalidade do seletor ul.menu li hr que você acresentou nas CSS, para que possam ser feitas as "sugestões para melhoria do código e simplificação" que você pediu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Sim para alterar a aparência, sempre vai ser necessário alterar o css, mas para inserir ou remover um novo submenu não há a necessidade de se alterar o css nem o javascript.Olá Maujor, eu posso colocar os créditos, não tem problema nenhum, eu não coloquei créditos nenhum pq não coloquei meu nome no código também, mas só uma coisa, a barra horizontal fui eu mesmo que criei. Eu esqueci de remover essa linha do css, é que eu estou desenvolvendo um com imagens e outro com a aparência do menu do windows com os separadores de blocos dos menus.Gostaria que você desse uma analisada no código e me desse algumas dicas no que eu poderia melhorar se for o caso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado
Olá Maujor, eu posso colocar os créditos,...

Não há necessidade eu já coloquei.

...eu não coloquei créditos nenhum pq não coloquei meu nome no código também. ...

Mas seu nome está no post e ele dá a entender que é seu. Por isso eu perguntei.

...Eu esqueci de remover essa linha do css, ...

Ah bom!

...Gostaria que você desse uma analisada no código e me desse algumas dicas no que eu poderia melhorar se for o caso.

Lamento mas eu não me considero com conhecimentos suficientes para aperfeiçoar este código que considero perfeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André_Oliveira    0

André_Oliveira
Postado

Bom dia! Eu sou totalmente novato em CSS, e com esse tutoriais consegui montar meu meu, mas eu tenho algumas dúvidas. Como eu mudo as cores de fundo do menu e da fonte? Qual linha do código eu tenho que alterar? Não estou conseguindo colocar as setas nas opções que existem submenus. E outra, tô fazendo um site simples no dreamweaver, e não consigo acoplar o menu corretamente no lado esquerdo do site. Como faço isso? Agradeço a ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André_Oliveira    0

André_Oliveira
Postado

Alguém pode me dar uma ajuda, pois tô precisando muito.... já li muitos tutoriais, mas não consigo fazer ele ficar na posição correta sem misturar com o texto central. O site está composto de três quadros, o superior é um banner simples, um inferior esquerdo é o pra abrigar o menu e o inferior central é a tela principal onde abre as subpáginas... Alguém pode me ajudar como consigo fazer este menu funcionar e quando clicar nos seus itens fazer abrir nesse quadro principal? Grato!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Disponibilize um link com o seu código, para podermos ver o que está acontecendo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André_Oliveira    0

André_Oliveira
Postado

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 Universo</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";}       }    } } </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: #222;    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();"> <ul id="nav" class="menu">   <li><a href="#">Home</a></li>   <li><a href="#">A Empresa</a></li>  <li><a href="#">Notícias</a></li>  <li class="submenu"><a href="#">Produtos</a>     <ul>	<li class="submenu"><a href="#">Placas</a>     <ul>                    <li><a href="#">Placas para Veículos</a></li>            <li><a href="#">Placas de Sinalização</a></li>             <li><a href="#">Placas Decorativas</a></li>           </ul>         </li>           <li><a href="#">Letreiros e Luminosos</a></li>           <li><a href="#">Artes e Logotipos</a></li>         </ul>       </li>   <li class="submenu"><a href="#">Soluções On-Line</a>     <ul>       <li><a href="#">Universo On-Line</a></li>      </ul>   </li>   <li><a href="#">Links</a></li>  <li class="submenu"><a href="#">Contato</a>     <ul>       <li><a href="#">Gerência</a></li>      <li><a href="#">Suporte</a></li>       <li><a href="#">Financeiro</a></li>       <li><a href="#">Controle de Lacres</a></li>      </ul>   </li> </ul> <br /> <br /> <br />
Eu tô tentando colocar este menu neste site que um amigo meu fez, mas não estou conseguindo.... Queria também mudar a cor dele, colocar aquela seta do tutorial, criando tipo outra página que quando redirecionasse (clicando em um dos links do menu) abrisse a nova página do lado direito. . Agredeço pela ajuda!

Compartilhar este post

Link para o post
Compartilhar em outros sites

elton.slacker    0

elton.slacker
Postado

Bom dia, coloquei uma imagem de fundo para substituir o padrão, fiz a imagem e quando fui carregar a paginá aconteceu isto menu.gif, a modificação foi feita neste lugar:

antes:

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 */

}

 

 

 

depois:

 

ul.menu,ul.menu ul { margin: 0;

padding: 0;

font-size: 16px;

border-bottom: 1px solid #ccc;

width: 400px; /* Width of Menu Items */

background-image: url(imagens/fundo.gif) /* IE6 Bug }

 

alguém podeira me ajudar, obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Manzano    0

Manzano
Postado

Boas.... Estou aprendendo como contruir com CSS e estou tentando construir uma barra de navegação horizontal com submenu horizontal tb. Procurei no site do Maujor e nos itens do fórum e não localizei. Alguém pode me dar alguma dica?

montei a barra principal e os submenus, não sei como acioná-los. Se vocês puderem me ajudar com algum link, ou tuto para que eu possa estudar, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito