Jump to content
acao

[Resolvido] Alterar a cor do elemento da nav

Recommended Posts

acao

boas

necessito ajuda em ;

ao selecionar uma pagina na nav e que o elemento correspondente a essa pagina mude de cor.

já consigo que mude de cor ao passar o rato porcima.

cod:

<nav>
		<div id="menubar">
			<ul id="menu">
				<li class="selected"><a href="Index.html">Home</a></li>
				<li><a href="#">Ilustracao</a></li>
				<li><a href="#">3ds</a></li>
				<li><a href="#">video</a></li>
				<li><a href="#">Contacto</a></li>
				<li><a href="#">teste</a></li>
			</ul>
		</div>
	</nav>

/*----------------------------------------------------------------------
			 // nav //
----------------------------------------------------------------------*/
nav {
   margin:0;
   padding:0;
   height:50px;
   background-color:#00006A;}
#menubar {
   height: 50px;
   padding-left:50px;}
ul#menu, ul#menu li {
   float: left;
   margin: 0;
   padding: 0;}
ul#menu li {
 list-style: none;}
ul#menu li a {
   letter-spacing: 0.1em;
   font: normal 100% 'lucida sans unicode', arial, sans-serif;
   display: block;
   float: left;
   height: 24px;
   padding: 13px 26px 13px 26px;
   text-align: center;
   color: #FFF;
   text-transform: uppercase;
   text-decoration: none;
   background: transparent;}
ul#menu li a:hover, ul#menu li.selected a:active,ul#menu li.selected a {
   color:#FFF;
   background:#CCC;}

cumps

acao

Edited by Rui Carlos

Share this post


Link to post
Share on other sites
fteixeira1993

Boas,

Este tópico está no sitio enrrado... Aqui é php não css x), mas o que tu queres é do tipo

a:active{
color: blue;
}

Edited by brunoais
quote desnecessariamente grande removido

Share this post


Link to post
Share on other sites
acao

boas

já tinha tentado o active mas não consigo por a funcionar, assim apenas muda de cor enquanto carrega depois volta à cor inicial.

assim consigo colocar o home correto mas se clicar noutra pagina não muda fica sempre selecionado o home

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover {
    color:#FFF;
  background:#CCC;}

cumps

acao

Share this post


Link to post
Share on other sites
Rui Carlos

Tens que colocar o class="selected" no elemento correspondente à página em que estás.

Se o deixares ficar sempre no primeiro elemento, vais aparecer sempre como se estivesses na Home.

Share this post


Link to post
Share on other sites
acao

boas

@RuiCarlos

obrigado tão facil e não estava a perceber que seria assim.

cumps

acao

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.