Criar um menu dinâmico com CSS

Código que nos ajuda a criar um menu com CSS similar aos de Javascript.

Por Federico Elgarte


Publicado em: 07/6/05
Valorize este artigo:
O seguinte estilo nos permite criar um menu similar aos de javascript, onde representamos seu estado de repouso (out) com uma cor e seu estado sobre (over) com outra.

<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botaoMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botaoMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botaoMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botaoMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu">
<a class="botaoMenu" href="">Opção 1</a>
<a class="botaoMenu" href="">Opção 2</a>
<a class="botaoMenu" href="">Opção 3</a>
<a class="botaoMenu" href="">Opção 4</a>
</div></div>
background-color de a.botaoMenu : cor de estado repouso (out).
background-color de a.botaoMenu:hover : cor de estado sobre (over).
background-color de a.botaoMenu:active : cor de estado selecionado.


Ver exemplo em funcionamento





Comentários do artigo
Foram enviados 6 comentários ao artigo
4 comentários não revisados
2 comentários revisados:
Resposta
Por: xuix
21/4/10
Eu estou de acordo com o José Carmo, mas como ele não sei como criar o dito "menu.xx" para ser o único ficheiro a alterar, visto que tenho que alterar todas as minhas paginas para poder alterar todos o menu.
Eu conseguiria isso se tivesse frames, mas não as estou a utilizar por isso também gostaria de saber como posso fazer.
Cumprimentos
Faz assim
Por: ortodata
07/3/11
Primeiro cria um arquivo de texto e cola o código abaixo salvando como "menu.css":

#menu div.barraMenu,
#menu div.barraMenu a.botaoMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botaoMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botaoMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botaoMenu:active {
background-color: #637D4D;
color: black;
}

****************************************************************************
Depois cria a página html com o código abaixo.
Perceba que a linha entre as tags "head" chamam o arquivo menu.css para o conteúdo da página.

<html>

<head>
<title>Título</title>

<link type="text/css" rel="stylesheet" href="menu.css">

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<div id="menu">
<div class="barraMenu">
<a class="botaoMenu" href="">Opção 1</a>
<a class="botaoMenu" href="">Opção 2</a>
<a class="botaoMenu" href="">Opção 3</a>
<a class="botaoMenu" href="">Opção 4</a>
</div>
</div>
</body>

</html>

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato