Seu menu já está funcionando no click repare que ele é .on('click')
No entanto seu menu tem uns problemas de CSS que vc ainda precisa corrigir, pois ele está quebrando a linha antes de entrar o css que recolhe o menu. Além disso display:hidden
não existe, acredito que deveria ser display:none
...
Resumindo fiz alguns ajustes de css e no script... pois o toggle estava escondendo o menu inteiro inclusive o próprio btn o correto seri '#menu ul'
Veja como fica no código:
$('#menu-icon').on('click', function () {
$('#menu ul' ).slideToggle('slow');
});
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
header {
background: #F62459;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
border-bottom: 5px solid #F62459;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
a {
color: #000;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 50px;
background: url(https://unsplash.it/100/50) no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
#menu-icon {
background: url(https://unsplash.it/32/32) no-repeat center;
display: none;
width: 32px;
height: 32px;
}
@media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul {
display: none;
position: absolute;
padding: 20px;
background: #c5c5c5;
right: 10px;
top: 65px;
width: 35%;
}
/* nao precisa desse css
nav:hover ul {
display: block;
} */
nav li {
text-align: center;
width: 100%;
padding: 15px 0;
margin: 0;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<header>
<a href="#" id="logo"></a>
<nav id="menu">
<a href="#" id="menu-icon"></a>
<ul>
<li style="list-style: none; display: inline"></li>
<li>
<a href="#">Home</a>
</li>
<li style="list-style: none; display: inline"></li>
<li>
<a href="#">About</a>
</li>
<li style="list-style: none; display: inline"></li>
<li>
<a href="#">Work</a>
</li>
<li style="list-style: none; display: inline"></li>
<li>
<a href="#">Contact</a>
</li>
<li style="list-style: none; display: inline"></li>
</ul>
</nav>
</header>