All CSS menu-toggle-solution

by LyndseyB

HTML

<label for="toggleMenu" onclick="">☰</label>
<input type="checkbox" id="toggleMenu" class="toggleMenu">
<ul class="menuItems">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div id="content"></div>

CSS

label{
    display:block;
    text-align:center;
    color:#fff;
    background:#464646;
    font-size:30px;
    width:30px;
    line-height:30px;
    cursor: pointer;
}
.toggleMenu{
    display: none;
}
.menuItems{
    text-align:center;
    line-height:2rem;
    display: none;
    padding:1rem 3rem;
    color:#fff;
    background:#464646;
}
.menuItems li {
    list-style:none;
}
.menuItems li a{
    color:#fff;
}
.toggleMenu:checked + .menuItems{display: block;}
        
@media screen and (min-width: 700px){
    label{display: none;}
    .menuItems{
        display: block;
    }
    .menuItems li {
        display:inline-block;
        margin-right:2rem;
    }
}

JavaScript

//You can delete all this javascript. It is just used to generate some content and has nothing to do with the menu.
var i=0;
var strings = ["Demo ", "of ", "an ", "all ", "CSS ", "menu-", "toggle-", "solution. ","<br/>", "Resize ", "the ", "window ",  "to ", "mobil-", "size ", "to ", "see ", "the ", "toggle-", "option.", "<br/>", "The ", "label ", "must ", "have ", "an ", "onclick-", "attribute ", "for ", "this ", "to ", "work ", "on ", "IOS." ];
var timer =setInterval(function () {
    document.getElementById('content').innerHTML +=strings[i];
    i++;
    if (i>(strings.length-1)) {
    clearInterval(timer);
    }
}, 200);