Então, vamos começar com o menu que é exibido na parte superior da janela.
Vocês já fizeram um bom trabalho para este menu. Certamente se lembram do belo degradê que foi salvo como uma imagem de um pixel. É exatamente isso que será utilizado agora. No entanto, antes disso, a estrutura HTML correspondente para a área do menu deve ser criada. Poderia se parecer assim:
<div class="header"> <div class="header-top"> <h1>Seu contador</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Página inicial</a></li> <li><a href="#">Sobre nós</a></li> <li><a href="#">Como trabalhamos</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Aviso Legal</a></li> </ul> </div> <div class="header-img"> </div> </div>
Para a estilização do fundo, a imagem de um pixel será inserida e repetida verticalmente até preencher toda a área do elemento.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Em seguida, o menu pode ser estilizado. Na verdade, não há nada de especial a considerar. O crucial em tais menus são sempre apenas os seguintes aspectos:
• Ocultar os marcadores de lista com list-style-type: none;.
• Certificar-se de que as entradas da lista sejam exibidas lado a lado.
Estou trabalhando neste ponto – vocês já sabem – com um degradê que é implementado através de uma imagem. Atualmente, é claro que existem muitas outras opções disponíveis para menus. Pensem, por exemplo, nos frameworks de JavaScript como jQuery. Apresentar todas essas possibilidades aqui obviamente excederia o escopo. No entanto, já existem muitos geradores online onde é possível criar menus com apenas alguns cliques. Um deles – sem avaliar se é o mais genial de todos – está disponível em http://www.cssmenubuilder.com/.
De qualquer forma, eu optei pela seguinte variante:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
O crucial é realmente apenas o estado de foco ao passar o mouse. Quando esse evento ocorrer, outra imagem de fundo é exibida.
O menu da direita
O site não possui apenas um menu na parte superior, também há um menu exibido na área da janela à direita.
Este menu pertence à área div com a classe content-right. Para a fase de desenvolvimento da página, eu apenas coloquei conteúdos fictícios lá.
<div class="content-right"> <h2>Menu principal</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
A área é inicialmente posicionada no local apropriado e no tamanho desejado.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Agora, vamos fazer a definição do menu propriamente dito. Desta vez, no entanto, as entradas estão dispostas verticalmente. Portanto, vocês só precisam se certificar de ocultar os marcadores de lista. Quanto ao restante da estilização do menu, a escolha final é com vocês.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Agora, a visualização no navegador deve se parecer com isso:
O menu inferior
No rodapé do site, haverá outro menu. Aqui no PSD-Tutorials.de, um menu semelhante também é usado para disponibilizar links para informações gerais.
No nosso site, também há um aviso de direitos autorais. Ambas as coisas são bastante típicas de sites. Primeiro, a estrutura HTML novamente.
<div class="bottom"> <ul> <li><a href="index.html">Página inicial</a></li> <li><a href="#">Sobre nós</a></li> <li><a href="#">Novidades</a></li> <li><a href="#">Centro de controle</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Mapa do site</a></li> </ul> <p>© Direitos autorais 2014 por PSD-Tutorials.de</p> </div>
É uma lista simples de ul. Cada item da lista contém uma entrada de menu. Abaixo da lista ul, há um elemento p com o aviso de direitos autorais. O que falta agora é obviamente a sintaxe CSS novamente.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Como vocês desejam projetar o rodapé é, em última análise, com vocês. Eu novamente uso um gradiente de cores. No entanto, vocês também poderiam utilizar simplesmente uma cor de fundo ou diretamente a sintaxe CSS3. No caso da minha versão gráfica, é fundamental que a repetição seja evitada com background-repeat: no-repeat;.
Dêem primeiro uma olhada no resultado:
O que chama a atenção aqui são as linhas brancas ao lado de cada entrada de menu. Elas são definidas por meio de várias declarações border-left, o que basicamente significa que as declarações se referem a cada borda esquerda do elemento.
No total, a sintaxe para o menu inferior é a seguinte:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Há uma particularidade em relação ao menu superior. Na verdade, no caso do hover, nenhuma outra imagem é carregada. No entanto, para indicar aos visitantes que estão passando o mouse sobre um link, os links individuais são sublinhados quando o evento hover ocorre.
Ao final deste tutorial, os passos básicos para o site são concluídos. O que resta agora é embelezar a página. Mais sobre isso nos próximos tutoriais.
