Best Web

Fórum de suporte á códigos e gráfico á Usuários forumeiros.


    [TUTORIAL] Menu dropdown em puro css

    Compartilhe
    avatar
    While
    Administrador
    Administrador

    Mensagens : 380
    Reputação : 8

    [TUTORIAL] Menu dropdown em puro css

    Mensagem por While 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:

      Data/hora atual: Ter Out 17, 2017 2:46 am