Accordion Html Css
Campo de busca 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!
Deixe um comentário