Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Administrador
Administrador
Mensagens : 380
Reputação : 8
Ver perfil do usuáriohttp://bestweb.forumeiros.com

[TUTORIAL] Menu dropdown em puro css

em 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:
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum