"Taste "
Pure CSS 1.0.0 Snippet by divyalahad

<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- A splash page cover for a website that features a unique click/touch event to pull up a menu.--> <!-- The menu here is traditional navigation, but could include anything, really (video, images, blog posts, etc.).--> <!-- Note: Kruse's Baked Goods is a real bakery in Calgary, AB, Canada. I used their logo and tagline without permission for--> <!-- demonstration purposes. The background image is also used without permission. It's a bakery in Sweden. --> <!-- This variation is to highlight what to do with really long content. Look in the food menu to see it in action.--> <!-- There isn't really anything to be done in the browser about the ugly scroll bars. But mobile looks good!--> <div class="image"><img src="http://krusesbakery.com/wp-content/uploads/2014/10/kruses-logo_solo2.png"/> <h1>The taste of tradition with a pinch of innovation</h1> </div> <!-- Modals--> <div class="overlay"></div> <section class="modal popup nav-wrapper"> <!-- buttons--> <div class="buttons__wrapper"><a class="button" href="#" data-popup="menu">Menu</a><a class="button" href="#" data-popup="locations">Locations</a><a class="button" href="#" data-popup="contact">Contact</a></div> </section> <section class="modal popup menu" id="menu"> <h1>Our Menu</h1> <div class="menu__wrapper"> <article class="menu__goodies goodies__names"> <p>Stollen</p> <p>Gluten Free Brownies</p> <p>Coarse Rye Bred</p> <p>Hockey Puck</p> <p>Pumpkin Pie</p> <p>Stollen</p> <p>Gluten Free Brownies</p> <p>Coarse Rye Bred</p> <p>Hockey Puck</p> <p>Pumpkin Pie</p> <p>Stollen</p> <p>Gluten Free Brownies</p> <p>Coarse Rye Bred</p> <p>Hockey Puck</p> <p>Pumpkin Pie</p> <p>Stollen</p> <p>Gluten Free Brownies</p> <p>Coarse Rye Bred</p> <p>Hockey Puck</p> <p>Pumpkin Pie</p> </article> <article class="menu__goodies goodies__prices"> <p>$1.99 / loaf</p> <p>$0.99 / ea</p> <p>$2.49 / loaf</p> <p>$0.99 / 3</p> <P>$7.99 / whole</P> <p>$1.99 / loaf</p> <p>$0.99 / ea</p> <p>$2.49 / loaf</p> <p>$0.99 / 3</p> <P>$7.99 / whole</P> <p>$1.99 / loaf</p> <p>$0.99 / ea</p> <p>$2.49 / loaf</p> <p>$0.99 / 3</p> <P>$7.99 / whole</P> <p>$1.99 / loaf</p> <p>$0.99 / ea</p> <p>$2.49 / loaf</p> <p>$0.99 / 3</p> <P>$7.99 / whole</P> </article> </div> </section> <section class="modal popup locations" id="locations"> <h1>Our Locations</h1> <article class="location__names"> <p>Los Angeles</p> <p>La Jolla</p> <P>Pasadena</P> </article> </section> <section class="modal popup contact" id="contact"> <h1>Contact Us</h1> <article class="contact__names"> <p> <a href="mailto:contact@krusesbakery.com">contact@krusesbakery.com</a></p> <p> <a href="tel:+11234567890">(123) 456-7890</a></p> <P> <a href="https://www.google.com/maps/place/Pasadena,+CA/@34.1844659,-118.1668283,13z/data=!3m1!4b1!4m5!3m4!1s0x80c2c2dc38330b51:0x52b41161ad18f4a!8m2!3d34.1477849!4d-118.1445155" target="_blank">123 Somewhere St.<br>Pasadena, CA 91101</a></P> </article> </section> <p class="controls back"><i class="fa fa-angle-left" aria-hidden="true"></i></p> <p class="controls close"><i class="fa fa-times" aria-hidden="true"></i></p>
//// General Styles body margin: 0 font-family: 'Raleway', sans-serif position: relative a text-decoration: none color: white //// Cover image and tagline .image background: linear-gradient(rgba(black, 0.3), rgba(black, 0.3)), url(https://www.urbanpixxels.com/wp-content/uploads/29-7947-post/Swedish-bakery-Fabrique.jpg) size: cover position: center height: 100vh // creates splash page effect, covers viewport text-align: center padding: 0 2rem img width: 75% text-align: center filter: drop-shadow(0px 0px 45px rgba(black, 0.3)) // weak drop shadow just on the image, not the image container @media (min-width: 600px) img width: 50% @media (min-width: 900px) img width: 30% h1 color: white text-transform: capitalize font-size: 2.5rem @media (min-width: 600px) h1 font-size: 3rem @media (min-width: 900px) h1 font-size: 4rem //// Popup navigation styles // the background overlay shown on click .overlay background: color: #000 position: absolute top: 0 left: 0 width: 100% height: 100vh z-index: 10 opacity: 0.9 // outside modal container .modal display: none position: absolute top: 0 left: 0 width: 100% height: 100% z-index: 15 // inside modal container .popup color: white z-index: 49 display: flex flex-direction: column justify-content: center text-align: center h1 text-align: center margin-bottom: 2rem // root navigation with buttons .nav-wrapper display: flex flex-direction: column // aligns the content vertically in a column justify-content: center // centers the content vertically align-items: center // centers content horizontally z-index: 50 // button styles on overlay a.button display: block width: 150px border: 3px solid white padding: 1rem 3rem margin: 2rem 0 border-radius: 50px z-index: 50 &:hover background: color: white color: black @media (min-width: 600px) a.button font-size: 2rem ul list-style: none padding-left: 0 margin: 0 padding: 0 li padding: 1rem font-size: 1.5rem @media (min-width: 600px) .nav-wrapper ul li font-size: 2rem // locations menu style @media (min-width: 600px) .locations font-size: 2rem .location__names font-size: 1.3em //// Men controls (back and close triggers) .controls position: fixed bottom: 0 font-size: 2rem color: #777 cursor: pointer z-index: 50 // back to main menu button .back right: 2rem i font-weight: bold @media (min-width: 600px) .back top: 0 font-size: 2.5rem // the close button (the "X" in the top right) .close right: 2rem @media (min-width: 600px) .close top: 0 font-size: 2.5rem //// Styles for the food menu .menu font-size: 1.1rem text-align: left @media (min-width: 675px) .menu font-size: 2rem .menu__wrapper display: flex justify-content: center align-items: center height: 40% // set the height of the container. i'd say no more than 50% so that it doesn't affect the back and close buttons overflow-y: scroll // set this to auto (or scroll to be explicit) .menu__goodies margin: 0 1rem .goodies__names font-weight: bold //// Styles for the contact menu .contact font-size: 1.3rem @media (min-width: 600px) .contact font-size: 2rem
// hide items on load // could also hide them with classes and switch flex on and off by addClass method $(".overlay, .popup, .close, .back").hide(); // click on cover image and menu items appear $(".image").on("click", function() { $(".overlay, .nav-wrapper, .close").fadeIn(300); }); // close everything when clicking on the "X" $(".close").on("click", function() { $(".overlay, .popup, .close").fadeOut(300); }); // menu popup $(".buttons__wrapper .button").on("click", function(e) { e.preventDefault(); var popupID = $(this).attr("data-popup"); // assign popup ID of item clicked $(".close").hide(); // hide close button $(".back").fadeIn(300); // show back button $(".popup").fadeOut(300); // close all popups $("#" + popupID).fadeIn(300); // open popup that goes with element clicked }); // takes user back to main menu $(".back").on("click", function() { $(".close").fadeIn(300); // show the close button ("X") $(".back").hide(); // hide back button $(".popup").fadeOut(300); // hide all popups $(".overlay, .nav-wrapper, .close").fadeIn(300); // show main menu elements });

Related: See More

Questions / Comments: