Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is another approach that might be more stable:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;style type="text/css"&gt; .MenuHidden #content { padding: 15px 15px 15px 15px; } .MenuHidden #out { display: none; } .MenuVisible #content { padding: 15px 15px 15px 215px; } .MenuVisible #in { display: none; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function showSideBar(visible) { document.body.className = visible ? 'MenuVisible' : 'MenuHidden'; } &lt;/script&gt; &lt;/head&gt; &lt;body class="MenuHidden"&gt; &lt;div id="header"&gt; &lt;div id="out"&gt;&lt;a href="#" onclick="showSideBar(false);"&gt;Close menu&lt;/a&gt;&lt;/div&gt; &lt;div id="in"&gt;&lt;a href="#" onclick="showSideBar(true);"&gt;Open menu&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;p&gt; Donec sodales consectetuer nunc. Aenean nec augue. Curabitur commodo, felis at tristique venenatis, nunc pede luctus risus, quis eleifend tellus mauris eu nisl. Vivamus varius dictum tellus. Nam ornare sem ornare justo. Praesent eget magna ut erat ullamcorper adipiscing. Suspendisse potenti. Donec lorem. Sed in velit. Maecenas molestie pharetra lacus. Donec in velit. In metus tortor, elementum in, porta vitae, posuere eu, purus. Quisque quis est. Nunc odio nibh, aliquam eget, ultrices quis, dignissim sit amet, augue. Mauris vitae turpis eget ligula porttitor nonummy. Etiam pulvinar bibendum tellus. Nam nulla nisl, elementum nec, posuere eget, dignissim vel, dolor. &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload