Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de CSS
SEÇÕES
Manuais relacionados
+Workshop de CSS
Categorias
+CSS

Índice do Manual Workshop de CSS
+ Aplicação avançada de estilo aos links
+ Como evitar que um página se imprima
+ Título para tabelas decoradas com CSS
+ Bordas pontilhadas com CSS
+ Estilos em campo de texto
+ Montar uma página com CSS
+ Montar uma página com CSS II
+ Montar uma página com CSS III
+ Montar uma página com CSS IV
+ Montar uma página com CSS V
+ Variar o desenho e a construção com a folha de estilos
+ Workshop de CSS, Opacity
+ Links com estilo CSS que simulam botões
+ Criar um menu dinâmico com CSS
+ Utilizar CSS para montar um boletim
+ Caixa simples e elegante com CSS
+ Decorar um campo select de formulário com CSS
+ Esconder com CSS o e-mail aos spambots
+ Efeito de sombra com CSS
+ Texto na vertical usando CSS
+ Mudando o cursor do mouse
+ Caixa CSS para colocar conteúdo
+ Construção CSS com duas colunas
+ Construção CSS com três colunas
+ Variação da construção com CSS com 3 colunas
+ Caixa CSS com as esquinas arredondadas
+ Caixa CSS com linha de borda arredondada
+ Construir uma galeria de fotos com CSS
+ Construir uma galeria de fotos com CSS usando listas
+ Criação de gráficos de barras com CSS para a construção
+ Estilizando formulários
+ Realizar um rollover só com CSS e utilizando imagens
+ CSS para campos textarea de formulário
+ CSS para imprimir páginas web
+ Gerar colunas com CSS de uma lista sem tabelas
+ Molduras para fotos com CSS
+ Gráfico de barras com CSS, parte 2

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Criar um menu dinâmico com CSS

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


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

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de CSS

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em CSS


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foram econtrados 3 comentários sem rever

VerVer os comentários não revistos



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites