Responsive navigation menu with hiding on small screens in pure CSS - css

Question

I want to create a simple navigation menu with a special feature:
On a desktop browser it shows as a bar like "item1 | item2 | item3"
On a mobile browser it shows a button. When tapping on it, it shows the menu as stack
I'm searching a solution without Javascript. I know about media queries in CSS but I don't know how to add a menu with this requirement.
This is the menu for example:
<nav>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</nav>
CSS:
/* default for all browsers */
nav>ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #3d3d3d;
}
nav>ul>li>a {
display: block;
color: #ffffff;
}
#media only screen and (max-width: 360px) {
/* mobile */
/* WHAT NOW? */
}
#media only screen and (min-width: 361px) {
nav>ul>li {
/* bar layout */
display: inline-block;
}
}
fiddle: https://jsfiddle.net/1fg4qkx5/

Answer 1

i have edited your jsfiddle and found a rather "Simple" solution for you,
jsfiddle
I have not (yet) found a way to do this completely without javascript to catch the button click.
to post out the results here:
HTML
<nav>
<button class='hide-lg right'>
☰
</button>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
css
/* default for all browsers */
*{
margin: 0;
padding: 0;
}
body{
min-width: 100%;
min-height: 100%;
}
button{
border:1px solid gray;
background-color: transparent;
display: inline-block;
}
.show{
display: inline-block;
}
.right{
float:right;
}
nav{
background-color: #3d3d3d !important;
color: #ffffff;
height:auto;
width: 100%;
display: block;
}
nav>ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #3d3d3d;
}
nav>ul>li>a {
display: block;
color: #ffffff;
}
#media only screen and (max-width: 360px) {
.hide-lg{
display:inline-block;
}
ul{
display: none;
}
/* mobile */
/* WHAT NOW? */
}
#media only screen and (min-width: 361px) {
.hide-lg{
display: none !important;
}
nav>ul{
display: block;
}
nav>ul>li {
/* bar layout */
display: inline-block;
}
nav>ul>li>a{
display: block;
width:100%;
height: 100%;
}
}
Javascript/jQuery
$(document).ready(function(){
$('button').click(function(){
$('ul').toggleClass('show');
});
});
I hope you find my answer helpfull,
Giovanni