Ir para conteúdo

POWERED BY:

Arquivado

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

juniordocpd

Menu com CSS e HTML

Por , em Desenvolvimento frontend

Recommended Posts

juniordocpd    0

juniordocpd
Postado

Fala aí pessoal do fórum, galera que manja do CSS....

 

Tudo tranquilo aí com todo mundo?!

 

 

Estou com um problema e gostaria da uma orientação de vocês.

Estou querendo fazendo um menu utilizando apenas CSS e HTML. O princípio do menu é utilizando listas (os comandos UL e IL do HTML). E a parte vizual e tudo mais é por conta do CSS. O menu que estou fazendo é igual a esse óh: http://www.maujor.com/tutorial/ddownmenu/horizontal-pt2.html

 

Até aí tudo bem, fiz funcionar tranquilamente. Só que o menu aí em cima, só mostra com um subnível a partir da raiz.

O menu tem acima tem essa estrutura:

 

:HOME:ABOUT  :.... History  :.... Team  :.... Offices:SERVICES  :.... Web Design  :.... Internet Marketing  :.... Hosting  :.... Domain Names  :.... Broadband:CONTACT US  :.... United Kingdom  :.... France  :.... USA  :.... Australia

Desculpa colocar como code, mais é que estava cortando os espaços... rs...

 

 

Então, como eu disse, até aqui tudo bem, só que o eu quero acrestentar um nível a mais de submenus, deixanso o meu menu, por exemplo, assim:

 

:HOME:ABOUT  :.... History  :.... Team  :.... Offices:SERVICES  :.... Web Design  :.... Internet Marketing  :.... Hosting  :.... Domain Names		  :.... UOL		  :.... LOCALHOST  :.... Broadband:CONTACT US  :.... United Kingdom  :.... France  :.... USA  :.... Australia

Reparem que no submenu de nível 1 "Domain Names", temos dois submenus de nível 2 "UOL" e "LOCALHOST".

 

 

Só que não está funcionando, eu consigo preparar o CSS ou para o tipo de menu com apenas um subnível ou para o de 2 subníveis... isso quer dizer que ele aplica o meu css para apenas um nível, se for para o nível 2, ele não vai aplicar nos menus de nível 1, vai aparecer tudo um embaixo do outro, se for para o nível 1, os de nível 2 vão aparecer como se fossem apenas de nível 1.

 

vou colocar aqui os códigos php e css, tudo bem?!

 

INDEX.PHP

<!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" lang="pt-br" xml:lang="pt-br"><head><script type="text/javascript"></script>  startList = function() {  if (document.all&&document.getElementById) {  navRoot = document.getElementById("nav");  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;<style type="text/css">@import "style2.css";</style></head><body> <div id="Menu01">	<ul> 	  <li><a href="#">Home</a></li> 	  <li><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><a href="#">Services</a> 		<ul> 		  <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>				<ul>					<li><a href="#">UOL</a></li>					<li><a href="#">LOCALHOST</a></li>							</ul>	  		  </li> 		  <li><a href="#">Broadband</a></li> 		</ul> 	  </li> 	  <li><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> </div></body></html>

 

E os CSS, eu tenho que fazer assim.

 

OU assim para os de nível 1:

 

style2.css

body {	font: normal 11px verdana;	}#Menu01 ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;	}#Menu01 ul li {	position: relative;	}	#Menu01 ul li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}#Menu01 ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}#Menu01 * html ul li { float: left; height: 1%; }#Menu01 * html ul li a { height: 1%; }#Menu01 ul li a:hover { color: #E2144A; background: #f9f9f9; }		#Menu01 li ul li a { padding: 2px 5px; }		#Menu01 li:hover ul, li.over ul { display: block; }

 

Ou então, assim para os de nível 2

 

style2.css

body {	font: normal 11px verdana;	}#Menu01 ul{	margin: 0;	padding: 0;	list-style: none;	width: 150px; 	border-bottom: 1px solid #ccc;	}#Menu01 ul li ul li{	position: relative;	}#Menu01 ul li ul li ul {	position: absolute;	left: 149px;	top: 0;	display: none;	}#Menu01 ul li ul li ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}#Menu01 * html ul li ul li ul li { float: left; height: 1%; }#Menu01 * html ul li ul li ul li a { height: 1%; }#Menu01 ul li ul li ul li a:hover { color: #E2144A; background: #f9f9f9; }#Menu01 ul li ul li ul li a { padding: 2px 5px; }#Menu01 ul li ul li:hover ul, li.over ul { display: block; }

 

Até coloquei uma DIV com o nome "#Menu01" para ver se funcionava, mas não mudou em nada. Realmente precisa dessa div?

 

Eu acho que tenho uma noção do que possa estar acontecendo. Imagino que quando aplica um CSS do tipo, por exemplo, "#Menu01 ul li { }".

 

Ele acaba pegando tudo o que tem "ul li", nesta sequência. Como os submenus de nível 2, tem "ul li ul li ul li a", ele acaba aplicando, porque "ul li" está contido em "ul li ul li ul li a".

 

Seria isso mesmo? Tem algum fundamento no que eu estoupensando?

 

 

Poderiam me ajudar aí pessoal?!

 

 

Fico no aguardo, mas agradeço antecipadamente por ajudarem com a minha ignorância. http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

 

 

Valeu....

Compartilhar este post

Link para o post
Compartilhar em outros sites

juniordocpd    0

juniordocpd
Postado

Segue esse exemplo que ta bem explicado.Maujor

É justamente esse tutorial que eu estou seguindo, mas estou com dúvidas na criação do CSS.Mas achei um exemplo parecido aqui no fórum com o que eu preciso ( http://forum.imasters.com.br/index.php?sho...mp;#entry555971 ), vou dar uma olhada mais a fundo, daí se aparecer outras dúvidas eu coloco aqui... Valeu galera.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

juniordocpd, este link que você passou é muito bom, por isso está pendurado aqui no fórum!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Mas voltando ao link do maujor, você leu a segunda parte do artigo?

O menu está bem do jeitinho que você quer! ;)

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

juniordocpd    0

juniordocpd
Postado

Eu li gio, eu lí sim...

 

Mas é o seguinte, eu queria um menu com um segundo nível de menu, o do maujor, só está com um nível após a raiz.

 

Eu queria dessa forma:

 

:HOME:ABOUT  :.... History  :.... Team  :.... Offices:SERVICES  :.... Web Design  :.... Internet Marketing  :.... Hosting  :.... Domain Names		  :.... UOL		  :.... LOCALHOST  :.... Broadband:CONTACT US  :.... United Kingdom  :.... France  :.... USA  :.... Australia
Tipo, ali no Domain Names, inserir um outro submenu, com os valores UOL e LOCALHOST, claro, esse menu é meramente ilustrativo, apenas afim de aprender, depois eu adaptaria a minha aplicação. Mas eu apanhei mesmo foi para configurar o CSS. Eu vi sim a parte 2 do tutorial, mas me enrolei todo na hora que eu inseri um "UL" e um "LI" a mais... daí, foi como eu falei, ou eu fazia as opções "UOL" e "LOCALHOST" aparecer como eu queria e "zicava" o restante, eu eu fazia as opções "History", "Team", "Offices", e outras opções de nível 1, aparecer e o "UOL" e o "LOCALHOST" ir no embalo também... ou eu fazia um ou outro, nunca os dois juntos. Se você rodar o código que eu coloquei aí, alterando apenas o Código css, rodando uma vez com um e depois com outro, você vai ver o pau que tá dando.

 

Vou dar uma estudada no link aí que eu passei, acho que é examente o que eu estou precisando. Vou ver como ele consegui fazer com o CSS.

 

 

Valeu aí mais uma vez gio. Obrigado aí a força.

 

E Obrigado também a todo mundo que leu aqui.

 

 

Falow

 

 

Opa, corrigindo aí. Esse menu eu não tinha visto não, e o título dele é part3... eu só tinha visto o parte 2... Realmente ".gio" esse é o resultado que eu estou querendo... Vou mais uma vez dar uma olhada em como ele fez esse menu, mas eu não tinha visto mesmo não cara... Desculpa, mas é que no artigo está falando só de uma parte 2, não de uma parte 3 também... rs...

 

 

Abraço!

 

 

 

 

 

 

Desculpem novamente, mas só aproveitando, alguém poderia me explicar isso:

 

ul#primary-nav li:hover ul ul,ul#primary-nav li:hover ul ul ul,ul#primary-nav li.over ul ul,ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
Não entendi muito bem o que está fazendo, quer dizer, o "display: none;" isso eu entendi, mas são esse monte de vírgulas que me confunde... É apenas continuação do comando? Ele está se referindo a Hierarquia de como os comandos estão dispostos na página?

 

ul - li - ul - ul - ul - li ?????

 

Não entendi... é a hierarquia? esse monte de Hover e Over tá me confundindo também!

 

 

Valeu mais uma vez galera!

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