Você não está conectado. Conecte-se ou registre-se

[Pure CSS] Menu dropdown

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [Pure CSS] Menu dropdown em Qua Set 17, 2014 12:34 am

Target

avatar
Membro elite

Resultado final:


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:
http://board-test.forum-livre.com/h10-

Espero que gostem!
Até + amigos! Wink



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br

2 Re: [Pure CSS] Menu dropdown em Qua Set 17, 2014 12:12 pm

waghcwb

avatar
Membro elite

Muito bom, CSS esta ficando cada vez melhor! Imagino as possibilidades do CSS4 o.o



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

3 Re: [Pure CSS] Menu dropdown em Qua Set 17, 2014 12:16 pm

Target

avatar
Membro elite

Imagine só: Um mundo sem JS só CSS, que perfeição kkkk
Mas acho que isso é só imaginação alta mesmo, mas seria muito bom e mais leve.



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br

4 Re: [Pure CSS] Menu dropdown em Qua Set 17, 2014 1:18 pm

Release's

avatar
Membro elite

Sonhar mais um Sonho kkkk' seria OTIMO @Target

Ver perfil do usuário http://rhdesign.ativoforum.com

5 Re: [Pure CSS] Menu dropdown em Qua Set 17, 2014 1:25 pm

Alex Habilidade

avatar
Membro ativo

De uns tempo pra cá, o CSS evoluiu muito!
E a cada ano que passa tenho certeza que ficará mais poderoso ainda...

Ver perfil do usuário

6 Re: [Pure CSS] Menu dropdown em Qua Set 17, 2014 8:31 pm

Target

avatar
Membro elite

Kkkk quem derá né Release rs
@Alex+Habilidade, com certeza, evoluiu e muito, vejo sites antigos que só tinha o background e as cores do link kk e hoje em dia a diferença que tá é gigantesca *.*



Olá Convidado,
Leia as regras.
Leia os termos de uso.
Obrigado por se cadastrar no Best Skins Forums!

Cordialmente,
Target.
Ver perfil do usuário http://bestskins.com.br

7 Re: [Pure CSS] Menu dropdown em Qui Dez 04, 2014 10:47 am

Fatalisss

avatar
Membro

Olá,
ótimo CSS.
Até mais!

Ver perfil do usuário

8 Re: [Pure CSS] Menu dropdown em Seg Fev 23, 2015 8:24 pm

David¹

avatar
Membro ativo

Ótimo código css obrigado

Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum