Início
Loja
Há algum tempo eu visitei alguns sites e avistei um efeito bem legal nos Menus, vendo a aparência física daquilo eu comecei a desenvolver o código CSS e consegui chegar ao resultado que eu queria, você pode verificar um dos sites que me inspiraram no final do tópico. Lembrando que não é um menu responsivo.
» PrintScreen:
Print (Parte 1) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Print (Parte 2) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
» Demonstração:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Pode estar Off-line)
» Arquivo Completo (A Página está com todo a sua estrutura HTML):
» Arquivo Separado:
Html
Css
Efeitos elegantes utilizando :before e :after.
» Créditos:
Front-end Para Leigos (Paullo Norato) - Uma das Inspirações para a criação
Je4n - Codificação.
» PrintScreen:
Print (Parte 1) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Print (Parte 2) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
» Demonstração:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Pode estar Off-line)
» Arquivo Completo (A Página está com todo a sua estrutura HTML):
- Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Ac4JIGg.png" />
<link href='http://je4n.wasd.in/fonte/segoeui.ttf' rel='stylesheet' type='text/css'>
<title>Menu - WASD</title>
</head>
<style>
@charset "iso-8859-1";
/* Documento CSS por Je4n */
/* Acesse www.wasd.in & www.je4n.zz.mu */
* {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
*::selection {
background: #008cba none repeat scroll 0 0;
color: #FFFFFF;
}
*::-moz-selection {
background: #008cba none repeat scroll 0 0;
color: #FFFFFF;
}
a, a:visited, a:hover, a:active {
text-decoration: none;
}
a:hover {
border-bottom: none;
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
}
html, body {
background: #02678f;
font-family: Segoe UI;
color: #FFF;
margin: 0;
position: relative;
overflow: auto;
font-size: 11px;
}
/* Header */
header {
background: #25262C;
border-bottom: 1px solid #323236;
outline: 1px solid #1E1E22;
top: 0;
width: 100%;
height: 52px;
line-height: 52px;
}
/* Fim - Header */
/* Conteúdo (Posição e Tamanho) */
.container {
margin-left: auto;
margin-right: auto;
width: 830px;
}
/* Fim - Conteúdo (Posição e Tamanho) */
/* Posicionamento */
.left {
float: left;
}
.right {
float:right;
}
/* Fim - Posicionamento */
/* Menu Navegador */
.menu-navegador {
float: right;
margin-top: 0;
z-index: 100;
width:100%;
}
.menu-navegador ul {
text-decoration:none;
}
.menu-navegador li {
cursor: pointer;
float: left;
color: #FFF;
font-family: Segoe UI;
font-size: 14px;
font-weight: normal;
text-decoration: none;
height: 53px;
line-height: 53px;
padding: 0 18px;
}
.menu-navegador a {
color: #FFF;
}
.menu-navegador a:hover {
color: #FFF;
}
.menu-navegador a:before, .menu-navegador a:after {
content: "";
position: relative;
bottom: 1px;
z-index: 1;
font-size: 14px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu-navegador a:before {
content: "{";
right: 5%;
}
.menu-navegador a:after {
content: "}";
left: 5%;
}
.menu-navegador li a:hover:before, .menu-navegador li a:hover:after {
color:#FFF;
}
.menu-navegador li a:hover:before {
right:10%;
}
.menu-navegador li a:hover:after {
left:10%;
}
/* Fim - Menu Navegador */
</style>
<body>
<header>
<div class="container">
<ul class="menu-navegador">
<div style="float: right;">
<li><a href="#">Início</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Membros</a></li>
<li><a href="#">Loja</a></li>
<li><a href="#">Regras</a></li>
</div>
<li><a href="http://wasd.in">WASD.in</a></li>
</ul>
</header>
</div>
</body>
</html>
» Arquivo Separado:
Html
- Código:
<header>
<div class="container">
<ul class="menu-navegador">
<div style="float: right;">
<li><a href="#">Início</a></li>
<li><a href="#">Perfil</a></li>
<li><a href="#">Membros</a></li>
<li><a href="#">Loja</a></li>
<li><a href="#">Regras</a></li>
</div>
<li><a href="http://wasd.in">WASD.in</a></li>
</ul>
</header>
Css
- Código:
/* Header */
header {
background: #25262C;
border-bottom: 1px solid #323236;
outline: 1px solid #1E1E22;
top: 0;
width: 100%;
height: 52px;
line-height: 52px;
}
/* Fim - Header */
/* Conteúdo (Posição e Tamanho) */
.container {
margin-left: auto;
margin-right: auto;
width: 830px;
}
/* Fim - Conteúdo (Posição e Tamanho) */
/* Posicionamento */
.left {
float: left;
}
.right {
float:right;
}
/* Fim - Posicionamento */
/* Menu Navegador */
.menu-navegador {
float: right;
margin-top: 0;
z-index: 100;
width:100%;
}
.menu-navegador ul {
text-decoration:none;
}
.menu-navegador li {
cursor: pointer;
float: left;
color: #FFF;
font-family: Segoe UI;
font-size: 14px;
font-weight: normal;
text-decoration: none;
height: 53px;
line-height: 53px;
padding: 0 18px;
}
.menu-navegador a {
color: #FFF;
}
.menu-navegador a:hover {
color: #FFF;
}
.menu-navegador a:before, .menu-navegador a:after {
content: "";
position: relative;
bottom: 1px;
z-index: 1;
font-size: 14px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu-navegador a:before {
content: "{";
right: 5%;
}
.menu-navegador a:after {
content: "}";
left: 5%;
}
.menu-navegador li a:hover:before, .menu-navegador li a:hover:after {
color:#FFF;
}
.menu-navegador li a:hover:before {
right:10%;
}
.menu-navegador li a:hover:after {
left:10%;
}
/* Fim - Menu Navegador */
Efeitos elegantes utilizando :before e :after.
» Créditos:
Front-end Para Leigos (Paullo Norato) - Uma das Inspirações para a criação
Je4n - Codificação.
Última edição por Je4n em Sáb Out 18, 2014 1:36 am, editado 1 vez(es)
