Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Fiz um exemplo para demonstrar o que eu preciso, alguém pode me ajudar?
/applications/core/interface/imageproxy/imageproxy.php?img=http://s11.postimg.org/54q7ewymb/exemplomenu.png&key=94064cc8f892c4d89452f012e8c3cfc7941cf7ca4086a504cb5e7552e60c54d5" alt="exemplomenu.png" />
Tentei adaptar o menu do MAUJOR mas não deu certo.
http://www.maujor.com/tutorial/apoio_barrabotao/passo5.html
No exemplo todos os botões tem a mesma largura, mas no final cada um vai ter um tamanho.
Alguém pode me ajudar?
Obrigado
Pode colar aqui seu código html e css que está usando?
HTML
<div id="menu">
<ul class="nav">
<li><a href="#colecao">Livro</a></li>
<li><a href="#onde">Onde Encontrar</a></li>
<li><a href="#secretarias">Secretarias de Educação</a></li>
<li><a href="#imprensa">Imprensa</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>CSS
#menu {
width: 500px;
height: 165px;
float: left;
} margin: 0;
padding: 0;
} list-style: none;
display: inline;
} float: left;
width: 100px;
color: #333;
text-align: center;
padding: 0 0.2em 0.2em 0;
text-decoration: none;
} background: #999;
color: #fff;
}Já exportei todas as imagens do menu e do hover, pensei em criar uma classe para cada imagem.
No caso vc quer que cada link tenha um background de cada cor?
Na verdade queria exportar cada botão com uma imagem diferente.
fiz duas imagem para cada botao, exemplo:
menu-livro.png e menu-livro-hover.png
Cada botão tem duas imagens, uma normal e a outra do hover, fiz a imagem ja com o texto junto.
No caso você quer que cada link tenha um background de cada cor?
Uma alternativa que você pode fazer é essa.
Uma alternativa que você pode fazer é essa.
SHOW!!!!
Muito obrigado.
Só fiz uma alteração.
ul.nav {
margin: 0;
padding: 0;
} list-style: none;
display: inline-block;
} display:block;
height:50px;
}/ link 1 /
ul.nav li:nth-of-type(1) a {
width: 101px;
background:url(../img/menu-colecao.png);
} width: 101px;
background:url(../img/menu-colecao-hover.png);
}/ link 2 /
ul.nav li:nth-of-type(2) a {
width: 84px;
background:url(../img/menu-autoria.png);
} width: 84px;
background:url(../img/menu-autoria-hover.png);
}Tirei o tamanho fixo, cada imagem vai ter um tamanho.
Agora preciso fazer ficar ativo o menu que estiver selecionado, o problema é que estou usando navegação por ancora, igual nesse site:
http://chocoladesign.com/wp-content/uploads/2012/07/ancora.html
Tentei algo assim, mas não rolou.
ul.nav li:nth-of-type(2):active a {
width: 84px;
background:url(../img/menu-autoria-hover.png);
background-repeat:no-repeat;
}tenta
ul.nav li:nth-of-type(2) a:active {
width: 84px;
background:url(../img/menu-autoria-hover.png);
background-repeat:no-repeat;
}>
tenta
ul.nav li:nth-of-type(2) a:active {
width: 84px;
background:url(../img/menu-autoria-hover.png);
background-repeat:no-repeat;
}Tentei e nao deu certo.
Achei esse site que tem um parecido
http://programae.org.br/#programae
O esqueme de navegacao por ancore peguei nesse tutorial:http://chocoladesign.com/ancora-html
Esse é o link para o exemplo: http://chocoladesign.com/wp-content/uploads/2012/07/ancora.html
a:active é apenas o momento do clique.
Quando vc solta o mouse, e sobe o click, o active termina.
Para deixar ativo com esse sistema de navegação por âncoras, vc terá que utilizar javascript.
Um evento click que altere todos os items para o "default" e depois sete o background do item clicado para aquele "ativo".
Pode colar aqui seu código html e css que está usando?