Just for the fun of it and also a bit out of curiosity I made a 'Coothead like' right side pull menu (just css) and a 'Molendijk like' menu that uses a mixture of css and js. I was hoping that my code would require less lines than Coothead's menu (and thus would beat Coothead in terms of Ockham's razor principle), but in vain. Both solutions require approx. the same 'amount' of code. I find my code more intuitive though, but that's probably because I am more of a js-person than a css-person.
Here's the css-only code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#top, #close {//position hamburger icon and close button;
position: fixed;
top: 10px;
right: 17px;
padding: 0.5em;
background-color: #000;
border-radius: 0.3em;
color: #fff;
cursor: pointer;
}
/* code for hamburger icon; */
#top::before, #top::after {
display: block;
padding: 0.15em 0.75em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
content: '';
}
#top::after {
border-top: 0;
}
/* end code for hamburger icon; */
/* code for close button; */
#close {
display: none;
padding: 0 0.6em 0.18em;
}
#close::after {
font-size: 2em;
content: 'X';
}
/* end code for close button; */
#nav {// code for menu;
position: fixed;
width: 50%;
height: calc(100% - 65px);
top:0;
right: -100%;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #800;
background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
overflow: auto;
transition: 0.75s ease-in-out;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
vertical-align: middle;
}
#nav li {
float: left;
width: 50%;
}
#nav ul a {
display: block;
margin: 1em 0;
font-size: 1.5em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 3s ease-in-out;
}
#nav ul li:nth-of-type(1) a,
#nav ul li:nth-of-type(2) a {
font-style: oblique;
text-decoration: underline;
}
input {// checking invisible radio buttons is used for opening and closing the menu;
display: none;
}
/* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu has 'right: 0' */
#radiobutton1:checked ~ #nav {
right:0;
}
/* when the first radio button (hidden) is checked via a click on the hamburger icon, the menu and the close button have 'display: block' */
#radiobutton1:checked ~ #nav #close{
display: block;
}
/* when the first radio button (hidden) is checked via a click on the hambuger icon, the links in the menu have 'color: #fff' */
#radiobutton1:checked ~ #nav ul a{
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
</head>
<body>
<!-- Clicking on a label will toggle a checkbox -->
<label id="top" for="radiobutton1"></label>
<input id="radiobutton1" name="toggle_menu" type="radio">
<!-- Clicking on a label will toggle a checkbox -->
<div id="nav">
<label id="close" for="radiobutton2"></label>
<input id="radiobutton2" name="toggle_menu" type="radio">
<ul>
<li><a href="https://duckduckgo.com/">Duck Duck</a></li>
<li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>And here's my own code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#nav {
position: fixed;
width: 0;
height: calc(100% - 65px);
top:0;
right:0;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #800;
background-image: linear-gradient( to bottom, #800000, #a00000 85%, #d00000 );
overflow: auto;
transition: 0.75s ease-in-out;
}
#top, #close {
position: fixed;
top: 1px;
right: 3px;
color: #fff;
cursor: pointer;
font-family: arial;
font-size: 36px;
}
#top {
padding: 0.2em;
background-color: #000;
border-radius: 0.1em;
}
#close {
padding: 0.5em;
padding-top: 0.2em;
visibility: hidden;
opacity: 0;
transition: 0.75s ease-in-out;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
vertical-align: middle;
}
#nav li {
float: left;
width: 50%;
}
#nav ul a {
display: block;
margin: 1em 0;
font-size: 1.5em;
color: white;
text-align: center;
text-decoration: none;
}
#nav ul li:nth-of-type(1) a,
#nav ul li:nth-of-type(2) a {
font-style: oblique;
text-decoration: underline;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
<script>
function open_nav()
{
document.getElementById('close').style.opacity=1;
document.getElementById('close').style.visibility='visible';
document.getElementById('nav').style.width='50%';
}
function close_nav()
{
document.getElementById('close').style.opacity=0;
document.getElementById('close').style.visibility='hidden';
document.getElementById('nav').style.width=0;
}
</script>
</head>
<body>
<div id="top" onclick="open_nav()">≡</div>
<div id="nav">
<div id="close" onclick="close_nav()">X</div>
<ul>
<li><a href="https://duckduckgo.com/">Duck Duck</a></li>
<li><a href="http://www.dynamicdrive.com/forums/member.php?22645-molendijk">Arie</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</body>
</html>EDIT: I forgot that chechu's main concern was to have a responsive menu. There are several ways to obtain this in the above codes. For ex. we could replace all instances of '50%' with '100%'.