Responsive Dropdown Menu

Asked

Viewed 356 times

1

I created a responsive menu, I would like to add an action to my button, when it was clicked my menu would appear, the menu is already created, but I still can’t get it to appear with just the click: this is my index where the menu this

   <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>

and this style of my 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;
}

I put my breakpoints in another style sheet in Sass:

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


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

html css sass

  • I replicated your code in Codepen and it worked very well. I just had to fix the indentation that is really ugly. https://codepen.io/VitorLuizC/pen/PKoRWw

  • @Vitorluizc the endentação is bad because I pasted wrong , but here it’s not working, I’ve checked the code and nothing is wrong.

2 answers

0

I recommend you take a look at Foundation, is a framework where already have enough html/css/js thing ready and makes it easy and very easy to create menus, img gallery, those things, or search for bootstrap too, already your code worked in codepen here too(just the press the button it opens the menu)

0

Problem solved added a for="bt-menu" on my label and worked properly

Browser other questions tagged html css sass

You are not signed in. Login or sign up in order to post.