Striped responsive pull menu

Thanks Coothead.
I noticed that opening your menu adds an entry to the browser's history. If you go back immediately by using the browser's back button, the menu closes again.
This behavior causes problems in certain cases. For instance, if after opening your menu we go to another page (which may load as a response to a click on one of the menu links), and then go back again to your opened menu (by using the browser's history button) and finally close the menu by clicking on the close button, the 'other page' is removed from the history stack and cannot be reached any more.
Also, I noticed that the animation is not absolutely smooth.

This code does not have these problems.

Hi there molendijk,

I admire the way that you test code to destruction. ;)

This example addresses the points that your testing raised...

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"> html,body { height: 100%; margin: 0; box-sizing: border-box; } *,*::before, *::after { box-sizing: inherit; } body { min-height: 100%; padding: 0.5em; background-color: #f9f9f9; font: 100% / 162% verdana, arial, helvetica, sans-serif; } #top, #close { position: fixed; top: 1em; right: 1.5em; z-index: 1; padding: 0.5em; background-color: #000; border-radius: 0.3em; color: #fff; cursor: pointer; opacity: 1; transition: 0.75s ease-in-out; } #top::before { font-size: 2em; content: '\02261'; } #close { z-index:0; opacity: 0 } #close::before { font-size: 2em; content: '\02a2f'; } #nav { position: absolute;position: fixed; width: 100%; height: 100%; top: -100%; left: 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; } #nav ul { padding: 0; margin: 0; list-style: none; vertical-align: middle; } #nav li { float: left; width: 50%; } #nav ul a { display: block; margin: 0.5em 0; font-size: 1.25em; 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 { position: absolute; left: -999em; } #r1:checked ~ #top{ z-index: 0; opacity: 0; } #r1:checked ~ #nav { top: 0; } #r1:checked ~ #close{ z-index: 1; opacity: 1; } #r1:checked ~ #nav ul a{ color: #fff; } #r1:checked ~ #content{ display: none;; } #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> <input id="r1" name="r" type="radio"> <label id="top" for="r1"></label> <input id="r2" name="r" type="radio"> <label id="close" for="r2"></label> <div id="nav"> <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>

As for your "Javascript" example, I still maintain that your
coding methodology should take into account the needs of those
whom, for whatever reason, choose not to use it.

This is a guideline I find very useful to achieve that objective...

Progressive enhancement:

You write your page content as if both CSS and JavaScript are off.
You write CSS to style the page the way you want it to look when
JavaScript is off.
You write additional CSS to change the way you want the page to
look when JavaScript is turned on.
You write CSS for the way you want the page to look when specific
JavaScript commands are supported by the browser.
You add a few lines of JavaScript to the head of the page to add
the necessary classes to the html tag for the styles you wrote in
steps 3 and 4 to be applied.

coothead

Great, thanks!!

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:

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>  <label id="top" for="radiobutton1"></label> <input id="radiobutton1" name="toggle_menu" type="radio">  <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:

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%'.

Quote:

Originally Posted by molendijk

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%'.

You really need to use "media queries" to make your code responsive. ;)

coothead

Quote:

Originally Posted by coothead

You really need to use "media queries" to make your code responsive. ;)

Of course we need media queries. I use them all the time. Maybe I should have said: we could replace all instances of '50%' with '100%' for certain screen widths.
This being said, let me come back to the css-js debate. I agree that css should be used for all specific cases where it is as powerful as js. But there are many situations where css alone can't do the job, see this menu, for instance.

Quote:

Originally Posted by molendijk

But there are many situations where CSS alone can't do the job,
see this menu, for instance.

Oh ye of little faith, for your instance, CSS can certainly do the job. :D

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"> html,body { height: 100%; margin: 0; box-sizing: border-box; } *,*::before, *::after { box-sizing: inherit; } body { padding: 0.5em; overflow-x: hidden; background-color: #f9f9f9; font: 100% / 162% verdana, arial, helvetica, sans-serif; } #top, #close { position: fixed; top: 1em; right: 1.5em; z-index: 1; padding: 0.5em; background-color: #000; border-radius: 0.5em; color: #fff; cursor: pointer; transition: 1.5s ease-in-out; } #top::before { font-size: 2em; content: '\02261'; } #close { z-index: 0; opacity: 0; } #close::before { font-size: 2em; content: '\02a2f'; } #nav { position: absolute; width: 100%; min-height: 100%; top: 0; right: -100%; padding: 3em 0 1em 0; border: 1px solid #999; background-color: #808080; background-image: linear-gradient( to bottom, #000, #808080 55%, #c0c0c0 ); transition: 1s 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: 0.5em 0; font-size: 1.25em; color: transparent; text-align: center; text-decoration: none; transition: 1.5s ease-in-out; } input { position: absolute; left: -999em; } #r1:checked ~ #top{ z-index: 0; } #r1:checked ~ #nav { right: 0; } #r1:checked ~ #nav #close{ background-color: #f0f0f0; color: #000; opacity: 1; } #r1:checked ~ #nav ul a { color: #fff; } #r1:checked ~ #content{ display: none;; } #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> <input id="r1" name="r" type="radio"> <label id="top" for="r1"></label> <div id="nav"> <input id="r2" name="r" type="radio"> <label id="close" for="r2"></label> <ul> <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>

coothead

Quote:

Originally Posted by coothead

Oh ye of little faith...

Wherfore yf God so cloth the grasse, yt is to daye in ye felde, and tomorow shalbe cast in to the fornace, how moch more shal he clothe you, o ye of litle faith?

Quote:

Originally Posted by coothead

CSS can certainly do the job.

Your code seems clever enough! This line: #r1:checked ~ #content{display: none;} seems crucial. It hides the windows's scrollbar when the menu button is clicked on, so it ensures that the scrollbar we see when the window is small enough is the menu's scrollbar.

But now let's make the width of the navigation menu a bit smaller, say 70%: #nav {width: 70%}. Now your code has a problem, because the user will wonder where the page's content has gone and the page looks ugly.

This problems does not present itself when my code is used.

Hi there Arie,

why do you keep moving the goal posts?

I have no problem with your desire to use "JavaScript", as long as your use of
it meets the "Progressive enhancement" guidelines that I indicated in post #12.

Your code does not.

This means that with "JavaScript" disabled this menu, unfortunately, does not
appear to have one. :D

coothead

That's true, although not an issue since most people don't have javascript disabled..
It's just that your css-solutions surprised me all the time (in a positive sense) and I wondered how far you could go on the css-road.
So I thought that my previous post would either yield another interestig css-code on your part or lead to the conclusion that yes, sometimes, css 'can't do it'.
As I am not a dogmatic person, I had no desire at all to 'defend' javascript against css. That would be stupid. If that's what you thought, I'm sorry.