Menu Dropdown Responsivo

Question

Criei um menu responsivo, gostaria de adicionar uma ação ao meu botão, quando ele fosse clicado meu menu iria aparecer, o menu ja esta criado, mas ainda não consegui com que ele aparece apenas com o clique:
este é meu index onde o menu esta

   <input type="checkbox" id="bt-menu">
                <label> MENU <i class="fa fa-bars" aria-hidden="true"></i></label>
                 <nav class="menu">
                    <ul>
                        <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i> INICIO</a></li>
                        <li><a href="sobre.html"><i class="fa fa-group" aria-hidden="true"></i> SOBRE</a></li>
                        <li><a href="servicos.html"><i class="fa fa-wrench" aria-hidden="true"></i> SERVIÇOS</a></li>
                        <li><a href="contato.html"><i class="fa fa-commenting" aria-hidden="true"></i> CONTATO</a></li>
                    </ul>	  
                </nav>

e esse meu estilo do menu:

label {
    padding: 6px;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    width: 100%;
    font-size: 20px;
    cursor: pointer;
    height: 40px;
    display: none;
}

.menu {
    color: #ffffff;

    background: #cc2a2a; /* Old browsers */
    background: -moz-linear-gradient(top, #cc2a2a 0%, #7c1d1f 100%, #7c1d1f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cc2a2a 0%,#7c1d1f 100%,#7c1d1f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cc2a2a 0%,#7c1d1f 100%,#7c1d1f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc2a2a', endColorstr='#7c1d1f',GradientType=0 ); /* IE6-9 */
}

.menu a{
    color: #ffffff;
    font-size: 15px;
  
}
.menu ul li{
    width: 100%;
    text-align: center;
    float: none;
    padding: 10px;
    
}


#bt-menu{
    display: none;
}

Coloquei meus breakpoints em outra folha de estilo em sass:

  label
		display: none
		+breakpoint($celular)
			display: block
      
  .menu
		display: none


	#bt-menu:checked ~ .menu
		+breakpoint($celular)
			display: block
		+breakpoint($tablet)
			display: block

css html sass

user77295 · Answer

Problema resolvido 
adicionei um for="bt-menu" na minha label e funcionou corretamente

Emmanuel S. · Answer

Recomendo você dar uma olhada em Foundation, é um framework onde ja tem bastante coisa de html/css/js pronta e facilita e muito na hora de criar menus, galeria de img, essas coisas, ou procurar por bootstrap também, já o seu código funcionou no codepen aqui também(somente o apertar o botão ele abre o menu)

Answered by Emmanuel S. on September 26, 2021

Menu Dropdown Responsivo

2 Answers

Add your own answers!

Ask a Question