Para construir esse menu vamos precisar saber um pouco de html, para montar a estrutura e um pouco de CSS para o layout. Sabendo essas duas linguagens você pode deixar a sua imaginação fluir e montar um menu do seu jeito.
Mãos a massa!!!
Você vai precisar de uma plataforma de desenvolvimento, eu usei o básico bloco de notas, para quem não sabe, para criar uma pagina em bloco de notas é só você renomear o arquivo para .html e pronto, mas você também pode usar outra plataforma de sua preferência.
Primeiro precisamos montar a estrutura do menu, que nada mais é uma lista, veja:
<body>
<div id="menuPai">
<ul id="nav">
<li id="menu"><a href="#">Inicio</a></li>
<li id="menu"><a href="#">Linguagens</a>
<ul id="sub-menu">
<li><a href="#">Java</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li id="menu"><a href="#">Sistemas</a>
<ul id="sub-menu">
<li><a href="#">Sistema 1</a></li>
<li><a href="#">Sistema 2</a></li>
</ul>
</li>
<li id="menu"><a href="#">Contato</a></li>
<span></span>
</ul>
</div>
</body>
</html>
Para direcionar o link para o pagina que você deseja acessar através do menu basta trocar o # pelo endereço da pagina.
Agora para deixar o esse código com cara de menu vamos ao CSS:
<style type="text/css">
#menuPai ul{
list-style:none;
padding: 0px;
margin: 0px;
background: rgba(25, 25, 112, 0.2);
width:auto;
height:40px;
border-bottom:3px solid #191970;
border-radius:5px;
}
#menu {
position: relative;
float:left;
width:100px;
height:40px;
margin-left: 10px;
} /*coloca as opções uma do lado da outra */
#menu ul{
display:none;
}
#menu a{
float:left;
position:relative;
width:100px;
height:30px;
margin-top: 0px;
padding-top: 10px;
/* visual do link menu*/
background: rgba(25, 25, 112, 0);
color: #333;
text-decoration: none;
text-align: center;
border-bottom:3px solid #191970;
}
#sub-menu{
background: rgba(16, 78, 139, 0.2);
color: #EDEDED;
width:100px;
height:125px;
border-radius:5px;
}
#sub-menu a{
text-align:left;
text-indent:5px;
background: rgba(16, 78, 139, 0.2);
}
#menu a:hover {
background: rgba(16, 78, 139, 0.2);
color: #EDEDED;
border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */
border-radius:5px;
}
/* Hack para IE MAC*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* FIM */
#menu:hover ul{display:block;
}
Tudo junto fica, e com alguns comentários:
Menu_Blog1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--define o tipo de codificação como UTF-8 para mostrar corretamente acentos -->
<style type="text/css">
#menuPai ul{
list-style:none; /* aqui tira a formatação da lista, ou seja, tira o ponto e o sublinhado */
padding: 0px;
margin: 0px;
background: rgba(25, 25, 112, 0.2); /* cor de fundo do menu*/
width:auto;
height:40px;
border-bottom:3px solid #191970;
border-radius:5px;
}
#menu {
position: relative;
float:left;
width:100px;
height:40px;
margin-left: 10px;
} /*coloca as opções uma do lado da outra */
#menu ul{ /* Aqui deixa o submenu escondido*/
display:none;
}
#menu a{
float:left;
position:relative;
width:100px;
height:30px;
margin-top: 0px;
padding-top: 10px;
/* visual do link menu*/
background: rgba(25, 25, 112, 0);
color: #333;
text-decoration: none;
text-align: center;
border-bottom:3px solid #191970;
}
#sub-menu{
background: rgba(16, 78, 139, 0.2);
color: #EDEDED;
width:100px;
height:125px;
border-radius:5px;
}
#sub-menu a{
text-align:left;
text-indent:5px;
background: rgba(16, 78, 139, 0.2);
}
#menu a:hover {
background: rgba(16, 78, 139, 0.2);
color: #EDEDED;
border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */
border-radius:5px;
}
/* Hack para IE MAC*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* FIM */
#menu:hover ul{display:block; /* deixo o submenu visivel */
}
</style>
</head>
<body>
<div id="menuPai">
<ul id="nav">
<li id="menu"><a href="#">Inicio</a></li>
<li id="menu"><a href="#">Linguagens</a>
<ul id="sub-menu">
<li><a href="#">Java</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li id="menu"><a href="#">Sistemas</a>
<ul id="sub-menu">
<li><a href="#">Sistema 1</a></li>
<li><a href="#">Sistema 2</a></li>
</ul>
</li>
<li id="menu"><a href="#">Contato</a></li>
<span></span>
</ul>
</div>
</body>
</html>
Bom é isso, simples né? Na verdade, não parece ser simples a primeira vista, mas quando você começa a identificar cada item e como modificar ele você vai conseguir fazer muito mais e vai achar tudo fácil.
Até a próxima!
Nenhum comentário:
Postar um comentário