Jump to content

Archived

This topic is now archived and is closed to further replies.

Marcos Moleiro

Menu com submenus na Horizontal

Recommended Posts

gostei muito dessas dicas http://forum.imasters.com.br/public/style_emoticons/default/clap.gif , gostaria de receber os códigos em um arquivo .zip para uso, pois sei que será um para a página principal e o outro para os códigos css.

 

Era bem isso que estava buscando (menu horizontal), o menu vertical achei em vários lugares, mas esse foi especial.

O que pretendo fazer:

No menu principal serão as letras do alfabeto (A, B, C,....Z)

E a partir das letras abrirá opção de quase 15 palavras.

E então clicando na palavra virá o texto.

(são pequenas mensagens entre 5 e 10 linhas).

 

Uma dúvida:

O resultado do link das palavras é melhor que seja em frame (duas frames: uma para o menu, outra para o resultado do link do menu)?

Ou é melhor repetir o código do menu em todas as páginas de significados?

E se essa última for correta, tem algum meio de ter uma página externa com os códigos para o menu, e só escrever um código para puxar essa página (algo em java ou coisa assim?)

 

obrigado.

corujaverde2004@yahoo.com.br

Share this post


Link to post
Share on other sites

Opa galera, tudo certo?!Tenho uma dúvida... Quero manter a cor do menu enquanto o ponteiro está no submenu.SE eu tiver um menu de cada cor. Por exemploPrincipal serviços contato-> serviços |_> hospedagem |_> desenvolvimentoe assim por diante.quando o mouse estiver no serviços ele terá uma cor laranja, quando em principal azul, até aí tudo bem.mas quando no caso do menu serviços, enquanto o mouse estiver em cima dele com o mouse over falando que a cor é laranja, abrirá o submenu. Arrastando o ponteiro do mouse para um dos sub-menus, o menu serviço não estará mais com a característica "hover".MInha pergunta é: Gostaria de saber se tem como quando o mouse estiver fora do menu e sim no sub menu, a cor laranja continuar sendo adotada pelo menu serviços?

Share this post


Link to post
Share on other sites

Não vou afirmar.....mas acho q se colocar umas classes deve funcionar.

Quero deixar claro, não sei, nunca fiz.

 

Dê uma boa estudada em menus!!!

 

[]'s

Share this post


Link to post
Share on other sites

já olhei e não tem nenhum efeito que quero lá, inclusive não foi só lá que procurei.

 

creio que se der, só com js, não?

 

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);

uso esse js.. alguém saberia me explicar?!

 

cara, mesmo por que css não "pensa". não é uma linguagem, se for pensar bem acho que se rolar é no js, não?

 

^^ só que não tenho idéia do como deve ser.. rsss :P

 

abs

Share this post


Link to post
Share on other sites

Beleza, mas... só mais uma questão..tem ligação com o js se eu quiser fazer com que cada menu tenha um estilo diferente?por exemplo:menu 1bordas UL azuis claras, bordas li azul escuro, fundo branco.menu2bordas UL laranja claras, bordas li laranja escuro, fundo branco.saco?estou tentando fazer, mas estou com dificuldades para que abra o terceiro nível do menu ;/ no ie funciona, mas no ff não aparece nada..

Share this post


Link to post
Share on other sites

Descobri que não é necessário alterar nada no JS, apenas no css. :) consegui definir por cores cada seção, se alguém quiser depois posto aqui a solulção..

 

agora só uma pergunta: atravéz do código CSS abaixo, tem como eu definir uma largura específica para cada menu de primeiro nível?

 

/* menu-horiz.css */body {	margin: 0;	background:#FFFFCC;}#nav  {	float: left;	  width: auto;	list-style: none;	background: #727172;	  padding: 0;	margin:0px;	  color: #fff;	  font:  12px/16px Verdana, Arial, Helvetica, sans-serif;}#nav ul  {	float: left;	  width: auto;	list-style: none;	background: #fff;	  padding: 0;	margin: 0 0 1em 0;	  font:  12px/16px Verdana, Arial, Helvetica, sans-serif;}#nav a {	display: block;	width: 10em;	w\idth: 6em;	text-decoration: none;	padding: 0.25em 1.9em;	  color: #fff; /* cor da fonte do primeiro nível*/	  font:  12px/16px Verdana, Arial, Helvetica, sans-serif;	  border-left:1px solid #a5a2a5; /*barrinhas laterais do menu*/	  border-right:1px solid #414142;}/*====LARANJA=====*/#nav a.laranja { /*linkado*/	color:#000;}#nav a.laranja:hover { /*mouse em cima*/	background:#FF9900;	color:#000;}#nav a.laranjaseta { /*seta apontando pra direita*/	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#fff;}#nav a.laranjaseta:hover { /*seta apontando pra baixo*/	background:#FF9900 url(rightarrow2.gif) 8% 50% no-repeat;	color:#fff;	font-weight:bold;}#nav a.laranjasetadois{ /*seta apontando pra direita*/	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}#nav a.laranjasetadois:hover { /*seta apontando pra baixo*/	background:#FF9900 url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;	font-weight:bold;}/*====Azul=====*/#nav a.azul { /*linkado*/	color:#000;}#nav a.azul:hover {	background:#00CCFF;	color:#000;}#nav a.azulseta { 	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#fff;}#nav a.azulseta:hover {	background:#00CCFF url(rightarrow2.gif) 8% 50% no-repeat;	color:#fff;	font-weight:bold;}#nav a.azulseta2 { 	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}#nav a.azulseta2:hover {	background:#00CCFF url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;	font-weight:bold;}/*====SEGUNDA=====*/#nav li {	float: left;		padding: 0;	width: 10em;	 }#nav li ul  {	position: absolute;	left: -999em;	  width: 14em;	w\idth: 13em; 	font-weight: normal;	margin: 0;}#nav li li {	width: 13em;}#nav li ul a {	width: 13em;	w\idth: 9.3em; 	border:0px;}/*====Laranja=====*/#nav .laranja li { /*bordas das sub-selçoes LI*/	border:1px solid #FFCC99;}/*====Azul=====*/#nav .azul li { /*bordas das sub-selçoes LI*/	border:1px solid #00CCFF;}/*====TERCEIRA=====*/#nav li ul ul {	margin: -1.75em 0 0 13em; }#nav li:hover ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {	left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul  {	left: auto;}/*====Laranja=====*/#nav  li.laranja ul, #nav  li li.laranja ul, #nav  li li li.laranja ul { /*bordas das seções UL*/	border:4px solid #FFCC99;}/*====Azul=====*/#nav li.azul ul, #nav li li.azul ul, #nav li li li.azul ul { /*bordas das seções UL*/	border:4px solid #00CCFF;}/*====QUARTA=====*/#nav li:hover, #nav li.sfhover {	}/*====Laranja=====*/#nav li.laranja:hover, #nav li.laranjasetadois:hover { /*Cor do mouse out no dropdown*/	background: #ff9900;}/*====Azul=====*/#nav li.azul:hover {	background: #00CCFF;}

Share this post


Link to post
Share on other sites

opa. esse meu codigo ai em cima tá muito bagunçado.

 

o menu é esse

 

e o css está aqui bem organizado: estilo_menu.css

 

só uma coisa, utilizei este menu para implementar um software, entretanto, quandovisto no IE, o menu pisca :wacko: isso mesmo, piscaa http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

quando eu mudo, por exemplo, o mouse entra em uma área que tem 1px de borda ele pisca como se repensasse e reabrisse o menu, dai continuo o percurso do mouse, ele sai do 1px, pisca novamente, entra em outra área, pisca denovo..

 

to de saco cheio ¬¬

 

sabem me ajudar? isso só no IE, no ff ta perfeito, inclusive, no ie ele não fica com o hover de cor selecionada quando você tira o mouse de cima de um menu e vai para a lista que abre deste msmo menu, enquanto no ff funciona =~~

 

saco? da uma analizada nesse ae no ff e no ie, desculpe não poder postar o "pisca pisca". mas deu pra entender ?

 

 

abs!

Share this post


Link to post
Share on other sites

Pessoal, tô meio sumido, cheguei muito tarde nesse tópico e não deu pra ler tudo ainda, mas talvez minha série sobre menus css dropdown ajude vocês.

 

Tá bem simples. É só seguir o passo-a-passo que não tem erro.

Share this post


Link to post
Share on other sites

opa micox. :)~o meu problema é com um "bug" com o ie, pois antes de eu implementar este menu no sistema ele funcionava corretamente, como você pode ver no link que passei acima.Acho que pode estar em conflito com alguma coisa, o js, o cod, não faço idéia, estou aqui o dia inteiro revisando tudo e nada :/inclusive, teu menu ta com algum problema no FF e IE, ta não?:Pabs!!!! e parabéns. teu blog, já havia entrado em uma outra oportunidade, e gostei bastante dele! :)

Share this post


Link to post
Share on other sites

Opa. Sobre meu menu, eu testei aqui e não vi nada. Estranho. Se você puder me ajudar depois deixando um exemplo (link) dele com bug online. Aí ia ficar fácil de eu ver o bug http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Agora com relação ao seu menu. O bug no IE é com relação ao hover que não funciona, com relação à cores ou com relação ao lance de piscar (já ouvi falar sobre esse problema de piscar)??

Share this post


Link to post
Share on other sites

http://lecowd.com.br/menu/menu.html

 

 

gravei um vídeo disso. note que quando eu saio de uma área <a> e vou para outra área acontece isso..

 

abs!:D

 

 

descobri o que esta aconcendo com meu menu.

 

segue um tópico que já me adiantei a postar na seção de js:

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

 

:/

Share this post


Link to post
Share on other sites

Oi pessoal! bem eu sou nova por aqui.Eu criei um menu drop down corretamente, IE 7.0. Funcionu lgl, com js e tudo. Agora o problema começa: Mostrei para minha amiga ( IE 6.0) e ela disse que os sub menus não apareciam.Desativei o java e atualizei o site, mas incrivelmente o menu continuava a funcionar para mim. Ai eu fiquei confusa...Queria que me respodessem como eu posso arrumar isso, se vocês acham que problema é o css que não é compativel com o IE 6...Obrigada ^^

Share this post


Link to post
Share on other sites

Primeiro queria parabenizar a boa vontade de todo mundo por ajudar uns aos outros! assim q funciona!Com base em tudo vi, fiz um menu horizontal porem logo a baixo desse menu existe um combo e quando o meu é expandido ele fica por baixo do combo, alguem sabe como arrumar? ja coloquei z-index:3; mas nada ocorreu!se alguem tiver uma solução , agradeço muito!

Share this post


Link to post
Share on other sites

Então consegui monta o meu tranquilo com ajuda de vcs poren ele não abre os submenus no IE alguem sabe o que pode ser no FF ta normal não da erro algum mais no IE nun abre .Alguem pode da uma força

Share this post


Link to post
Share on other sites

Olá!!

 

Peguei um exemplo de menu no site do Maurício Samy Silva (http://www.maujor.com/tutorial/ddownmenu-a.php) e adaptei para ficar na horizontal. Ficou bom, mas gostaria que somente os submenus ficassem na vertical mas não estou conseguindo... se alguém puder me ajudar desde já meu muito obrigado!!

 

Marcos

 

<!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>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {

	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}

}
window.onload = IEHoverPseudo;

</script>

<style type="text/css">

body { font: normal 62.5% verdana; }

ul#primary-nav,
ul#primary-nav ul {
	margin: 0;
	padding: 0;
/*	width: 600px; */ /* Width of Menu Items */
	border-bottom: 0px; solid #ccc;
	background: #fff;   /* IE6 Bug */
/*	background: blue;  /* IE6 Bug */ cor do fundo dos menus
	font-size: 100%;
	}


ul#primary-nav li {
	position: relative;
	list-style: none;
	display: inline;
		float:left;
	}

ul#primary-nav li a {
	display: block;
	text-decoration: none;
		float:left;
	color: #777;
/*	color: red;   cor das letras do menu */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 1;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

ul#primary-nav ul {
	position: absolute;
	display: none;
	left: 0px;   /* Set 1px less than menu width */
	top: 23px;
	}

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

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; top: 17px;} /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; } 
/* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */

ul#primary-nav li a:hover { color: #E2144A;  }
/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */

</style>
</head>
<body>
<h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1>
<h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br>
<ul id="primary-nav">
  <li><a href="#">Home</a></li>

  <li class="menuparent"><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="menuparent"><a href="#">Services   </a> 
	<ul>
	  <li><a href="#">Web Design</a></li>

	  <li><a href="#">Internet Marketing</a></li>
	  <li class="menuparent"><a href="#">Hosting   </a> 
		<ul>
		  <li><a href="#">Dedicated</a></li>

		  <li><a href="#">Virtual</a></li>
		  <li><a href="#">Shared</a></li>

		  <li><a href="http://www.uem.br" target="_blank">Managed</a></li>
		</ul>
	  </li>
	  <li><a href="#">Domain Names</a></li>
	  <li><a href="#">Broadband</a></li>

	</ul>
  </li>

  <li class="menuparent"><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>
</body>
</html>

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.