Best Web
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Últimos assuntos
» xxxxxxxxxxxxxx
[TUTORIAL] Menu dropdown em puro css Clock-10Ter Jan 02, 2018 1:44 am por While

» dfghmggdsfngmgfdgfhgm
[TUTORIAL] Menu dropdown em puro css Clock-10Sáb Jul 09, 2016 4:42 am por While

» Ranks Pro X
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 6:44 pm por Harleen

» [Galeria] - Harleen alguns trabalhos
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 6:33 pm por Harleen

» Banner para Família
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 5:37 pm por YouTube

» Ajuda com Formulário
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 2:39 pm por Convidado

» Avatar - Killua
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 4:57 am por Convidado

» Destaque IPB
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 3:42 am por YouTube

» Últimos assuntos / Staff Online igual BS.
[TUTORIAL] Menu dropdown em puro css Clock-10Sex Jun 10, 2016 2:27 am por YouTube

» Adapitação muito grande
[TUTORIAL] Menu dropdown em puro css Clock-10Qui Jun 09, 2016 1:53 am por Convidado

» Faça uma pergunta ao membro abaixo
[TUTORIAL] Menu dropdown em puro css Clock-10Qui Jun 09, 2016 1:27 am por Anderson_WondeR

» Bom dia a todos!
[TUTORIAL] Menu dropdown em puro css Clock-10Qua Jun 08, 2016 11:03 pm por Jukebox


[TUTORIAL] Menu dropdown em puro css

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

While
While
Administrador
Administrador
Mensagens : 381
Reputação : 8
https://bestweb.forumeiros.com

MensagemWhile Ter maio 24, 2016 6:09 pm

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:
[TUTORIAL] Menu dropdown em puro css 1MvKvSL

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissões neste sub-fórum
Não podes responder a tópicos