Últimos assuntos
[TUTORIAL] Menu dropdown em puro css
Página 1 de 1 • Compartilhe
Informações:
Autor: Target
Funcionalidade: Todas as versões
- 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>
Resultado:
Tópicos semelhantes
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Ter Jan 02, 2018 1:44 am por While
» dfghmggdsfngmgfdgfhgm
Sáb Jul 09, 2016 4:42 am por While
» Ranks Pro X
Sex Jun 10, 2016 6:44 pm por Harleen
» [Galeria] - Harleen alguns trabalhos
Sex Jun 10, 2016 6:33 pm por Harleen
» Banner para Família
Sex Jun 10, 2016 5:37 pm por YouTube
» Ajuda com Formulário
Sex Jun 10, 2016 2:39 pm por Convidado
» Avatar - Killua
Sex Jun 10, 2016 4:57 am por Convidado
» Destaque IPB
Sex Jun 10, 2016 3:42 am por YouTube
» Últimos assuntos / Staff Online igual BS.
Sex Jun 10, 2016 2:27 am por YouTube
» Adapitação muito grande
Qui Jun 09, 2016 1:53 am por Convidado
» Faça uma pergunta ao membro abaixo
Qui Jun 09, 2016 1:27 am por Anderson_WondeR
» Bom dia a todos!
Qua Jun 08, 2016 11:03 pm por Jukebox