How to make my navigation bar menu button work? - html

Question

i dont know why my button dont show the menu when clicked ;
i try almost everything i know, but i cant define my problem.
i use the "checkbox" trick to show the hamburger button when the site go under 500 px to show a resposive menu but i dont know w
i searched on google and youtube mìbut nothing i can help me put
HTML
<header>
<ul>
<!-- ho aggiunto checkbox,toggle(bottone menu, id carrellore(carrello che compare con la mediaquery -->
<input type="checkbox" id="toggle"/>
<p id="carrellore"><img src="./images/carrello.png"></p>
<label for="toggle">☰</label>
<!-- ho aggiunto checkbox,toggle(bottone menu, id carrellore(carrello che compare con la mediaquery -->
<li>HOME<li>
<li>CATALOGO<li>
<% if ((session.getAttribute("login_result")!=null) && ((Boolean)(session.getAttribute("login_result")))) {%>
<li>PROFILO<li>
<%} else { %>
LOGIN<li>
<%} %>
<li id="carrello"><img src="./images/carrello.png"></li>
</ul>
<div id="spazio">Spazio libero<br><br></div>
</header>
CSS
header ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
header li {
float: left;
}
header li a {
display: block;
text-decoration: none;
color: white;
padding: 15px 15px;
font-family: "Lato", sans-serif;
}
header li a:hover {
background-color: #0080ff;
}
label {
margin: 0 40px 0 0;
font-size: 30px;
line-height: 70px;
display: none;
width: 14px;
float: center;
color: #ffffff;
}
#toggle {
display:none;
}
#carrello {
float: right;
}
#carrello img {
height: 18px;
width: auto;
object-fit: contain;
}
#carrellore {
float:right;
display:none;
}
#carrellore img {
height: 30px;
width: auto;
object-fit: contain;
}
#spazio {
margin-top: 25px;
visibility: hidden;
}
#logo {
display: block;
margin: auto;
}
/* mediaquery per rendere il sito responsive */
#media only screen and (max-width: 500px) {
#spazio {
margin-top: 50px;
visibility: hidden;
}
#carrellore {
display: block;
cursor: pointer;
}
label {
display: block;
cursor: pointer;
float: center;
}
header li {
background-color: #000000;
color: white;
text-align: center;
width: 100%;
display: none;
}
header li a {
background-color: #000000;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + header li a {
display:block ;
}
“I’m setting up a new server, and want to support UTF-8 fully in my web application. Where do I need to set the encoding/charsets?”
}
the button dont trigger at all but the checkbox check

Answer 1

Try this code..
HTML
<header>
<ul>
<input type="checkbox" id="toggle"/>
<p id="carrellore"><img src="./images/carrello.png"></p>
<label for="toggle">☰</label>
<ul class="menu">
<li>HOME<li>
<li>CATALOGO<li>
<% if ((session.getAttribute("login_result")!=null) && ((Boolean)(session.getAttribute("login_result")))) {%>
<li>PROFILO<li>
<%} else { %>
LOGIN<li>
<%} %>
<li id="carrello"><img src="./images/carrello.png"></li>
</ul>
<div id="spazio">Spazio libero<br><br></div>
</header>
**CSS**
header ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
header li {
float: left;
}
header li a {
display: block;
text-decoration: none;
color: white;
padding: 15px 15px;
font-family: "Lato", sans-serif;
}
header li a:hover {
background-color: #0080ff;
}
label {
margin: 0 40px 0 0;
font-size: 30px;
line-height: 70px;
display: none;
width: 14px;
float: center;
color: #ffffff;
}
#toggle {
display:none;
}
#carrello {
float: right;
}
#carrello img {
height: 18px;
width: auto;
object-fit: contain;
}
#carrellore {
float:right;
display:none;
}
#carrellore img {
height: 30px;
width: auto;
object-fit: contain;
}
header {
padding-top: 66px;
}
body {
margin: 0px;
}
#logo {
display: block;
margin: auto;
}
/* mediaquery per rendere il sito responsive */
#media only screen and (max-width: 500px) {
#spazio {
margin-top: 50px;
visibility: hidden;
}
#carrellore {
display: block;
cursor: pointer;
}
label {
display: block;
cursor: pointer;
float: center;
}
header ul.menu {
display: none;
}
header li {
background-color: #000000;
color: white;
text-align: center;
width: 100%;
}
header li a {
background-color: #000000;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + header li a {
display:block ;
}
}
JQUERY
<script type="text/javascript">
$('body').on('click','label',function() {
$('.menu').slideToggle();
});
</script>