![[Pure CSS] Menu dropdown Empty](https://2img.net/i/empty.gif)
[Pure CSS] Menu dropdown Qua 17 Set 2014 - 0:34
Resultado final:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Como mostra no resultado final é um menu com um dropdown, dava pra ter feito o estilo do menu 10x melhor, mas olhem a hora que é kkk (00:30), estou cansado e amanhã terei de sair cedo, mas enfim, eu fiz o menu apenas pra demostrar a vocês que não é nem um pouco difícil fazer um menu dropdown com CSS, o código pra estudos:
E a pré-visualização:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Espero que gostem!
Até + amigos!
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Como mostra no resultado final é um menu com um dropdown, dava pra ter feito o estilo do menu 10x melhor, mas olhem a hora que é kkk (00:30), estou cansado e amanhã terei de sair cedo, mas enfim, eu fiz o menu apenas pra demostrar a vocês que não é nem um pouco difícil fazer um menu dropdown com CSS, o código pra estudos:
- Código:
<!DOCTYPE html>
<html>
<!--
// Name: Menu dropdown - Pure CSS
// Creator: Premotheus
// Update: 00:30
// Premotheus(C)
// Don't remove the credits of creator
-->
<meta charset="utf-8" />
<head>
<style type="text/css">
.category_id_top {
display: none
}
input[type="checkbox"]:checked + .category_id_top {
display: block;
}
li, ol, ul {
list-style: none
}
a { text-decoration: none }
ul#nav_app {
display: inline;
top: 0px !important;
position: relative;
}
ul#nav_app li {
display: inline-block;
}
.id_top > input[type="checkbox"] {
display: none
}
ul#nav_app li > a, ul#nav_app li > label#comp {
color: #000;
padding: 5px;
border-radius: 3px;
background: rgba(58, 181, 232, 0.71);
position: relative;
top: 8px;
z-index: 1;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.navbar {
background: rgb(49, 189, 237);
padding: 2px;
height: 37px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(92, 149, 240);
}
menu {
padding: 10px;
line-height: 130%;
position: relative;
}
.topmenu {
position: relative;
height: 120px;
background-size: cover;
background: url(http://i.imgur.com/ncXR7Jr.jpg);
background-size: cover;
}
.logo {
padding: 5px;
height: 110px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: rgba(122, 125, 255, 0.2);
}
.logo:hover {
background: rgba(122, 125, 255, 0.02);
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
}
label#comp {
cursor: pointer;
}
.category_id_top {
position: relative;
}
ul#id_top {
position: absolute;
}
ul#id_top {
display: block;
margin-left: -15px;
padding: 10px;
margin-top: -1px;
}
ul#id_top li {
display: block;
padding: 4px;
}
.category_id_top {
transition-duration: 4s;
-o-transition-duration: 4s;
-webkit-transition-duration: 4s;
-moz-transition-duration: 4s;
}
.logo a {
font-size: 50px;
position: relative;
top: 35px;
z-index: 1;
color: #EDECEC;
font-family: Arial;
font-weight: 500;
}
.logo a:hover {
transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
color: #fff;
}
ul#nav_app li > a:hover, ul#nav_app li > label#comp:hover {
background: rgba(58, 175, 223, 0.9);
color: #232222;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
ul#nav_app > .active a {
background: rgba(58, 175, 223, 0.9);
}
</style>
</head>
<body>
<menu>
<div class="topmenu">
<div class="logo"> <a href="#"> Logo </a> </div>
</div>
<div class="navbar">
<ul id="nav_app">
<li class="active"><a href="#index"> Index </a></li>
<li><a href="/forum"> Forums </a></li>
<li><a href="#category#"> Category</a> </li>
<li><a href="#"> Download </a></li>
<li class="id_top"> <label for="class" class="comp" id="comp">Components</label>
<input id="class" type="checkbox" />
<div class="category_id_top">
<ul class="category" id="id_top">
<li><a href="#">Category</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Category</a></li>
</ul>
</div>
</li>
</ul>
</div>
</menu>
</body>
</html>
E a pré-visualização:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Espero que gostem!
Até + amigos!
