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 still could not get it to appear just with the click: this is my index where the menu is
<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 is my menu style:
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