A Fancy Menu

HTML
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <div class="menu-btn"><i class="material-icons"> keyboard_arrow_down </i></div> <div class="menu"> <div class="menu-content"> <div class="menu-block"><h3>Menu Title</h3> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </div> <div class="menu-seperator"></div> <div class="menu-block"><h3>Menu Title</h3> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </div> <div class="menu-seperator"></div> <div class="menu-block"><h3>Menu Title</h3> <ul> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> <li>Menu Item</li> </ul> </div> </div> <i class="close-menu material-icons">close</i></div> <div class="content"><h1>Who are those horrible orange men?</h1> <p>Tell her she looks thin. And from now on you're all named Bender Jr. But I've never been to the moon! Why am I sticky and naked? Did I miss something fun? You wouldn't. Ask anyway! The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.</p> <p>I don't 'need' to drink. I can quit anytime I want! But I've never been to the moon! Take me to your leader! <strong> Our love isn't any different from yours, except it's hotter, because I'm involved.</strong> <em> Aww, it's true.</em> I've been hiding it for so long.</p> <h2>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew.</h2> <p>And then the battle's not so bad? Now that the, uh, garbage ball is in space, Doctor, perhaps you can help me with my sexual inhibitions? And yet you haven't said what I told you to say! How can any of us trust you?</p> <ol> <li>Who said that? SURE you can die! You want to die?!</li><li>Tell them I hate them.</li><li>Belligerent and numerous.</li> </ol> <h3>Stop it, stop it. It's fine. I will 'destroy' you!</h3> <p>Interesting. No, wait, the other thing: tedious. That could be 'my' beautiful soul sitting naked on a couch. If I could just learn to play this stupid thing. Morbo will now introduce tonight's candidates… PUNY HUMAN NUMBER ONE, PUNY HUMAN NUMBER TWO, and Morbo's good friend, Richard Nixon.</p> <ul> <li>Hey, whatcha watching?</li><li>Our love isn't any different from yours, except it's hotter, because I'm involved.</li><li>My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</li> </ul> <p>What are their names? Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd. Belligerent and numerous. Shut up and take my money!</p> <p>I don't 'need' to drink. I can quit anytime I want! Kids don't turn rotten just from watching TV. Soothe us with sweet lies. With gusto. Stop it, stop it. It's fine. I will 'destroy' you!</p> <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say.</p> <p>Oh sure! Blame the wizards! So I really am important? How I feel when I'm drunk is correct? Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff! And yet you haven't said what I told you to say! How can any of us trust you?</p> <p>I'm just glad my fat, ugly mama isn't alive to see this day. Perhaps, but perhaps your civilization is merely the sewer of an even greater society above you! Soon enough. You mean while I'm sleeping in it?</p> <p>But existing is basically all I do! Hey! I'm a porno-dealing monster, what do I care what you think? Okay, it's 500 dollars, you have no choice of carrier, the battery can't hold the charge and the reception isn't very…</p> <p>And then the battle's not so bad? Fatal. Doomsday device? Ah, now the ball's in Farnsworth's court! You're going to do his laundry? How much did you make me?</p> <p>I'm just glad my fat, ugly mama isn't alive to see this day. Incidentally, you have a dime up your nose. Oh right. I forgot about the battle. But, like most politicians, he promised more than he could deliver.</p> <p>Kif, I have mated with a woman. Inform the men. And why did 'I' have to take a cab? Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd. That's a popular name today. Little "e", big "B"?</p> <p>Daylight and everything. I guess if you want children beaten, you have to do it yourself. Meh. You wouldn't. Ask anyway!</p> <p>I'm just glad my fat, ugly mama isn't alive to see this day. You guys go on without me! I'm going to go… look for more stuff to steal! Oh sure! Blame the wizards! It's toe-tappingly tragic! Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all.</p> </div>
CSS
body{ font-family: 'Open Sans', sans-serif; background-color:#000; color:#fff; margin:0; padding:0; } .content{ display:block; position: relative; max-width:960px; width:calc(100% - 60px); margin:0 auto; } .menu-btn{ display: block; position: relative; text-align:center; padding:10px 0 10px 0; } .close-menu{ display:none; position: absolute; top:10px; right:10px; } .no-scroll{ overflow:hidden; } .menu{ display:none; position:relative; height:50vh; background-color:#333; -webkit-box-shadow:inset 0 0 20px 0 #000000; box-shadow:inset 0 0 20px 0 #000000; } .menu-content{ display:block; position: relative; width:100%; margin:0 auto 0 auto; max-width:calc(100vw - 92px); height:calc(100% - 92px); background-color:rgba(0, 0, 0, 1); top:46px; -webkit-box-shadow: 0 0 20px 0 #000000; box-shadow: 0 0 20px 0 #000000; border-radius:6px; } .menu-block{ width:calc(33% - 60px); margin:30px 28px 30px 28px; display:block; float:left; position:relative; height:calc(100% - 60px); } .menu-block ul{ margin:0; padding:0; list-style:none; } .menu-seperator{ width:1px; margin:30px 0 30px 0px; display:block; float:left; position:relative; height:calc(100% - 60px); background:#333; } .show-menu{ display:block; height:100vh; background-color:#000; }
JAVASCRIPT
$( ".menu-btn" ).click(function() { //$('body').addClass( "no-scroll" ); $('.menu, .menu-btn').slideToggle(500, function(){ $('.close-menu').delay(500).fadeIn(500); }); $( ".content" ).fadeTo( 500 , 0.2); }); $( ".close-menu" ).click(function() { //$('body').removeClass( "no-scroll" ); $('.close-menu').fadeOut(500, function(){ $('.menu, .menu-btn').slideToggle(500); $( ".content" ).fadeTo( 500 , 1.0); }); });
Expand for more options Login