TransWikia.com

Menu Dropdown Responsivo

Stack Overflow em Português Asked by user77295 on September 26, 2021

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
	

2 Answers

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

Answered by user77295 on September 26, 2021

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP