How to create a mobile navigation toggle using pure CSS? - css

Question

I have an old site.
Now I want to make it mobile friendly.
So I am trying to add a mobile navigation and for making it works I want to use pure css only. NO javascript.
I am not allowed to add JS code to the files.
I tried following:
Mark up (I can not touch anything inside nav-menu class):
<!--- mobile navigation -->
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div class="nav-menu">
<ul>
<li class="page_item page-item-4">Page 1</li>
<li class="page_item page-item-2">Page 2</li>
<li class="page_item page-item-2">Page 2</li>
</ul>
</div>
</div>
And then I tried this CSS:
.tm_menu_mobile { width: 100%; max-width: 1005px; margin: 0 auto; display: block; background-color: #0071b7; }
.menu_icon { width: 100% }
.tm_menu_mobile .menu_icon{ width:50px; height:50px; border-radius: 10px; border:2px solid #fff; float:right; margin-right:10px; }
.menu_icon .three_line{ float:none; width:36px; height:5px; background:#fff; margin:9px auto; }
.tm_menu_mobile .nav-menu ul { text-align: center; }
.tm_menu_mobile .nav-menu ul li { border-bottom: 1px solid #fff; padding: 15p
Until here it's fine I think.
Now I want to work for animation / toggle (using CSS only)
how can I achieve:
By default the ul / nav-menu should NOT be displayed. Only menu_icon should be displayed.
When the visitor clicks on the menu_icon the ul should be displayed / toggled down.
When the user click AGAIN on the menu_icon the ul should be disappeared / toggled up and display: none.
I want to do this using CSS only.
FIDDLE IS HERE

Answer 1

Your best bet is most likely the :target CSS selector and anchor tags.
In the snippet below there are a menu button which has an a tag to #menu, which if target makes the menu visible and shows a div beneath which links to #, to hide the menu, if the user click outside.
The important part
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
Everything else
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
width:100%;
}
* {
box-sizing: border-box;
}
body {
display:block;
margin: 0;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #222;
}
#content {
position: fixed;
height:100%;
width:180%;
left:-80%;
background: #ecf0f1;
}
#content > nav {
position:fixed;
width:80%;
height:100%;
background: #34495e;
}
#content > nav > ul {
list-style: none;
margin:0;
padding: 0;
margin-top: 5px;
}
#content > nav > ul > li > a {
display: block;
width:100%;
padding:10px;
background: #2c3e50;
margin-bottom: 5px;
color:#ddd;
text-decoration: none;
}
#content > a#menubtn {
position: fixed;
background: #9b59b6;
width:40px;
height:40px;
left:0;
top:0;
z-index: 100;
}
#content > a#menubtn:before { /*http://css-tricks.com/three-line-menu-navicon/*/
content: "";
position: absolute;
left: 10px;
top: 12px;
width: 20px;
height: 3px;
background: #fff;
box-shadow:
0 6px 0 0 #fff,
0 12px 0 0 #fff;
}
#content > article {
position: fixed;
padding: 25px;
left: 0;
right: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#tabhelper {
display:none;
position:fixed;
right:0;
width:20%;
height:100%;
top:0;
z-index: 10;
}
#content, #menubtn, #content > article {
transition: all .4s;
}
#menu {
display: none;
}
#menu:target ~ #content {
left:0;
}
#menu:target ~ #content > a#menubtn {
left:80%;
}
#menu:target ~ #content > article {
left:80%;
right:-80%;
-webkit-filter: blur(3px);
}
#menu:target ~ #tabhelper {
display:block;
}
<div class="helper" id="menu"></div>
<a id="tabhelper" href="#"></a>
<div id="content">
<a id="menubtn" href="#menu"></a>
<nav>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</nav>
<article>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</article>
</div>

Answer 2

CSS and HTML alone can respond to click.
You should be able to use :focus, as long as each element is discretely wrapped in it's own HTML element which has a tab index
You can try this by opening the dev tools, selecting an element on this page and selecting :focus to force focus state (right hand click).
In your HTML you will need tabindex - this is required, but also ensures your UI responds to the keyboard as well as the mouse
This fiddle gives a demo: http://jsfiddle.net/szhtebjm/4/
To target an element that you don't have access to within the parent you can use the html tag directly in the css, within the :focus, as demonstrated in the fiddle with span element
This is a basic example to prove concept that focus will work to trigger changes on click with css, applying animations can be done with keyframes and transitions
An example with transitions is here:
http://jsfiddle.net/szhtebjm/8/
One final point, you're violating separation of concerns by doing this. Javascript should handle functionality and css should handle styles. The best way would really be to have set-up that allowed you to add javascript which you could then use to handle the menu functionality