Como Criar um Menu Lateral com CSS Totalmente Personalizável

CSS, Tutoriais | | novembro 16, 2009 at 12:15 PM
CSS
Depois de um bom tempo sem postagens de CSS, hoje vamos sair daquela monotonia de posts muito teoricos e vamos praticar um pouco. Essa semana eu pesquizando encontrei uma maneira muito boa para criar um menu lateral com CSS, um menu totalmente personalizavel.

Bom, pra começar voce tem que ter um conhecimento mínimo em HTML e CSS para que possa entender os códigos.

Bom, para começar nosso menu vamos criar uma lista ordenada:


<html>

<head>
<title> Menu lateral em CSS </title>
</head>

<body>

<div id=”conteudo”>

<h1>Menu lateral em CSS</h1>

</div>

<div id=”menu”>
<ul>
<li><a href=”link1.htm”>link1</a></li>
<li><a href=”link2.htm”>link2</a></li>
<li><a href=”link3.htm”>link3</a></li>
<li><a href=”link4.htm”>link4</a></li>
<li><a href=”link5.htm”>link5</a></li>
</ul>
</div>

</body>
</html>

Depois de ter feito esse codigo básico, vamos ao CSS para definir a cor do texto e a fonte, pra isso vamos declarar o Body.

body {
color: #000;
font: 12px Verdana, sans-serif;
}

Agora vamos definir o CSS do <div id=”conteudo”> presente no código HTML mostrado anteriormente.

#conteudo {
width: 70%;
float: right;
text-align: center;
}

Agora definimos as características do <div id=”menu”>

#menu {
width: 30%;
margin: 0; padding: 0;
float: left;
}

Aqui o elemento tem 30% de largura, nenhuma margem e nenhum espaçamento, e está alinhado à esquerda.

Lembra que criamos uma lista ordenada no HTML? Agora vamos definir suas caracteristicas.

#menu ul li {
margin: 0; padding: 0px;
border-bottom: 1px solid #CCC;
text-align: left;
list-style-type: none;
}

A última declaração (list-style-type: none;) faz com que a lista não tenha marcadores (por padrão, o símbolo •).

Agora vamos definir o estilo dos links do menu.

#menu a:link {
background: #F5F5F5;
color: #666;
font-weight: bold;
text-decoration: none;
padding: 8px;
display: block;
}

Usei um fundo cinza claro, com o texto cinza escuro, em negrito, sem sublinhado, com 8 pixels de espaçamento. O mais importante dessa declaração é a linha display: block;, pois é ela que faz com que os itens da lista sejam exibidos corretamente em bloco para formar a aparência que nós procuramos para o nosso menu.

Para Finalizar, declaramos a aparência do item do menu quando o visitante passar o mouse sobre ele – fundo azul claro, texto azul escuro:

#menu a:hover {
background: #E5F0FF;
color: #039;
}

Pronto, agora você já possui um menu lateral básico para seu site feito com CSS, com um pouco mais de conhecimento em CSS e HTML você poderá personalizar e adequar ao seu site numa boa.
Menu Lateral em CSS

2 Comentários

  1. Paulo Castro disse:
    16 de novembro de 2009 às 1:29 PM
    Eu que agradeço, eu tambem sou autodidata, aprendo e tento passar pra frente da melhor maneira possivel.
    Responder
  2. Serenissima disse:
    16 de novembro de 2009 às 1:23 PM
    Quero dar os parabéns pela forma como você compartilha seus conhecimentos. Para quem é autodidata (como eu) é imprescindivel o seu trabalho.
    Obrigada por compartilhar.

    Abraço carinhoso

    Responder

Leave a Reply