Ajuda Com Menu Css

#1 rohde

Novato no fórum

Usuários
17 posts

Sexo:Não informado

Posted 20/12/2010, 16:14

Boa tarde alguem pode me ajudar?

gostaria de fazer um menu que ao passar o mouse ficasse de uma cor diferente... é possivel? tpw laranja, vermelho
ou quem saiba trocar o fundo por uma imagem de outra cor...

css

#menu {
	background: #333;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
#menu li {
	float: left;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
#menu a {
	background: #333 url("menu/images/seperator.gif") bottom right no-repeat;
	color: #ccc;
	display: block;
	float: left;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
#menu a:hover {
	background: #2580a2;
	color: #fff;
	padding-bottom: 8px;
	font-size: 100%;
	}

<ul id="menu">
		<li><a href="#" target="_self">Página Inicial</a></li>
		<li><a href="#" target="_self">Agenda</a></li>
		<li><a href="#" target="_self">Fotos</a></li>
		<li><a href="#" target="_self">Equipe</a></li>
		<li><a href="#" target="_self">Promoções</a></li>
		<li><a href="#" target="_self">Contato</a></li>
		</ul>

aguardo ajuda de vcs

abracos

#2 Leocarpo

12 Horas

Usuários
160 posts

Sexo:Masculino
Localidade:Angola - Luanda
Interesses:Programação,
Padrões web.
Negócios.

Posted 20/12/2010, 17:01

Ola amigo .

Ai está um modelo de menú com html e css.

<html>
<head>
<title>Menu_com_CSS
</title>
</head>

<style type="text/css">

*{list-style:none;text-decoration:none;}

ul li {display:inline;margin:5px;font-size:20px;}

ul{background:#ccc;width:350px;height:30px}

li a:hover{background:orange;}

</style>

<body>

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Sobre</a></li>
</ul>

</body>
</html>

É só salvar e veras o efeito.

Espero o ter ajudado.
Voce pode alterar tudo isto e free

O mundo é feito de teórias, as com maior
impacto é que são válidas,e aplicadas nas nossas vidas.
9033 lab

#3 rohde

Novato no fórum

Usuários
17 posts

Sexo:Não informado

Posted 22/12/2010, 08:20

Isso eu consegui fazer :X

Queria que cada link ficasse com uma cor diferente....

ao passar mouse sobre Home, ficasse vermelho
... contato, verde
... sobre, amarelo...

Ola amigo .

Ai está um modelo de menú com html e css.

<html>
<head>
<title>Menu_com_CSS
</title>
</head>

<style type="text/css">

*{list-style:none;text-decoration:none;}

ul li {display:inline;margin:5px;font-size:20px;}

ul{background:#ccc;width:350px;height:30px}

li a:hover{background:orange;}

</style>

<body>

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Sobre</a></li>
</ul>

</body>
</html>

É só salvar e veras o efeito.

Espero o ter ajudado.
Voce pode alterar tudo isto e free

#4 webbz

Novato no fórum

Usuários
20 posts

Sexo:Masculino
Localidade:Curitiba
Interesses:Musica - Futebol - Design

Posted 22/12/2010, 22:29

Isso eu consegui fazer :X

Queria que cada link ficasse com uma cor diferente....

ao passar mouse sobre Home, ficasse vermelho
... contato, verde
... sobre, amarelo...

Para fazer isso usando CSS voce vai precisar criar uma classe para cada item do menu.
Ex:


...
<li><a href="#" class="itemGreen" target="_self">Home</a></li>
<li><a href="#" class="itemRed" target="_self">Contato</a></li>
...

E no CSS assim:


a { color:#000000; }

a.itemGreen:hover { color:#00FF00; }
a.itemRed:hover { color:#FF0000; }

Nesse caso, os links serão pretos, mas quando voce passar o mouse por cima, ele ficará cada um com a cor respectiva da sua classe.
Boa sorte.

Edição feita por: webbz, 22/12/2010, 22:30.

#5 rohde

Novato no fórum

Usuários
17 posts

Sexo:Não informado

Posted 22/12/2010, 23:19

webbz, era isso mesmo que precisava!!!!

MUITÍSSIMO OBRIGADO!

Isso eu consegui fazer :X

Queria que cada link ficasse com uma cor diferente....

ao passar mouse sobre Home, ficasse vermelho
... contato, verde
... sobre, amarelo...

Para fazer isso usando CSS voce vai precisar criar uma classe para cada item do menu.
Ex:
...
<li><a href="#" class="itemGreen" target="_self">Home</a></li>
<li><a href="#" class="itemRed" target="_self">Contato</a></li>
...
E no CSS assim:
a { color:#000000; }

a.itemGreen:hover { color:#00FF00; }
a.itemRed:hover { color:#FF0000; }
Nesse caso, os links serão pretos, mas quando voce passar o mouse por cima, ele ficará cada um com a cor respectiva da sua classe.
Boa sorte.

#6 Ayrlonn Galvão

Turista

Usuários
27 posts

Sexo:Masculino
Localidade:Manaus - AM

Posted 05/02/2011, 17:23

Pow vlw, tambem tava com essa duvida, otima resposta...

Hospedagem de Sites | Registro de Domínio | Blog em WordPress
Hospedagem de Site apartir de R$9,90 e Registro de Domínio Internacional por R$24,90
Tudo sobre ganhar dinheiro navegando na internet!
Cadastre-se no NeoBux, o melhor PTC! | Cadastre-se no OnBux, um PTC Inovador!

#1 rohde

#2 Leocarpo

#3 rohde

#4 webbz

#5 rohde

#6 Ayrlonn Galvão

1 user(s) are reading this topic

Entrar