Menu em CSS com imagem e efeito hover

[Fernando José 0]

Pessoal,

Fiz um exemplo para demonstrar o que eu preciso, alguém pode me ajudar?

 

 

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

[rikaschmitt 54]

Pode colar aqui seu código html e css que está usando?

[Fernando José 0]

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;
}
ul.nav {
	margin: 0;
	padding: 0;
}
ul.nav li {
	list-style: none;
	display: inline;
}
ul.nav li a {
	float: left;
	width: 100px;
	color: #333;
	text-align: center;
	padding: 0 0.2em 0.2em 0;
	text-decoration: none;
}
ul.nav a:hover {
	background: #999;
	color: #fff;
}

Já exportei todas as imagens do menu e do hover, pensei em criar uma classe para cada imagem.

[rikaschmitt 54]

No caso vc quer que cada link tenha um background de cada cor?

[Fernando José 0]

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?

[rikaschmitt 54]

Uma alternativa que você pode fazer é essa.

[Fernando José 0]

Uma alternativa que você pode fazer é essa.

SHOW!!!!

 

Muito obrigado.

 

Só fiz uma alteração.

ul.nav {
	margin: 0;
	padding: 0;
}
ul.nav li {
	list-style: none;
	display: inline-block;
}
ul.nav li a {
    display:block;
    height:50px;
}

/* link 1 */
ul.nav li:nth-of-type(1) a {
	width: 101px;
    background:url(../img/menu-colecao.png);
}
ul.nav li:nth-of-type(1):hover a {
	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);
}
ul.nav li:nth-of-type(2):hover a {
	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

[Fernando José 0]

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;
}

[rikaschmitt 54]

tenta

ul.nav li:nth-of-type(2) a:active {
    width: 84px;
background:url(../img/menu-autoria-hover.png);
    background-repeat:no-repeat;
}

[Fernando José 0]

 

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

[William Bruno 1501]

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".