How to create a mobile navigation toggle using pure 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"><a href="#">Page 1</a></li>
            <li class="page_item page-item-2"><a href="#">Page 2</a></li>
            <li class="page_item page-item-2"><a href="#">Page 2</a></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:

1. By default the ul / nav-menu should NOT be displayed. Only menu_icon should be displayed.
2. When the visitor clicks on the menu_icon the ul should be displayed / toggled down.
3. 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><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
   <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
   <li><a href="#">Vestibulum auctor dapibus neque.</a></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. <a href="#">Donec non enim</a> 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>