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.
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.
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.
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.
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.
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.