Help
Olá Galera MX, hoje nós iremos abordar alguns conceitos básicos de como funciona um menu CSS feito com nossos recursos em lista CSS. Toda vez que vamos criar um menu CSS, realmente à idéia do resultado final muitas vezes num se torna o esperado, onde no decorrer da pequena e nobre criação que vai surgindo a forma desejada, então podemos antes disso sempre fazer um pequeno planejamento, alguns fatores que muitas vezes é fundamental para que as marcações CSS apareçam com mais facilidade na criação do menu.
- Saber se ele será vertical ou horizontal.
- Saber largura fixa dele (sempre é aconselhado).
- Cores a serem aplicadas nas bordas e internas na lista.
- Saber a idéia aplicada nas transições Pseudo Classes.
Quando se inicia sua estrutura se preocupe com a sua organização, onde quando você estiver gerando uma lista HTML/XHMTL com o intuito que ela se torne um Menu, lembre-se que nela existe algumas propriedades a serem aplicadas na diferença entre as suas diferentes definições (ordered list, unordered list e definition list), e ela hiperlinkada. Listas tem uma finalidade em comum que seria deixar um conjunto de valores ou atributos (itens) numa seguência organizada, onde os atributos a seguir mostram como funciona:
Lista Ordenada (ordered list) - São opções de marcação HTML que se aplicam numa sequência de ordem numerada, onde suas Tags se inicial em <ol> e interna a ela <li>. ficando então assim:
<ol>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
...
</ol>
Lista não Ordenada (unordered list) - São opções de marcação HTML que não se aplicam numa sequência, onde suas Tags se iniciam em <ul> e intena a ela <li>, ficando então assim:
<ul>
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
<li>item 04</li>
...
</ul>
Lista de Definições (definition list) - Este caso é um bem interessante onde o usuário tem a possibilidade de criar uma sequência listada e defunir suas subcategorias e descrições, onde suas Tags são <dl> onde ficam tags <dt> responsável por fixar os itens da lista e o <dd> responsável por descrever os itens da lista anterior, sua estrutura ficaria assim:
<dl>
<dt>Item 01 </dt>
<dd>Aqui fica uma descrição referente ao item 01</dd>
<dt>Item 02 </dt>
<dd>Aqui fica um descrição referente ao item 02</dd>
...
</dl>
Obs: Cópie estes Códigos de lista citados acima e cole num estrutura HTML básica:
<html>
<head>
<title></title>
</head>
<body>
</body>
Cole aqui as opções de lista citada acima, lembrando que você terá que colocar este código num bloco de notas simples e salvar com extensão .html
</html>
CSS - Aplicação nas Listas HTML.
Depois que você viu acima como funciona a estrutura HTML de listas, agora entra a questão, quando você vê uma estrutura de Menu bem interessante e se depara com o visual dessa marcação HTML simples... isso mesmo! O HTML é uma liguagem de marcação responsável por estruturar um determinado conteúdo para se publicar na WEB, ai que entra a questão de uma marcação de formatação que foi feita para trabalhar com esse propósito, o nosso CSS. Onde quando ele foi feito em sua versão CSS nível 1, foi definido que ele teria algumas opções para se formatar listas. Vejam abaixo as opções:
list-style-image - Ela tem como função definir uma imagem para ser colocado num marcador duma lista HTML.
list-style-position - Defini onde deve ficar a posição do marcador de uma lista HTML.
list-style-type - Defini um tipo de marcador Defaut(padrão) do próprio CSS que se atribui a lista HTML.
LEVANDO PARA A PRÁTICA.
Agora depois de vermos uma série de opções que são os conceitos básicos relacionados de uma lista HTML quando aplicada com uma Formatação CSS, partiremos para uma criação básica e comentada de como funciona um Menu HTML com a Formatação CSS, que se Resumi em MENU CSS.
Saber se ele será vertical ou horizontal.
Quando você criar uma estrutura em lista HTML, você já terá em menti se seu menu será Horizontal ou Vertical, então isso só poderá ser definido com ajuda do nosso CSS, pois por Default o HTML atribui sempre no sentido vertical, então quando você quizer atribuir num sentido vertical poderá fazer da seguinte forma:
1º Situação | Listas Menu Horizonal - com Atributos Display: inline; & Float: left; aplicados somente nas listas.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#underlist {
float: left;
padding: 10px;
border: 1px solid #000;
}
#listitem {
display: inline;
padding: 5px;
margin: 10px;
border: 1px solid #000;
}
-->
</style>
</head>
</head>
<body>
<ul id="underlist">
<li id="listitem">link 01</li>
<li id="listitem">link 02</li>
<li id="listitem">link 03</li>
<li id="listitem">link 04</li>
<li id="listitem">link 05</li>
</ul>
</div>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#underlist {
float: left;
padding: 10px;
border: 1px solid #000;
}
#listitem {
display: inline;
padding: 5px;
margin: 10px;
border: 1px solid #000;
}
-->
</style>
</head>
</head>
<body>
<ul id="underlist">
<li id="listitem">link 01</li>
<li id="listitem">link 02</li>
<li id="listitem">link 03</li>
<li id="listitem">link 04</li>
<li id="listitem">link 05</li>
</ul>
</div>
<body>
</body>
</html>
Veja o resultado 01.
Nesse caso, fiz alguns testes somente com listas HTML, e percebi que podemos aplicar essa situação, então na Tag <li> apliquei display: inline; que não se deixará nenhum limite para que ele possa transbordar por default (padrão) para o lado esquerdo do elemento anterior, ai aplicamos o float: left para que esse conteudo apenas flutue internamente para que o lado que determinamos, no caso aplicado a Tag mãe <ul>, posteriormente iremos ver os conceitos com hiperlink.
2º Situação | Listas Menu Vertical - com Atributos List-style-type: none; & width:190px; aplicados somente nas listas.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#underlist
{
width: 190px;
list-style-type: none;
padding: 10px;
border: 1px solid #000;
}
#listitem
{
padding: 5px;
margin: 10px;
border: 1px solid #000;
}
-->
</style>
</head>
</head>
<body>
<ul id="underlist">
<li id="listitem">link 01</li>
<li id="listitem">link 02</li>
<li id="listitem">link 03</li>
<li id="listitem">link 04</li>
<li id="listitem">link 05</li>
</ul>
</div>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#underlist
{
width: 190px;
list-style-type: none;
padding: 10px;
border: 1px solid #000;
}
#listitem
{
padding: 5px;
margin: 10px;
border: 1px solid #000;
}
-->
</style>
</head>
</head>
<body>
<ul id="underlist">
<li id="listitem">link 01</li>
<li id="listitem">link 02</li>
<li id="listitem">link 03</li>
<li id="listitem">link 04</li>
<li id="listitem">link 05</li>
</ul>
</div>
<body>
</body>
</html>
Veja o resultado 02.
Nesse caso é uma opção mais simples, pois listas por default (padrão) ja ficam posicionadas em sentido vertical, agora somente apliquei uma Width para definir a largura e list-style-type: none; para que os marcadores de listas que aparecem por defaut, não fiquem visualizados.
Saber largura fixa dele (sempre é aconselhado).
Uma dica a ser aplicada é que quando você for criar um Menu CSS, lembre-se de aplicar larguras em locais estratégicos, sem se precipitar onde não há necessidade de usá-lo, então quando você for determinar uma largura <ul> ou <ol> deixe somente ele com configuração width, onde ele será a tag global das listas, no caso poderemos internamente nas <li> determinar uma marcação PADDING CSS, se caso for necessário.
Cores a serem aplicadas nas bordas e internas na lista.
Uma boa dica é trabalhar sempre com uma tabela de cores ou mesmo com o proprio dreamweaver ou editor de imagens aberto (Fireworks, Photoshop, Etc...)caso esteja programando a estrutura, pois, sempre se baseie com antecedência ou comj auxilio das paleta de cores disponível nos editores citados acima e aplique os valores referentes, lembrando que a visualização CODE do dreamweaver tem suporte para autocompletar, então tenha sempre esta noção na prática para trabalhar personalizando o visual do MENU.
Obs: Estes atributos referentes a cores, não serão citados nesse tutorial.
Saber a idéia aplicada nas transições Pseudo Classes.
Essa questão de pseudo classes, são funções destinadas para aplicar efeitos de transição em alguns seletores, a maior utilização deles, é quando estamos criando links, onde com a ajuda do CSS, podemos definir:
QUOTE
SINTAXE PSEUDO CLASSES:
SELETOR: PSEUDO-CLASSE {PROPRIEDADE: VALOR}
link - O seu estado padrão, quando não determinado nenhum evento ao link.
visited - Quando ele foi utilizado no decorrer da navegação do usuário com o Site.
hover - É um evento, quando o usuário está com o cursos do mouse sobre o link que foi determinado essa função.
active - No ato na navegação, o usuário estando na determinada página do link referente, ai ele terá este evento ativo.
Obs: Estes fatores não seram utilizados de forma ativa nesse tutorial.
SELETOR: PSEUDO-CLASSE {PROPRIEDADE: VALOR}
link - O seu estado padrão, quando não determinado nenhum evento ao link.
visited - Quando ele foi utilizado no decorrer da navegação do usuário com o Site.
hover - É um evento, quando o usuário está com o cursos do mouse sobre o link que foi determinado essa função.
active - No ato na navegação, o usuário estando na determinada página do link referente, ai ele terá este evento ativo.
Obs: Estes fatores não seram utilizados de forma ativa nesse tutorial.
Fatores de Acessibilidade aplicado a links.
Este fator é de fundamental importância para o desenvolvedor que pretende começar a fazer um site acessível com influências WEBSTANDARD, lembrando que assuntos na internet não falta para estudos, então optei colocar uma referência que defini bem o que quero mostrar:
QUOTE
LINKS
Recomendações
- O texto do link deve ser significativo e claro.
- O texto do link deve fazer sentido se lido isoladamente. Os usuários de leitores de tela podem navegar em links de uma página utilizando a tecla "tab". Para cada "tab" é pronunciado um texto do link. Devido a isso, não utilizar texto do link generalizado como "Clique aqui".
- Para tornar ainda mais claro o destino do link, utilizar título de link informativo (elemento "title").
- Para navegação dos links via teclado, pode-se organizar a seqüência dos links e/ou determinar teclas de atalho para links iimportantes.
Html/Xhtml
- TITLE: Se há mais de um link na página com diferentes textos do links mas apontando para o mesmo endereço, diferenciar os links utilizando o atributo "title".
- TITLE: Se há mais de um link na página com o mesmo texto do link, todos estes links devem apontar para o mesmo endereço. Se não for possível devido ao contexto do texto, diferenciar os links utilizando o atributo "title".
- TABINDEX: para definir a ordem da navegação via tecla "tab", incluir o atributo "tabindex" com valores 1, 2, 3, etc no elemento do link. Além de link, o "tabindex" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
- ACCESSKEY: para definir quais as teclas de atalho dos links, incluir o atributo "accesskey" no elemento do link. Além de link, o "accesskey" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
Fonte: http://www.serpro.gov.br/acessibilidade/
Recomendações
- O texto do link deve ser significativo e claro.
- O texto do link deve fazer sentido se lido isoladamente. Os usuários de leitores de tela podem navegar em links de uma página utilizando a tecla "tab". Para cada "tab" é pronunciado um texto do link. Devido a isso, não utilizar texto do link generalizado como "Clique aqui".
- Para tornar ainda mais claro o destino do link, utilizar título de link informativo (elemento "title").
- Para navegação dos links via teclado, pode-se organizar a seqüência dos links e/ou determinar teclas de atalho para links iimportantes.
Html/Xhtml
- TITLE: Se há mais de um link na página com diferentes textos do links mas apontando para o mesmo endereço, diferenciar os links utilizando o atributo "title".
- TITLE: Se há mais de um link na página com o mesmo texto do link, todos estes links devem apontar para o mesmo endereço. Se não for possível devido ao contexto do texto, diferenciar os links utilizando o atributo "title".
- TABINDEX: para definir a ordem da navegação via tecla "tab", incluir o atributo "tabindex" com valores 1, 2, 3, etc no elemento do link. Além de link, o "tabindex" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
- ACCESSKEY: para definir quais as teclas de atalho dos links, incluir o atributo "accesskey" no elemento do link. Além de link, o "accesskey" é válido para formulários e objetos. ("a", "area", "button", "input", "label", "legend", "textarea", "input", "object", "select", "textarea").
Fonte: http://www.serpro.gov.br/acessibilidade/
Aplicando Hiperlink a listas.
Agora aplicaremos na prática links em listas e comentaremos sobre sua estruta seguida abaixo, lembrando que acima comentei como fucaria sua estrutura em listas, agora elas estaram todas hiperlinkadas, onde chegaremos ao nosso objetivo que será têlas como MENU. Lembrando que o processo citado acima apenas uma das possiveis situações, abaixo o processo terá que estar junto com DIV's, onde acabará por ter uma série diferente na sua marcação CSS.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>| | Menu CSS | |</title>
<style type="text/css">
<!--
#underlist {
float: left;
padding: 30px;
border: 1px solid #000;
}
#menu #underlist li {
display: inline;
height: 30px;
}
#menu #underlist a {
padding: 20px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#" accesskey="a" tabindex="1" title="este é o link 01">link 01</a></li>
<li><a href="#" accesskey="b" tabindex="2" title="este é o link 02">link 02</a></li>
<li><a href="#" accesskey="c" tabindex="3" title="este é o link 03">link 03</a></li>
<li><a href="#" accesskey="d" tabindex="4" title="este é o link 04">link 04</a></li>
<li><a href="#" accesskey="e" tabindex="5" title="este é o link 05">link 05</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>| | Menu CSS | |</title>
<style type="text/css">
<!--
#underlist {
float: left;
padding: 30px;
border: 1px solid #000;
}
#menu #underlist li {
display: inline;
height: 30px;
}
#menu #underlist a {
padding: 20px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#" accesskey="a" tabindex="1" title="este é o link 01">link 01</a></li>
<li><a href="#" accesskey="b" tabindex="2" title="este é o link 02">link 02</a></li>
<li><a href="#" accesskey="c" tabindex="3" title="este é o link 03">link 03</a></li>
<li><a href="#" accesskey="d" tabindex="4" title="este é o link 04">link 04</a></li>
<li><a href="#" accesskey="e" tabindex="5" title="este é o link 05">link 05</a></li>
</ul>
</div>
</body>
</html>
Veja o resultado 03.
Pronto, temos nosso 1º menu feito horizontalmente, onde defini nessa estrutura básica, apenas as marcações fundamentais, não definiremos nesse tutorial as parte de cores e transações de pseudo-classes, então essa estrutura citada acima temos a um conjunto de listas não-ordenadas onde aplicamos uma marcação CSS ligada por ID's junto a lista, o que defini essa ligação no caso é a propriedade interna as Tags HTML/XHTML id="valor" que colocadas nessa situação, onde o CSS está incorporado a própria página, apenas fica sendo definido com uma ligação de # como visto acima. A princípio definimos que a nossa <ul> ligada a identidade underlist um valor chamado Float, que nesse caso fica responsável para transbordar(flutuar) os <li> que estiverem dependentes dele para a esqueda, onde a principio ficaria definido assim:
<html>
<head><title></title></head>
<body>
<style type="text/css">
<!--
#underlist { float: left; }
-->
</style>
<div id="menu">
<ul id="underlist">
<li><a href="#">link</a></li>
<ul>
</div>
</body>
</html>
Seria essa idéia a ser fixada, lembrando que para isso, temos que definir como será bloqueado as listas internas <li></li> , pois esse processo citado acima, apenas deini que caso haja alguma atribuição forçada, ele apenas flutue de acordo com sua Tag Mãe, então agora temos que definir esse bloqueio que será com a propriedade display: inline; e então a estrutura básica ficará assim:
<html>
<head><title></title>
<style type="text/css">
<!--
#menu #underlist li { display: inline; }
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#">link 01 </a></li>
<li><a href="#">link 02 </a></li>
<ul>
</div>
</body>
</html>
Lembrando que essa situação é definida da seguinte forma, temos em sua estrutura HTML, uma lista onde temos a Tag mãe e suas dependentes fixadas por uma DIV:
<div id="menu"> = div fixando a lista não ordenada, onde se atribui um ID="menu" que será sua identificação individual numa formatação CSS;
<ul id="underlist"> = tag mãe fixando suas listas internas(dependetes), onde se atribue também uma identificação individual;
<li></li> = listas internas, onde ficam as opções de textos linkados.
</ul> = encerrando a ul;
</div> = encerrando a div fixadora;
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#menu #underlist {
width: 150px;
list-style-type: none;
padding: 30px;
border: 1px solid #000;
}
#menu #underlist li {
border: 1px solid #000;
margin: 10px;
}
#menu #underlist a {
display: block;
height: 30px;
padding: 30px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#" accesskey="a" tabindex="1" title="este é o link 01">link 01</a></li>
<li><a href="#" accesskey="b" tabindex="2" title="este é o link 02">link 02</a></li>
<li><a href="#" accesskey="c" tabindex="3" title="este é o link 03">link 03</a></li>
<li><a href="#" accesskey="d" tabindex="4" title="este é o link 04">link 04</a></li>
<li><a href="#" accesskey="e" tabindex="5" title="este é o link 05">link 05</a></li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#menu #underlist {
width: 150px;
list-style-type: none;
padding: 30px;
border: 1px solid #000;
}
#menu #underlist li {
border: 1px solid #000;
margin: 10px;
}
#menu #underlist a {
display: block;
height: 30px;
padding: 30px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#" accesskey="a" tabindex="1" title="este é o link 01">link 01</a></li>
<li><a href="#" accesskey="b" tabindex="2" title="este é o link 02">link 02</a></li>
<li><a href="#" accesskey="c" tabindex="3" title="este é o link 03">link 03</a></li>
<li><a href="#" accesskey="d" tabindex="4" title="este é o link 04">link 04</a></li>
<li><a href="#" accesskey="e" tabindex="5" title="este é o link 05">link 05</a></li>
</ul>
</div>
</body>
</html>
Veja o resultado 04.
Nesse caso procurei aplicar uma forma mais simples possível, para facilitar o intendimento, apesar dessa opção se tornar a mais fácil de desenvolver, temos varias situações, mas nessa foi definida da seguinte forma, o que deve-se levar em conta:
list-style-type: none;
- Esta característica foi aplicada em nossa <ul> Tag mãe, com uma identidade #underlist onde ela tem como função retirar as marcações padrão dessas tags, outra propriedade que deverá levar em conta é a propriedade display: block; aplicada nos links da lista, ela tem como função bloquear o espaçamento de uma determinada propriedade, que no caso fiz para as <a></a> que são nossas opções de links, sua estrura comentada segue abaixo:
<html>
<head><title></title>
<style type="text/css">
<!--
#underlist { list-style-type: none; width: 150px; border: 1px solid #000; padding: 10px; } /* Fica responsável pela estruturação no <ul> */
#menu #underlist a { display: block; height: 30px; padding: 30px; border: 1px solid #000; } /* Fica responsável pela estruturação dos links*/
-->
</style>
</head>
<body>
<div id="menu">
<ul id="underlist">
<li><a href="#">link</a></li>
</ul>
</div>
</body>
</html>
Então é isso galera, espero que tenha ficado a ideia, lembrando que podemos encontrar mutas referências boas de pessoas renomadas e intendidas no assunto, então abaixo segue uma referencia para intender mais sobre estruturação de funções como:
- Border
- Margin
- Padding
- Width
- height
REFERÊNCIA
CSS Box model e suas definições.
Valeu e até a próxima!
Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de dúvidas poste abaixo ou utilize nosso Fórum CSS/JavaScript/DHTML
)
Posted 30 September 2006 - 03:50 PM
