Full Screen menu

full-screen-menu.markdown

Full Screen menu

A Pen by Chase Harrison on CodePen.

License.

index.html

<div id="menu"><span class="text"><span><!--icon--></span></div>

<!--menu -->
<div id="menuOverlay">
  <ul class="parent">
   <li><a href="#">Office Information</a>
				  <ul class="child">
            <li><a href="#">Vestibulum Auctor</a></li>
            <li><a href="#">Vivamus Vestibulum</a></li>
            <li><a href="#">Fusce Pellentesque</a></li>
				  </ul>
    </li>
  <li><a href="#">Patient Information</a>
				  <ul class="child">
            <li><a href="#">Vestibulum Auctor</a></li>
            <li><a href="#">Vivamus Vestibulum</a></li>
            <li><a href="#">Fusce Pellentesque</a></li>
				  </ul>
    </li>
  <li><a href="#">Treatments</a>
				  <ul class="child">
            <li><a href="#">Vestibulum Auctor</a></li>
            <li><a href="#">Vivamus Vestibulum</a></li>
            <li><a href="#">Fusce Pellentesque</a></li>
				  </ul>
    </li>
  <li><a href="#">About Our Practice</a>
				  <ul class="child">
            <li><a href="#">Vestibulum Auctor</a></li>
            <li><a href="#">Vivamus Vestibulum</a></li>
            <li><a href="#">Fusce Pellentesque</a></li>
				  </ul>
   <li><a href="#">Contact Us</a>
    </li>
  </ul>
</div>

script.js

$(document).ready(function(){
  $.openSpeed = 500; //speed in ms
  $.navButton = $("#menu"); //menu button
  $.primaryNav = $("#menuOverlay"); //menu
  $.primaryNav.hide();
  $("#menuOverlay ul.parent ul").hide();
  //main menu button click
  $.subMenu = $("#menuOverlay ul.parent > li > ul");
  $.navButton.click(function(){
    $.primaryNav.css("opacity",1);
    $(this).toggleClass("open");
    $("body").toggleClass("fullMenuOpen");
    $.primaryNav.toggleClass("open").slideToggle($.openSpeed);
    if ($.subMenu.hasClass("openMenu")){
      $.subMenu.slideUp($.openSpeed);
      $.subMenu.removeClass("openMenu");
    }
  });
  $("#menuOverlay ul.parent > li > a").click(function(){
    if (!$(this).hasClass("open")){
        $("#menuOverlay ul.parent > li > ul").removeClass("openMenu").slideUp($.openSpeed);
        $("#menuOverlay ul.parent > li > a").removeClass("open");
        $(this).addClass("open");
        $(this).next("ul").addClass("openMenu").slideDown($.openSpeed);
    } else {
        $(this).removeClass("open");
        $(this).next("ul").removeClass("openMenu").slideUp($.openSpeed);
    }
  });
  $("#menuOverlay ul.parent > li > a.open").click(function(){
    $("#menuOverlay ul.parent > li > ul").removeClass("openMenu").slideUp($.openSpeed);
  });
 
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

/* TEMP STYLING */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Poppins:400,700');
#menu {background-color: #fff; border-radius: 0 10px 10px 0; border: 1px solid #eee; border-left: 0; top: 60px !important;}
#menu span {font-family: 'Lato', sans-serif; font-size: 20px;}
#menu.open span.text:before {content: "Close Menu"}
#menu:not(open) span.text:before {content: "Open Menu"}
#menu.open {transform: translate(-20px,-59px); transition: all 700ms ease; box-shadow: none;}
#menu:not(.open) {transform: translate(0,0); transition: all 700ms ease; box-shadow: 1px 1px 10px #c4c4c4;}
#menuOverlay:not(.open) ul.parent > li {transition: opacity 200ms ease; opacity: 0;}
#menuOverlay.open ul.parent > li {transition: opacity 200ms ease; opacity: 1;}
#menuOverlay ul.parent > li {margin: 5px 0;}
#menuOverlay ul.parent > li > a {display: inline-block; font-family: 'Poppins', sans-serif; text-decoration: none; font-size: 30px;}
#menuOverlay ul.parent > li > a:hover, #menuOverlay ul.parent > li > a:focus {color: #dddddd;}
#menuOverlay ul.parent > li ul {border: 2px dotted #dddddd; padding: 15px 10px;}
#menuOverlay ul.parent > li ul > li {margin: 10px 0;}
#menuOverlay ul.parent > li ul > li a {font-family: 'Lato', sans-serif; color: #fff; text-decoration: none; font-size: 24px;}
/* TEMP STYLING END~~~~~~~~~~~~~~~~~~*/


#menu.open span.text:before {content: "Close Menu"} /*when menu is open text*/
#menu:not(open) span.text:before {content: "Open Menu"} /*when menu is closed text*/

/*menu button*/
#menu {
  z-index: 9999;
  position: absolute;
  left: 0;
  top: 20px;
  background: #eee;
  padding: 10px 30px;
  cursor: pointer;
}



#menuOverlay {
  opacity: 0;
	position: absolute;
	left: 0; 
	top: 0; 
	bottom: 0; 
	right: 0; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(23, 2, 37, 0.94); 
	display: flex; 
	align-items: center; 
	justify-content: center;
}

/*both*/
#menuOverlay ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

/*parent*/
#menuOverlay ul.parent > li {
	
}

#menuOverlay ul.parent > li > a {
	color: #fff;
}

/*child*/
#menuOverlay ul.parent > li ul {
	display: 
}