nblenke · December 17, 2015 20:59
diff --git a/Slide Menu b/Slide Menu
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Test</title>
 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <style type="text/css">
 h1 {font:normal 23px/1.5 Georgia, times;}
 a{color: #555;}
 .side-menu {position:fixed;left:0;top:25%;}
 .side-menu>div {float:left}
 .side-menu .trigger {width:40px;height:40px;line-height:40px;text-align:center;background:rgba(0, 0, 0, 0.9);}
 .side-menu.closed .trigger {background:rgba(0, 0, 0, 0.5);}
 .side-menu .trigger:hover,
 .side-menu .trigger:active {background:rgba(0, 0, 0, 0.9)}
 .side-menu .menu {margin:0 0 0 -280px;padding:0;width:280px;padding:0;background:rgba(0, 0, 0, 0.8);}
 .side-menu .menu a {display:block;padding:0 20px;line-height:40px;color:#fff;font-weight:bold;
    border-bottom:1px solid rgba(255, 255, 255, 0.15);text-shadow:1px 1px 3px rgba(0, 0, 0, 0.8);}
 .side-menu .menu a:hover,
 .side-menu .menu a:active {background:rgba(255, 255, 255, 0.1);text-decoration:none}
 .side-menu .menu a:last-child {border:none;}
 </style>
 </head>
 <body>
 <div class="container">
 <div class="side-menu closed">
    <div class="menu">
 	    <a href="#test0">The Big Deal</a>
 	    <a href="#test1">In the News</a>
 	    <a href="#test2">Statistics</a>
 	    <a href="">Previous Words</a>
 	    <a href="">Sources</a>
    </div>
    <div class="trigger"><div class="icon icon-arrow-right icon-white"></div></div>
 </div>
 <section id="test0"></section>
 	<h1>Aliquam erat volutpat. Cras cursus. Cum sociis natoque penatibus et magnis</h1>
 	<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetuer</a> adipiscing elit. Quisque lobortis. Nunc porta leo non massa. Donec ante ante, consequat ut, dictum vitae, fermentum quis, velit. Aliquam pellentesque libero vestibulum velit. Donec in sem et velit viverra eleifend. Nullam sollicitudin ligula id diam. Quisque turpis. In placerat. Donec molestie, risus ut <a href="link2">consectetuer dapibus</a>, enim magna interdum sem, ut aliquet lectus mauris eget velit. Aenean sagittis, nisl in lacinia accumsan, risus lectus varius mi, id semper quam sem nec neque. <a href="link5">Mauris tempus</a>, magna quis viverra vestibulum, erat diam mattis lacus, in lacinia lorem ligula non mi. Pellentesque pede. Fusce aliquet quam vel diam. Curabitur nisi diam, porttitor a, vehicula ac, tincidunt ac, velit. Aenean volutpat augue non urna elementum euismod. Nam eu nisi ac orci adipiscing eleifend. Morbi in dui in purus varius sagittis. Duis ut risus. </p>
 <section id="test1"></section>
    <h1>Integer pellentesque pede. Aenean lorem. Praesent nisl eros</h1>
 	<p>Cras lorem. Duis aliquam lacus. Proin quis lacus a purus <a href="link3">malesuada ullamcorper</a>. Duis ac arcu rutrum sapien lacinia vestibulum. Phasellus venenatis neque vel pede. Suspendisse egestas luctus libero. Sed nec eros ut mauris viverra tempor. Donec orci enim, aliquam sit amet, laoreet et, luctus luctus, nunc. In eget diam. Curabitur sit amet orci in lacus <a href="link4">venenatis imperdiet</a>. Curabitur ultrices, leo imperdiet ultrices dapibus, metus lacus dictum augue, vel rutrum metus turpis non sem. Aenean id arcu. Sed pretium enim eget eros. Morbi enim ante, vulputate sed, sagittis id, sollicitudin et, orci. Duis et turpis ut turpis feugiat fermentum. Lorem ipsum dolor sit amet, <a href="link6">consectetuer</a> adipiscing elit. Phasellus nec est. Donec tortor est, facilisis quis, convallis quis, bibendum eu, justo.</p>
 <section id="test2"></section>
    <h1>Aliquam erat volutpat. Cras cursus. Cum sociis natoque penatibus et magnis</h1>
 	<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetuer</a> adipiscing elit. Quisque lobortis. Nunc porta leo non massa. Donec ante ante, consequat ut, dictum vitae, fermentum quis, velit. Aliquam pellentesque libero vestibulum velit. Donec in sem et velit viverra eleifend. Nullam sollicitudin ligula id diam. Quisque turpis. In placerat. Donec molestie, risus ut <a href="link2">consectetuer dapibus</a>, enim magna interdum sem, ut aliquet lectus mauris eget velit. Aenean sagittis, nisl in lacinia accumsan, risus lectus varius mi, id semper quam sem nec neque. <a href="link5">Mauris tempus</a>, magna quis viverra vestibulum, erat diam mattis lacus, in lacinia lorem ligula non mi. Pellentesque pede. Fusce aliquet quam vel diam. Curabitur nisi diam, porttitor a, vehicula ac, tincidunt ac, velit. Aenean volutpat augue non urna elementum euismod. Nam eu nisi ac orci adipiscing eleifend. Morbi in dui in purus varius sagittis. Duis ut risus. </p>
 	<h1>Integer pellentesque pede. Aenean lorem. Praesent nisl eros</h1>
 	<p>Cras lorem. Duis aliquam lacus. Proin quis lacus a purus <a href="link3">malesuada ullamcorper</a>. Duis ac arcu rutrum sapien lacinia vestibulum. Phasellus venenatis neque vel pede. Suspendisse egestas luctus libero. Sed nec eros ut mauris viverra tempor. Donec orci enim, aliquam sit amet, laoreet et, luctus luctus, nunc. In eget diam. Curabitur sit amet orci in lacus <a href="link4">venenatis imperdiet</a>. Curabitur ultrices, leo imperdiet ultrices dapibus, metus lacus dictum augue, vel rutrum metus turpis non sem. Aenean id arcu. Sed pretium enim eget eros. Morbi enim ante, vulputate sed, sagittis id, sollicitudin et, orci. Duis et turpis ut turpis feugiat fermentum. Lorem ipsum dolor sit amet, <a href="link6">consectetuer</a> adipiscing elit. Phasellus nec est. Donec tortor est, facilisis quis, convallis quis, bibendum eu, justo.</p>
 	<h1>Aliquam erat volutpat. Cras cursus. Cum sociis natoque penatibus et magnis</h1>
 	<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetuer</a> adipiscing elit. Quisque lobortis. Nunc porta leo non massa. Donec ante ante, consequat ut, dictum vitae, fermentum quis, velit. Aliquam pellentesque libero vestibulum velit. Donec in sem et velit viverra eleifend. Nullam sollicitudin ligula id diam. Quisque turpis. In placerat. Donec molestie, risus ut <a href="link2">consectetuer dapibus</a>, enim magna interdum sem, ut aliquet lectus mauris eget velit. Aenean sagittis, nisl in lacinia accumsan, risus lectus varius mi, id semper quam sem nec neque. <a href="link5">Mauris tempus</a>, magna quis viverra vestibulum, erat diam mattis lacus, in lacinia lorem ligula non mi. Pellentesque pede. Fusce aliquet quam vel diam. Curabitur nisi diam, porttitor a, vehicula ac, tincidunt ac, velit. Aenean volutpat augue non urna elementum euismod. Nam eu nisi ac orci adipiscing eleifend. Morbi in dui in purus varius sagittis. Duis ut risus. </p>
 	<h1>Integer pellentesque pede. Aenean lorem. Praesent nisl eros</h1>
 	<p>Cras lorem. Duis aliquam lacus. Proin quis lacus a purus <a href="link3">malesuada ullamcorper</a>. Duis ac arcu rutrum sapien lacinia vestibulum. Phasellus venenatis neque vel pede. Suspendisse egestas luctus libero. Sed nec eros ut mauris viverra tempor. Donec orci enim, aliquam sit amet, laoreet et, luctus luctus, nunc. In eget diam. Curabitur sit amet orci in lacus <a href="link4">venenatis imperdiet</a>. Curabitur ultrices, leo imperdiet ultrices dapibus, metus lacus dictum augue, vel rutrum metus turpis non sem. Aenean id arcu. Sed pretium enim eget eros. Morbi enim ante, vulputate sed, sagittis id, sollicitudin et, orci. Duis et turpis ut turpis feugiat fermentum. Lorem ipsum dolor sit amet, <a href="link6">consectetuer</a> adipiscing elit. Phasellus nec est. Donec tortor est, facilisis quis, convallis quis, bibendum eu, justo.</p>
 	<h1>Aliquam erat volutpat. Cras cursus. Cum sociis natoque penatibus et magnis</h1>
 	<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetuer</a> adipiscing elit. Quisque lobortis. Nunc porta leo non massa. Donec ante ante, consequat ut, dictum vitae, fermentum quis, velit. Aliquam pellentesque libero vestibulum velit. Donec in sem et velit viverra eleifend. Nullam sollicitudin ligula id diam. Quisque turpis. In placerat. Donec molestie, risus ut <a href="link2">consectetuer dapibus</a>, enim magna interdum sem, ut aliquet lectus mauris eget velit. Aenean sagittis, nisl in lacinia accumsan, risus lectus varius mi, id semper quam sem nec neque. <a href="link5">Mauris tempus</a>, magna quis viverra vestibulum, erat diam mattis lacus, in lacinia lorem ligula non mi. Pellentesque pede. Fusce aliquet quam vel diam. Curabitur nisi diam, porttitor a, vehicula ac, tincidunt ac, velit. Aenean volutpat augue non urna elementum euismod. Nam eu nisi ac orci adipiscing eleifend. Morbi in dui in purus varius sagittis. Duis ut risus. </p>
 	<h1>Integer pellentesque pede. Aenean lorem. Praesent nisl eros</h1>
 	<p>Cras lorem. Duis aliquam lacus. Proin quis lacus a purus <a href="link3">malesuada ullamcorper</a>. Duis ac arcu rutrum sapien lacinia vestibulum. Phasellus venenatis neque vel pede. Suspendisse egestas luctus libero. Sed nec eros ut mauris viverra tempor. Donec orci enim, aliquam sit amet, laoreet et, luctus luctus, nunc. In eget diam. Curabitur sit amet orci in lacus <a href="link4">venenatis imperdiet</a>. Curabitur ultrices, leo imperdiet ultrices dapibus, metus lacus dictum augue, vel rutrum metus turpis non sem. Aenean id arcu. Sed pretium enim eget eros. Morbi enim ante, vulputate sed, sagittis id, sollicitudin et, orci. Duis et turpis ut turpis feugiat fermentum. Lorem ipsum dolor sit amet, <a href="link6">consectetuer</a> adipiscing elit. Phasellus nec est. Donec tortor est, facilisis quis, convallis quis, bibendum eu, justo.</p>
 </div>
 <script>
 (function () {
 	$('.side-menu').on('click', '.trigger', function (event) {
        var $parent = $(this).parent(),
            $menu = $parent.find('.menu'),
            spd = 300;
        if ($parent.hasClass('closed')) {
            $menu.animate({'margin': '0'}, spd);
        } else {
            $menu.animate({'margin': '0 0 0 -' + $menu.outerWidth() + 'px'}, spd);
        }
        $parent.toggleClass('closed');
        $parent.find('.trigger').find('div').toggleClass('icon-arrow-right icon-arrow-left');
 	}); 
 }());
 </script>
 </body>
 </html>