Have this CSS-only hamburger menu set up in JSFiddle
The hamburger is the upper-left rectangle above the breadcrumbs ('Home / Page 1')
The 'expander' is working as desired. My problem is that the link selector in the menu is not active and cannot trigger the URL.
How to modify the JSFiddle example so that the link selector is active and opens the target URL?
I have a working solution that uses checkbox and label. However, Google AMP does not allow those CSS properties, so I need a solution that fits the example above.
Here is background and references from which I've learned:
1 AMP discussion: https://github.com/ampproject/amphtml/issues/827
2 Example: https://jsfiddle.net/d6qr7qsh/1/ http://jsbin.com/rokotubehi/1/edit?html,css,output (Note: no selector or sub-menu)
3 Hamburger action: http://codepen.io/chr1s1202/pen/sJBkD
4 Menu drawer: http://www.designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/
5 Off-screen navigation: http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
6 Morphing menu button, partial selector: http://www.scottohara.me/article/morph-button-updated.html
7 Drop-down menu that has a sub-dropdown menu in bootstrap: dropdown menu that has a sub-dropdown menu in bootstrap @prem
8 How to create a responsive hamburger menu in AMP HTML: How to create a responsive hamburger menu in AMP HTML @John Pettitt
9 jQuery-type solution using nested and hidden sub-nav: Nav/Subnav list, how to give clicked item active class after reload of page
10 Pure CSS Horizontal menu: http://www.devinrolsen.com/pure-css-horizontal-menu/
So, to repeat:
How to modify the JSFiddle example so that the link selector is active and opens the target URL?
