Você está em: Home » CSS/HTML »Menu CSS com imagens ao lado dos links

Menu CSS com imagens ao lado dos links

29 março 2011
CSS/HTML

Neste tutorial vamos fazer um menu css e conhecer duas maneiras de colocar imagens ao lado dos links, uma utilizando "background-image" e outra a tag "img src".

Criando o menu.

Código HTML:

<ul id='menuvert'>
<li><a href='#;'>Home</a></li>
<li><a href='#;'>Produtos</a></li>
<li><a href='#;'>Serviços</a></li>
<li><a href='#;'>Contato</a></li>
<li><a href='#;'>Sobre</a></li>
</ul>

Código CSS:

ul#menuvert {
width:150px;
margin:0;
padding:0;
background:#000;
list-style:none;
}
ul#menuvert li a {
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}
ul#menuvert li a:hover {
border-bottom:1px solid orange;
color:orange;
}

Colocar imagem ao lado dos links - Método 1 - "background-image".

Nosso menu já está pronto, agora vamos colocar uma imagem ao lado dos links acrescentando a parte em negrito ao código.

ul#menuvert li a {
padding:5px 0 2px 20px;
background-image: url('endereço da imagem');
background-repeat:no-repeat;
background-position:left center;
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}

Versão abreviada:

ul#menuvert li a {
padding:5px 0 2px 20px;
background: url('endereço da imagem') no-repeat left center;
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}

Com o padding definimos um espaço acima e abaixo dos links de 5 e 2px respectivamente. A esquerda definimos 20px que será onde nossa imagem ficará.
Nas propriedades de background declaramos:
background-image(endereço da imagem);
background-repeat(no-repeat para a imagem não se repetir);
background-position(colocamos nossa imagem a esquerda e alinhada no centro);

Colocar imagem ao lado dos links - Método 2 - tag "img src".

Nesse segundo método colocamos a imagem no html e não no css. Para isso acrescentamos o seguinte código em negrito dentro da tag <a href='#;'></a>.

<ul id='menuvert'>
   <li><a href='#;'><img src='endereço da imagem' />Home</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Produtos</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Serviços</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Contato</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Sobre</a></li>
</ul>

Note que com esse método podemos colocar imagens diferentes para cada link.

No css vamos declarar uma pequena distância a direita da imagem para separá-la do texto e alinhá-la verticalmente ao centro: