Ir para conteúdo

POWERED BY:

Arquivado

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

andre_guitar7

Menu Horizontal com SubMenus

Por , em Desenvolvimento frontend

Recommended Posts

pa_bruno    0

pa_bruno
Postado

eh a mesma coisa ... eh soh modificar o codigo... float left, tirar display block... mexer no position, no left, top... essas coisas... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

andre_guitar7    0

andre_guitar7
Postado

Seguinte: não passei daqui:

 

<style type="text/css">li , ul {	border: 1px solid #369;	list-style: none;	margin: 0;	padding:0;}li {	display : none;}</style><script type="text/javascript">function escondeFilhos(obj){	for (i=0; i<obj.childNodes.length; i++) {		if(obj.childNodes[i].nodeName == "LI"){			obj.childNodes[i].style.display = "none";		}	}}function visualizaFilhos(obj){	for (i=0; i<obj.childNodes.length; i++) {		if(obj.childNodes[i].nodeName == "LI"){			obj.childNodes[i].style.display = "block";		}	}}</script><ul onMouseOver="visualizaFilhos(this)" onMouseOut="escondeFilhos(this)">	Menu1	<li><a href="">Sub1Menu1</a></li>	<li><a href="">Sub1Menu2</a></li>	<li><a href="">Sub1Menu3</a></li>	<li><a href="">Sub1Menu4</a></li></ul><ul onMouseOver="visualizaFilhos(this)" onMouseOut="escondeFilhos(this)">	Menu2	<li><a href="">Sub2Menu1</a></li>	<li><a href="">Sub2Menu2</a></li>	<li><a href="">Sub2Menu3</a></li>	<li><a href="">Sub2Menu4</a></li></ul>

Se alguém tiver uma idéia pro menu ficar lado a lado... :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

logico q tem pela net... tem q saber fazer a busca, termos certos... olha, criei um aqui em casa, levando em consideração o site q te passei http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR" lang="pt-BR"><head><title>Untitled Document</title><script type="text/javascript" src="menu.js"></script><style type="text/css">body {	color: #134807;	background-color: #FFFFFF;	margin: 0;	padding: 0;	font: bold 11px Trebuchet MS;}ul {	margin: 0;	padding: 0;	list-style: none;	border-left: 1px solid #666;}ul li {	position: relative;	float: left;	width: 125px;	border: 1px solid #666;	border-right: 0;	border-left: 0;}	li ul {	position: absolute;	left: -1px;	top: 22px;	display: none;}ul li a {	display: block;	text-decoration: none;	color: #777;	padding: 3px 0 3px 22px;	border: 0;	border-right: 1px solid #666;}ul li a:hover {	padding-left: 27px;}* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }ul li a:hover {	color: #000000;	background-color: #FFCC33;}li ul li a {	padding: 3px 0 3px 22px;}li ul li a:hover {	padding-left: 27px;}li:hover ul, li.over ul {	display: block;}</style></head><body>	<ul id="menu">		<li><a href="#">Home</a></li>		<li><a href="#">Empresa</a>		<ul>			<li><a href="#">Sub-Menu 01</a></li>			<li><a href="#">Sub-Menu 02</a></li>			<li><a href="#">Sub-Menu 03</a></li>		</ul>		</li>		<li><a href="#">Serviços</a>		<ul>			<li><a href="#">Sub-Menu 01</a></li>			<li><a href="#">Sub-Menu 02</a></li>			<li><a href="#">Sub-Menu 03</a></li>			<li><a href="#">Sub-Menu 04</a></li>			<li><a href="#">Sub-Menu 05</a></li>		</ul>		</li>		<li><a href="#">Contato</a>		<ul>			<li><a href="#">Endereço</a></li>			<li><a href="#">Telefones</a></li>		</ul>		</li>	</ul></div></body></html>
menu.js

startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("menu");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace(" over", "");   }   }  } }}window.onload=startList;
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

andre_guitar7    0

andre_guitar7
Postado

:D sei fazer busca... esse menu q você postou já tinha encontrado, percebi que você mudou as cores e tal... mas não é bem isso que eu quero... meu problema é que você tem que setar o tamanho de cada componente li e ul:

 

ul li {	position: relative;	float: left;	width: 125px;	border: 1px solid #666;	border-right: 0;	border-left: 0;}

Se teu menu ou submenu é extenso ele quebra linha, <_< ... se você tem Firefox, veja isso:

 

<style type="text/css">ul.nav,.nav ul{	margin: 0;	padding: 0;	cursor: default;	list-style-type: none;	display: inline;}ul.nav{	display: table;}ul.nav>li{	display: table-cell;	position: relative;	padding: 2px 6px;}ul.nav li>ul{	display: none;	position: absolute;	max-width: 40ex;	margin-left: -6px;	margin-top: 2px;}ul.nav li:hover>ul{	display : block;}.nav ul li a{	display: block;	padding: 2px 10px;}ul.nav,.nav ul,.nav ul li a{	background-color: #fff;	color: #369;}ul.nav li:hover,.nav ul li a:hover{	background-color: #369;	color: #fff;}ul.nav li:active, .nav ul li a:active{	background-color: #036;	color: #fff;}/*Border Padrão*/.nav ul {	border: 1px solid #369;}ul.nav, .nav ul{	border: 1px solid #369;}.nav a{	text-decoration: none;}</style><ul class="nav">	<li><strong>Menu</strong>	<ul>		<li><a href=" ">Arquivo</a></li>		<li><a href=" ">Abrir</a></li>		<li><a href=" ">Salvar Como</a></li>	</ul>	</li>	<li><strong>Editar</strong>	<ul>		<li><a href=" ">Copiar</a></li>		<li><a href=" ">Colar</a></li>		<li><a href=" ">Recortar</a></li>	</ul>	</li></ul>

meu problema é que não funciona no IE... tem que ter javascript, nem esse css funciona no javascript, mas bza

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