Accordion Html Css

Accordion Html Css

Criando um accordion com HTML5 e CSS3

Como fazer accordion HTML e CSS ?

Veja neste tutorial como criar um Accordion (Sanfona) usando apenas o Html5 CSS3.

Nesta seção, projetaremos uma estrutura simples na tag <div>, <nav>, <li> ,<i> e a <a> para inserirmos o link de destino. 

Essas são as tags que usaremos para criar o nosso Menu Accordion.

Vamos Adicionar o HTML

<div class="center">

    <nav class="menu">
        
        <li class="item" id="frontend">
            
            <a href="#frontend" class="btn"><i class="icon icon-down-open-mini" aria-hidden="true"></i> Front-end</a>
            <div class="smenu">
                
                <a href="#" title="Html">Html</a>
                <a href="#" title="Css">Css</a>
                <a href="#" title="Jquery">Jquery</a>


            </div>

        </li>
        
        <li class="item" id="backend">
            
            <a href="#backend" class="btn"> <i class="icon icon-down-open-mini" aria-hidden="true"></i> Back-end</a>
            <div class="smenu">

                <a href="#" title="PHP">PHP</a>
                <a href="#" title="python">Python</a>
                <a href="#" title="MySql">MySql</a>
            
            </div>

        </li>
        
        <li class="item" id="artigos">
            
            <a href="#artigos" class="btn"><i class="icon icon-down-open-mini" aria-hidden="true"></i> Artigos</a>
            <div class="smenu">
                <a href="#" title="SEO">SEO</a>
                <a href="#" title="Google Adsense">Google Adsense</a>
            </div>

        </li>
        
        <li class="item" id="contato">
            <a href="#" class="btn"><i class="icon icon-down-open-mini"></i> Contato</a>
        </li>

    </nav>

</div><!--center-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Campo de Busca.

.center {

    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

.menu {

    width: 300px;
    border-radius: 8px;
    overflow: hidden;

}

.item {

    border-top: 1px solid #065fbd;
    overflow: hidden;
    background: #C28C2E;
    color: #222220;

}

.btn {

    display: block;
    padding: 16px 20px;
    background: #007cff;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    text-decoration: none;

}

.btn:before {

    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #007cff;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);

}

.btn i {

    margin-right: 10px;

}

.smenu {

    background: #4c4c4c;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;

}

.smenu a {

    color: #ffffff;
    display: block;
    padding: 16px 26px;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
    text-decoration: none;

}

.smenu a:hover {

    color:#007cff;

}

.item:target .smenu {
   
    max-height: 10em;

}

Combinando as Duas seções acima com Html Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando