Dropdown Menu With Css

Como Colocar ícones de Redes Sociais no HTML

5 Botões Css com Linhas Animadas

Postado: 23 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

Veja neste artigo vamos criar um Dropdown Menu With estilizado com e html Css.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Menu Dropdown vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

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

Essa tag que usaremos para criar os Dropdown Menu With.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu Dropdown.

Estrutura Código Html:

    <nav>
    
    <ul>
    
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Quem Somos">Quem Somos</a></li>

        <li><a href="#" title="Blog"><i class="icon icon-down-open"></i> Blog</a><span class="lineBottom"></span>
            
            <ul>
                <li><a href="#" title="Técnologia"> Técnologia</a></li>
                <li><a href="#" title="Redes Sociais"> Redes Sociais</a></li>
                <li><a href="#" title="Marketing Digital"> Marketing Digital</a></li>
            </ul>

        </li>

        <li><a href="#" title="Tutoriais"><i class="icon icon-down-open"></i> Tutoriais</a><span class="lineBottom"></span>
            
            <ul>
            
                <li><a href="#" title="Back-end"><i class="icon icon-right-open"></i> Back-end</a><span class="lineRight"></span>
                    
                    <ul>
                        <li><a href="#" title="PHP">PHP</a></li>
                        <li><a href="#" title="Mysql">Mysql</a></li>
                        
                        <li><a href="#" title="Front-end"><i class="icon icon-right-open"></i> Front-end</a><span class="lineRight"></span>
                        
                            <ul>
                                <li><a href="#" title="Html">Html</a></li>
                                <li><a href="#" title="Css">CSS</a></li>
                                <li><a href="#" title="JavaScript">JavaScript</a></li>
                            </ul>
                        
                        </li>

                    </ul>

                </li>
            
            </ul>

        </li>
        
        <li><a href="#" title="Contato">Contato</a></li>
    
    </ul>

    </nav>

Estrutura Código CSS

Para conseguirmos o efeito desejado no Menu Dropdown, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar menu com o efeito desejado.

span.lineBottom,span.lineRight {

  display: block;
  box-shadow:inset 2px 0px 0px #4C4C4C;
  position: absolute;
  left: 0px;
  width:100%;
  height: 100%;
  top: 0px;

}

span.lineBottom {

  box-shadow:inset 0px 2px 0px #4C4C4C;
  position: absolute;
  width: 100%;
  bottom: 0px;

}

nav {
  
  display:block;
  margin:auto;
  
}

ul {
  margin:0;
  padding:0;
  list-style:none;
}

ul ul {
  opacity:0;
  position:absolute;
  top:160%;
  visibility:hidden;
  transition:all .4s ease;
  -webkit-transition:all .4s ease;
}

ul ul ul {
  top:0%;
  left:160%;
}

ul ul li:hover > ul {
  top:0%;
  left:100%;
  opacity:1;
  visibility:visible;
}

ul li:hover > ul {
  opacity:1;
  top:100%;
  visibility:visible;
}

ul li {
  float:left;
  position:relative;
}

ul ul li {
  float:none;
}

ul li {
  background-color:#007CFF;
  cursor: pointer;
}

ul a {

  text-decoration:none;
  display:block;
  color:#ffffff;
  padding:15px 10px;
  width:170px;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}

ul li:hover   { background-color:#f3c40b; }
ul li a:hover { background-color:#f3c40b; }

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

Veja o Resultado baixo!