CSS
Simples MENU utilizando CSS
Publicado em: 07/08/2006 |
CSS |
Visualizações: 15.723 |
1 Comentário(s)
Olá, primeiramente gostaria de pedir desculpas pela demora em postar essa minha nova coluna aqui no oficicadanet.com.br. Espero que isso não me aconteça mais... hehehe
Na minha primeira coluna aqui no Oficina da Net falei sobre as vantagens do uso do CSS e de como utilizar ele em seu website.
Nessa segunda coluna minha, já partiremos para a prática: como criar um menu usando o CSS.
Nesse menu, vamos usar as tags de listas do HTML, ou seja, <ul>, <li>, <ol>... tudo isso dentro de uma DIV!
Vamos ao trabalho?
Menu Simples com CSS
Software Utilizado: pode ser usado desde o bloco de notas até o Dreamweaver mais atual
Grau de Dificuldade: 6,0
Ao som de... Sonata Arctica - Replica ;)
Primeiramente, crie um arquivo .html, algo como index.html. Nele, coloque esse código simples:
Bom, dando uma explicada rápida nesse HTML:
<link rel="stylesheet" href=" menu.css" type="text/css" /> => é definida o arquivo CSS onde estará as configurações do menu.
<div id="menu"> => utilizamos essa DIV por questões estéticas e de dinamismo. Utilizando DIVs id, você poderá colocar vários menus utilizando as tags de lista do HTML.
<ul>, <li>, <ol>... => responsável por definir a lista no HTML... aqui usaremos o <li> como menu principal e o <ol> como menu secundário...
Agora, criaremos o arquivo menu.css . Ele pode ser criado tanto pelo Bloco de Notas do Windows, até pelo Dreamweaver da Macromedia:
Coloquei cores bem distintas nos menus e nos subemnus, para deixar claro a diferença e, assim, ser mais facil a mudança e personalização.
Explicando o básico:
background => serve para definir as cores de fundo.
padding e margin => usados para definir o tamanho das margens da lista em relação ao site e o espaçamento das letras em relação à lista.
border => utilizado para definir o tamanho, estilo e cor das bordas.
color => utilizado para definir a cor da letra.
font-size => usado para definir o tamanho da letra.
list-style-type => usado para definir o estilo de lista aplicado. Aqui no caso foi nenhuma.
Bom, era isso... aí está um menu simples, de facil personalização. Até a proxima pessoal!
Dúvidas? Fórum Oficina da Net
Sugestões? tokageh@gmail.com
Na minha primeira coluna aqui no Oficina da Net falei sobre as vantagens do uso do CSS e de como utilizar ele em seu website.
Nessa segunda coluna minha, já partiremos para a prática: como criar um menu usando o CSS.
Nesse menu, vamos usar as tags de listas do HTML, ou seja, <ul>, <li>, <ol>... tudo isso dentro de uma DIV!
Vamos ao trabalho?
Menu Simples com CSS
Software Utilizado: pode ser usado desde o bloco de notas até o Dreamweaver mais atual
Grau de Dificuldade: 6,0
Ao som de... Sonata Arctica - Replica ;)
Primeiramente, crie um arquivo .html, algo como index.html. Nele, coloque esse código simples:
<html>
<head>
<link rel="stylesheet" href=" menu.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Página 1</a></li>
<li><a href="#">Página 2</a></li>
<ol><a href="#">Sub-página 1</a></ol>
<ol><a href="#">Sub-página 2</a></ol>
<li><a href="#">Página 3</a></li>
<li><a href="#">Página 4</a></li>
<li><a href="#">Página 5</a></li>
<ol><a href="#">Sub-página 1</a></ol>
<ol><a href="#">Sub-página 2</a></ol>
<ol><a href="#">Sub-página 3</a></ol>
<li><a href="#">Página 6</a></li>
<li><a href="#">Página 7</a></li>
</ul>
</div>
</body>
</html>Bom, dando uma explicada rápida nesse HTML:
<link rel="stylesheet" href=" menu.css" type="text/css" /> => é definida o arquivo CSS onde estará as configurações do menu.
<div id="menu"> => utilizamos essa DIV por questões estéticas e de dinamismo. Utilizando DIVs id, você poderá colocar vários menus utilizando as tags de lista do HTML.
<ul>, <li>, <ol>... => responsável por definir a lista no HTML... aqui usaremos o <li> como menu principal e o <ol> como menu secundário...
Agora, criaremos o arquivo menu.css . Ele pode ser criado tanto pelo Bloco de Notas do Windows, até pelo Dreamweaver da Macromedia:
#Menu ul {
padding: 0; display: block;
margin: 0; list-style-type: none;
}
#Menu ul li {
padding: 0; margin: 0;
font-size: 11px; width: 140px;
}
#Menu ul li a {
padding: 1px 0 1px 6px; margin: 0;
border: 1px solid #E5E5E5; display: block;
background: #f5f5f5; text-decoration: none;
color: #000;
}
#Menu ul li a:hover {
background: #FAFAFA; border: 1px solid #D5D5D5;
padding: 1px 0 1px 6px; color: #666;
}
#Menu ul li ol {
padding: 0; margin: 0;
font-size: 11px; width: 140px;
}
#Menu ul li ol a {
padding: 1px 0 1px 11px; margin: 0;
border: 1px solid #e1f3e3; display: block;
background: #f1fdf3; text-decoration: none;
color: #333;
}
#Menu ul li ol a:hover {
background: #fefefe; border: 1px solid #79a7e2;
padding: 1px 0 1px 11px; color: #000;
}Coloquei cores bem distintas nos menus e nos subemnus, para deixar claro a diferença e, assim, ser mais facil a mudança e personalização.
Explicando o básico:
background => serve para definir as cores de fundo.
padding e margin => usados para definir o tamanho das margens da lista em relação ao site e o espaçamento das letras em relação à lista.
border => utilizado para definir o tamanho, estilo e cor das bordas.
color => utilizado para definir a cor da letra.
font-size => usado para definir o tamanho da letra.
list-style-type => usado para definir o estilo de lista aplicado. Aqui no caso foi nenhuma.
Bom, era isso... aí está um menu simples, de facil personalização. Até a proxima pessoal!
Dúvidas? Fórum Oficina da Net
Sugestões? tokageh@gmail.com
- Identidade Visual: O que não fazer na criação de um logotipo
Nesse artigo nós veremos o que não deve ser feito na hora de criar um logotipo, . - Conceito Básico Sobre a Matemática
Programadores e desenvolvedores, agora já os internautas. Eu não sei o que dizer. - Miniaturas de Sites com Websnapr
Nesse artigo veremos como criar miniaturas de sites usando apenas um link, ao in. - Palestras, o que aproveitar delas?
Ir a palestras ou assisti-las em seu computador ou qualquer outro dispositivo o . - Curso de Visual Basic - Aula 6 - Criando um visualizador de imagens
Nesta sexta vídeo aula, iremos aprender como criar um visualizador de imagens co.
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
Daniel Guimarães
Publicado em: 10/09/2008 - 19:47
Maneiro o menu, pena que não funciona no Mozila FireFox...