MENU

Full Screen Overlay Menu

I have finally implemented the menu I have wanted to go with this layout since the moment I made this theme! With that I had to learn from jQuery syntax (I am much more comfortable with JavaScript) and with that I wanted to make a tutorial! The ending of this tutorials is how to implement it into a WordPress theme, since it was quite confusing on how to do this based on other tutorials.Below is what the final result looks like. You can visit my Codepen account and grab the code, or you can continue to read and learn how it works, as well as how to implement it to WordPress.

See the Pen qdYRYM by Domenica (@domierosina) on CodePen.

Let us start with the HTML behind it…

For the HTML we will do something really simple. Lets create a container, and within the container we can put our button to open our menu.

<div id="container">
<button id="overlay-menu" class="menuButton" type="button">Menu</button>
</div>

Now outside of the container, (below) we can place another DIV container, this one will only appear when we click the button. Inside that DIV we will put our navigation tag and then a list where we can list our page options.

<div class="overlay overlay-data">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Portfolio</a></li>
    ul>
  </nav>
</div>

Lets add some CSS… 

The CSS is quite long. So let’s try to break it up into chunks. The first bit I will skip, since you should already have a theme done. So we will focus on the styling of the overlay and menu button.

The only detail I am really going to go into for the CSS is the z-index is extremely important. Without it pieces of your layout will move to the top and some through the overlay. So set it to a really nigh number you have never used in your theme. There are two asterisk (**) beside those lines in the code below to warn you.

#overlay-menu {
  position: fixed;
  z-index: 1;
  top: 10px;
  left: 10px;
  border: 0;
  width: 60px;
  height: 60px;
  text-align: center;
  background: #fff;
  color: #000;
  text-transform: uppercase;
  border-radius: 50%;
  z-index:2000; **
}
.menuButton {
  background-color: #2F32A4;
  text-indent: 0;
  border: 1px solid #3c295e;
  color: #fff;
  opacity:0.8;
  margin-left: 10px;
  margin-top:10px;
}
.menuButton:hover {
  background-color: #3c295e;
}
.menuButton:active {
  position: relative;
  top: 1px;
}
.overlay {
  z-index:2000; ** This is so that it goes on top of everything else.
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
}
.overlay nav {
  text-align: center;
  position: relative;
  top: 20%;
  font-size: 40px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}
.overlay ul li {
  display: block;
  height: auto;
  margin-bottom: 5%;
}
.overlay ul li a {
  font-weight: 100;
  display: block;
  color: white;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #849368;
  border-bottom: 1px solid #fff;
}
.overlay-close {
  width: 90px;
  height: 90px;
  position: absolute;
  right: 10px;
  top: 10px;
  overflow: hidden;
  border: none;
  background: url(cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 100;
}
.overlay-data {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.4s;
  transition: opacity 0.3s 0.2s, visibility 0s 0.4s;
}
.overlay-open {
  opacity: 1;

  visibility: visible;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

Lastly lets add the jQuery…

So for our jQuery we are going to have to add a class and also hide another class. When the button is clicked we want the class overlay to be added. We also want the class menuButton to be hidden. Then when the overlay-close class is clicked (the big X) we want the overlay class to be removed and the menuButton class to be seen. We can do this with 8 lines of code. At the beginning of the code we need to check if the document is ready and then the functions can be executed. Place the code below in a file named menu.js.

$(document).ready(function($) { 
$("#overlay-menu").click(function() {
  $(".overlay").addClass('overlay-open');
  $(".menuButton").hide();
})
$(".overlay-close").click(function() {
  $(".overlay").removeClass('overlay-open');
  $(".menuButton").show();
})
})

 

Implement into WordPress

If you have a functions.php file then you are off to a great start, if not create one and add it to your theme, where all your other template files are. We are going to call the script and enqueue it the proper way for WordPress. Open the file and place the following snippet in there. In this function we are calling the script which is in a folder in our theme, and then we are registering it. By using array(‘jquery’) we are identifying that is it jQuery and we need that library from WordPress.

<?php
function my_scripts_method() {
// register your script location, dependencies and version
 wp_register_script('menu', get_template_directory_uri() . '/js/menu.js', array('jquery'), '1.0' );
// enqueue the script
 wp_enqueue_script('menu');
 }
add_action('wp_enqueue_scripts', 'my_scripts_method');

The last thing we have to tweak for it to work is the jQuery code itself. In order to WordPress to identify what we need we need to change the first line of code. Early we had code that would work for a regular website. In order to use it for WordPress we need to remove the ‘$’ and change it to jQuery. Once again we are letting WordPress know which library we need.

jQuery(document).ready(function($) {
//PUT OLD CODE HERE
})

There you have it! Fully functioning for responsive design and for WordPress. Of course you can always add more styles to your jQuery to get fancy effects, however for now I wanted it nice and simple. It works in responsive layouts and is not a whole lot of code, unlike other tutorials out there that have several JavaScript files. Let me know what you think of it in the comments below!

COMMENTS: 8
  1. July 22, 2015 by Emily

    I love the menu, it looks great! Normally tutorials don’t explain how to implement into WP after you’ve written the jQuery. Thanks for sharing!

    • July 23, 2015 by Domenica

      Thanks Emily! I am glad you enjoyed it. I have always been a WordPress user, so I hope to always include how to implement it into a WordPress theme. Trying to find a decent tutorials sometimes for implementing WordPress can be hard.

  2. July 22, 2015 by Georgie

    Nice work! I saw something similar on Codyhouse.co – I always love these things but they don’t suit what I’m usually working on. It’s like I need to find excuses to do cool things like this. XD I love how it fits with your theme and I have to give you the thumbs up for showing off your theme without letting this one feature hold you up. I’m glad you got it done in the end!

    I probably avoided doing something cool like this because I imagined my main navigation might get bigger, but that’s something I’m also working on with my blog. I’m glad you figured out how to integrate it with WordPress too. I reckon another step would be to hook the links up with a widget/menu in the WordPress admin rather than hardcoding it in 😀 😉

    • July 23, 2015 by Domenica

      Hi Georgie! I got the inspiration from there (I probably should have included that). I find often they make pieces of code that are not responsive what so ever, and have a lot of bulk compared to what I want or need. So I pull inspiration from those things and play around with it. I am glad it is done too! There will always be tweaks though. 😛 Ina ll my years of blogging I have never had a large menu, I never have the time to write for it. I figured if I need to add category links I can do that on the sidebar, or make a page (which I have, just haven’t linked yet). How did you guess my next step! I want to do a generic one, so it can work with any menu type. Probably will be the next piece of code I post.

  3. July 22, 2015 by Nancy

    You’re so pro with web development ;). I think the menu overlay is cool! I see it as a cool feature when the whole menu bar doesn’t look attractive. I’ve seen several versions of these menu overlays and love how simple they can look. It’s always awesome to be able to integrate html layouts into WordPress :D.

    • July 23, 2015 by Domenica

      Far from pro Nancy! But practice does make perfect, and I had a lab instructor tell me once, if I can comment every line or teach it to someone else then I truly understand what is going on. That is my major motive by having this category on my blog. There are so many variations of it, with loads of jQuery behind the effects, so I figured a basic one so people can customize is the best way to go!

  4. July 24, 2015 by Julia

    I love your overlay menu and so glad you posted a tutorial on it.
    You have a knack for writing tutorials.
    Thank you. 🙂

    • July 24, 2015 by Domenica

      Thank you for stopping by Julia! If you have any ideas of what you want to see give me a shout. 🙂

Sorry, the comment form is closed at this time.

Sorry, the comment form is closed at this time.