Ir para conteúdo

POWERED BY:

Arquivado

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

Brunolc

Como fazer este menu

Por , em Desenvolvimento frontend

Recommended Posts

Brunolc    0

Brunolc
Postado

Ei gente estou com um problema de fazer um menu ,quero fazer um menu de quando passar o mouse por cima dele troque o fundo um menu normal como o do globo esporte link eu estou fazendo o menu só que a div arrebenta ela aumenta o tamanho para lateral como fazer para a div ficar no tamanho certo? :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Bom Dia Brunolc!

O menu que você se refere é este lateral da página do globoesporte? Passa o link para o pessoal ver como você esta fazendo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Até Mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tem muito tópico aqui no fórum ensinando a fazer todo o tipo de menus...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Com o #INSIDE# falou, existem muitos tópicos aqui no fórum sobre esse assunto.

Pesquise.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Brunolc    0

Brunolc
Postado

Como eu disse eu fiz só que as divs estão aumentando para lateral quando passo o mouse por cima e estora o tamanho normal

Compartilhar este post

Link para o post
Compartilhar em outros sites

Brunolc    0

Brunolc
Postado

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><style type="text/css">body{margin:0 auto; padding:0; text-align:center;}#bruno{width:150px;margin:0;background-color:black;}a:link.teste, a:visited.teste, a:active.teste {background: "Green";padding:5px;display:"block";color:"white";text-decoration:"none";}a:link.eu, a:visited.eu, a:active.eu {background: "Green";padding:5px;display:"block";color:"white";text-decoration:"none";}a:hover.teste{background:"blue";padding:5px;display:"block";}a:hover.eu{background:"green";padding:5px;display:"block";}</style><title>Documento sem título</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><div id="bruno"><table width="250" height="50"> <tr> <td> <a href="#" class="teste">Home</a> </td> </tr> <tr> <td><div align="center"> <h3><font face="Arial, Helvetica, sans-serif"><strong><a href="#" class="eu">Bruno</a></strong></font></h3> </div></td> </tr></table></body></html>

Eu estava colcando os paddings diferente e tava dando tilte mais assim funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ze_violeiro    0

ze_violeiro
Postado

ta errado tem que ser algo como

 

<ul id="menu">					<li><a href="#">HOME</a></li>					<li><a href="#">SHOWS</a></li>					<li><a href="#">TEATRO</a></li>					<li><a href="#">CINEMA</a></li>					<li><a href="#">ESPORTES</a></li>					<li><a href="#">FESTAS</a></li>					<li></li>					<li><a href="#">GUIA</a></li>					<li><a href="#">FOTOS</a></li>					<li></li>					<li><a href="#">CADASTRO</a></li>					<li><a href="#">DUVIDAS</a></li>					<li><a href="#">CONTATO</a></li>					<li><a href="#">QUEM SOMOS</a></li>	</ul>

procura usar listas para fazer o menu

 

#menu {	margin: 0 0 10px 0;	padding: 0;	width: 135px;	list-style: none;}#menu li {	margin 0;	padding: 1px;	min-height: 16px;	border-bottom: 1px inset #eeeeee;}#menu li a {	display: block;	padding: 2px 0px 2px 8px;	color: #cccccc;	font-weight: bold;	font-size: 10px;	letter-spacing: 4px;	text-decoration: none;	width: 125px;}/*aqui que ta o efeito que tu quer*/#menu li a:hover {	color: #eeeeee;	background: #444444;	font-weight: bold;	font-size: 10px;	letter-spacing: 4px;	text-decoration: none;}

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