Ir para conteúdo

POWERED BY:

Arquivado

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

mestre fyoda

[Resolvido] Menu

Por , em Desenvolvimento frontend

Recommended Posts

donato    0

donato
Postado

tem os seguintes atributos:

 

a:link = link inativo

a:hover = link ativo (com o mouse em cima)

a: active = quando segura o click

a:visited = quando ja foi visitado

 

então é só você usar o elemento a ser alterado ex: li:hover

e como o silver disse ai trocar a cor do background para qual você desejar

 

precisando

 

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

mestre fyoda    1

mestre fyoda
Postado 

<html>
<head>
<style type="text/css">
.images {background:#c00; width:20px; padding:1px;} /* not part of the menu */

#outer {padding:2px 0; border:1px solid #a50; border-color:#a50 #fa5 #610 #fa5; background:#f2a057 url(grad.gif) repeat-x bottom left; margin:50px 0 100px 0;}

#point {display:table; padding:0; margin:0 auto; list-style:none; white-space:nowrap;}
#point li {display:table-cell; margin:0; padding:0;}
#point li a {float:left; font-family:arial; font-size:0.8em; height:3.1em; line-height:3.1em; letter-spacing:1px; padding:0 1em; text-decoration:none; color:#fff; background:#f2a057 url(grad.gif) repeat-x bottom left; border-right:1px solid #d60; border-left:1px solid #fb6;}
#point li a:hover, #point li a.current {background:#e93 url(down_arrow.gif) no-repeat center top; color:#fff;}
#point li a:hover b, #point li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer} 
#point li a:focus b, #point li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer} 
</style>

<!--[if IE]>
<style type="text/css">
#point {display:inline-block;}
#point {display:inline;}
#point li {float:left;}
#outer {text-align:center;}
</style>
<![endif]-->
<link rel="stylesheet" media="all" type="text/css" href="css_play.css" />
<link rel="stylesheet" media="all" type="text/css" href="menus.css" />
</head>
<body>


<div id="outer">

<ul id="point">
<li><a href="index2.html?current=one"><b>HOME</b></a></li>
<li><a href="index2.html?current=two"><b>PRODUCTS</b></a></li>
<li><a href="index2.html?current=three"><b>SERVICES</b></a></li>
<li><a class="current" href="index2.html?current=four"><b>PRIVACY</b></a></li>
<li><a href="index2.html?current=five"><b>CONTACT US</b></a></li>
<li><a href="index2.html?current=six"><b>SITE MAP</b></a></li>
</ul>
</div>

</body>

o que está de errado no meu codigo ?

Quando eu clico nao muda !

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

ao que me parece esses dois estão indenticos:

#point li a:hover b, #point li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer}
#point li a:focus b, #point li a.current b {display:block; float:left; background:transparent url(up_arrow.gif) no-repeat center bottom; cursor:pointer}

uma coisa não vejo vantagem em usar esse recurso se você vai mudar de página, qual seria a vantagem

para você?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

estilo o que a Gislene Freitas porem use HOVER do CSS mesmo

e para quando clicar use java script:

<a href="index2.html" onclick="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor='#FF9900'">LINK</a>
;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

crie uma CLASSE para cada um:

<a href="index2.html" onclick="this.className='cA';" onmouseout="this.className='cB'">LINK</a>

assim será definido tudo no CSS e não irá desalinhar ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

mestre fyoda    1

mestre fyoda
Postado 

<style>
.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(imagem/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(imagem/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(imagem/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}


</style>
<div id="maincontainer">

  <div id="topsection"><div class="innertube">   
	<ul class="glossymenu">
		<li class="current"><a href="index.html"><b>Home</b></a></li>
		<li><a href="index.html" onclick="this.className='current'"><b>CSS</b></a></li>
		<li><a href="index.html" onclick="this.className='current'"><b>Forums</b></a></li>	
		<li><a href="index.html" onclick="this.className='current'"><b>Webmaster Tools</b></a></li>	
		<li><a href="index.html" onclick="this.className='current'"><b>JavaScript</b></a></li>	
		<li><a href="index.html" onclick="this.className='current'"><b>Gallery</b></a></li>	
	</ul>
  </div></div>

Eu modifiquei o css, mas quando eu clico nao faz nada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fall    0

Fall
Postado

oq eu quis dizer q

 

a:focus {

color:xxxx

}

 

nao funciona no IE , soh nos outros browzers

 

faça como o pessoal disse, tente com js , com a:hover q pode resolver o seu caso

 

 

abraços

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