Neste post irei ensinar a montar um menu dinâmico semelhante ao menu do site Uol, é bem simples o processo que iremos ver:
1º Passo é montar a estrutura HTML e CSS!
<html>
<head>
<title>Blog Teste</title>
</head>
<body>
</body>
</html>
<head>
<title>Blog Teste</title>
</head>
<body>
</body>
</html>
2º Passo é montar o seguite código na estrutura <Style>:
<style type="text/css">
#menu { /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #43A9FF; /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: none; /* Aqui definimos a decoração do texto*/
}
#menu:hover { /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #1E77C3; /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: underline; /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
#menu { /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #43A9FF; /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: none; /* Aqui definimos a decoração do texto*/
}
#menu:hover { /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #1E77C3; /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: underline; /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
3º Passo é colocar em pratica no <body>:
<a id="menu" href="http://bolg-teste.blogspot.com/">Blog Teste</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:contatopantec@gmail.com">E-mail</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:contatopantec@gmail.com">E-mail</a><br>
PRONTO - O menu esta feito, voce poderá formatar mais tarde do seu gosto!
O Código pronto ficará assim:
<html>
<head>
<title>Menu</title>
<style type="text/css">
#menu { /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #43A9FF; /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: none; /* Aqui definimos a decoração do texto*/
}
#menu:hover { /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #1E77C3; /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: underline; /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
</head>
<body>
<a id="menu" href="http://bolg-teste.blogspot.com/">Blog Teste</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:contatopantec@gmail.com">E-mail</a><br>
</body>
</html>
<head>
<title>Menu</title>
<style type="text/css">
#menu { /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #43A9FF; /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: none; /* Aqui definimos a decoração do texto*/
}
#menu:hover { /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #1E77C3; /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: underline; /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
</head>
<body>
<a id="menu" href="http://bolg-teste.blogspot.com/">Blog Teste</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:contatopantec@gmail.com">E-mail</a><br>
</body>
</html>
Créditos: ScriptFácil
Blogged with Flock