Ir para conteúdo

Arquivado

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

taniapaiva

menu css

Por , em Desenvolvimento frontend

Recommended Posts

taniapaiva    0

taniapaiva
Postado

conhecem o menu feito neste site?

http://maujor.com/tutorial/ddownmenu/horizontal.html

então, tem como eu carreçá-lo p/ cima... tipo eu para o mouse sobre About o submenu começa a partir dele para baixo... gostaria de carregar o submenu do meio ou p/ cima, tem jeito???

 

valeu

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedradegelo    3

pedradegelo
Postado

olá tania, basta você modificar os atributos da margem e posicção do css para sua preferencia.você pode colocar o valor que quiser.qualquer coisa só postá;;rstchau

Compartilhar este post

Link para o post
Compartilhar em outros sites

Everton Vilela    1

Everton Vilela
Postado

Dá uma verificada nesses links e veja se você tira suas duvidas em relação ao menu horizontal

com submenu que você quer montar.

 

List Style (Listas)

-------------------------------------------------------->

http://css.maxdesign.com.au (aqui você acha tudo)

http://www.cristalab.com/tutoriales/130/cr...s-usando-listas

http://www.maujor.com/tutorial/listtut.php

http://www.simplebits.com/notebook/2003/10...sted_lists.html

http://css.maxdesign.com.au/listutorial/index.htm

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

http://www.alistapart.com/articles/taminglists/

http://css.maxdesign.com.au/listutorial/roll04.htm#

Compartilhar este post

Link para o post
Compartilhar em outros sites

taniapaiva    0

taniapaiva
Postado

É, dei uma olhada nos sites, obrigada por terem passado tem muita coisa legal, mas o que eu queria não achei... alterar a exibição ao invés de: a partir de e para baixo eu queria a partir de e para cima!!! Se alguém descobrir... fico muito grata... pois é um site legal... e se não der certo vou ter que mudar toda estrutura... Valeu!Tania:)

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Tania,

 

Esse é o mesmo menu que eu postei aqui no fórum, só que com uma pequena modificação no css, para ao invés dos menus abrirem para baixo eles abrem para cima.

Testa e me diz se é o que você procurava.

 

A imagem utilizada aqui você encontra aqui: http://rapidshare.com/files/17589906/arrow.gif.html

 

<!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 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{	margin: 0px;	position: relative;	  padding: 0px;	  list-style: none;	  background-color: #FFFFFF;	border: 1px solid #ccc;	float:left;}ul.menubar ul.menu{	display: none;	position: absolute;	margin: 0px;	bottom: 22px;}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 hr{	width: 148px;	padding: 0px;	margin: 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 */	bottom: -1px;}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="horizontal();"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><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

taniapaiva    0

taniapaiva
Postado

Os menus estão lado a lado... e no meu caso é uma lista... um abaixo do outro... como que altera no menu... não achei... e mudando será que funciona?Valeu desde já pela ajuda!:)Tania

Tania,Esse é o mesmo menu que eu postei aqui no fórum, só que com uma pequena modificação no css, para ao invés dos menus abrirem para baixo eles abrem para cima.Testa e me diz se é o que você procurava.A imagem utilizada aqui você encontra aqui: http://rapidshare.com/files/17589906/arrow.gif.html

<!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 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{	margin: 0px;	position: relative;	  padding: 0px;	  list-style: none;	  background-color: #FFFFFF;	border: 1px solid #ccc;	float:left;}ul.menubar ul.menu{	display: none;	position: absolute;	margin: 0px;	bottom: 22px;}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 hr{	width: 148px;	padding: 0px;	margin: 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 */	bottom: -1px;}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="horizontal();"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><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

Deixa ver se eu entendi o que você quer. Em ver de criar o efeito de degraus, você quer que cada submenu abra um acima do outro, é isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

taniapaiva    0

taniapaiva
Postado

Pode até ser em cima do outro mas o que eu queria é que ele fosse para cima... ele vai p/ direita e desce eu qro q ele vá p/ direita e suba... vou colar o código aqui (eu demorei porquê o meu é dinâmico.... peguei esse que é estático para você ver)

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"><head><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: 150px; /* Width of Menu Items */	border-bottom: 1px solid #ccc;	background: #fff; /* IE6 Bug */	font-size: 100%;	}ul#primary-nav li {	position: relative;	list-style: none;	}ul#primary-nav li a {	display: block;	text-decoration: none;	color: #777;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}/* 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: 149px; /* Set 1px less than menu width */	top: 0;	}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; } /* 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.gif) right center no-repeat; }ul#primary-nav li.menuparent:hover,ul#primary-nav li.over { background-color: #f9f9f9; }ul#primary-nav li a:hover { color: #E2144A; }</style></head><body><ul id="primary-nav">  <li><a href="#">Home</a></li>  <li class="menuparent"><a href="#">Sobre --></a> 	<ul>	  <li><a href="#">História</a></li>	  <li><a href="#">Equipe</a></li>	  <li><a href="#">Escritório</a></li>	</ul>  </li>  <li class="menuparent"><a href="#">Serviços --></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="#">Managed</a></li>		</ul>	  </li>	  <li><a href="#">Domínios</a></li>	  <li><a href="#">Emails</a></li>	</ul>  </li>  <li class="menuparent"><a href="#">Fale Conosco --></a> 	<ul>	  <li><a href="#">Filiais</a></li>	  <li><a href="#">Brasil</a></li>	  <li><a href="#">Portugal</a></li>	  <li><a href="#">EUA</a></li>	</ul>  </li></ul></body></html>

Deixa ver se eu entendi o que você quer. Em ver de criar o efeito de degraus, você quer que cada submenu abra um acima do outro, é isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Pelo que entendi você quer que funcione como o código que eu postei no inicio, só que sem a barra.

 

Testa agora.

 

<!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")		{			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.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{	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 */	bottom: -1px !important;	bottom: -2px;}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();"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><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></body></html>

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