Slide in page template horizontal after Menuclick

Currently I face the problem that I can’t “slide in” my new page after clicking a menu point.
I found many examples how to do it with simple divs and jQuery, but I’m not able to transfer the functions to my template correctly.

What I have:
I have a menu with two options (“home”, “other”).
And I have two custom templates, my home.php and page-other.php where I want to display the posts or something like that.

What I want:
When I click on the “other” option the content of the page-other.php template should slide in. And after clicking “home” it should slide out again.
A good example I found HERE

What I tried:
This is page-other.php

 * Template Name: other

<div id="content">

<?php get_footer() ?>

Now I want that the header and the footer are appears / disappears immediately after the click, and just the

slides in / out.

First approach:

jQuery(function() {
   if ( {
      jQuery('#content').hide().animate({width: 'toggle'});

But for that I have to edit the links from the menu. And I think when I want to have more than two menu options it doesn’t work any more.

Second approach:

jQuery('#menu-header li:nth-child(2)').click(function(){
    jQuery('#content').animate({width: 'toggle'});

Here the animation isn’t smooth, and the content div jumps in instead of sliding.

Third approach:

The example from the fiddle above. But that doesn’t work either.

More ideas:

I really don’t know why it doesn’t work. Maybe it’s because the template isn’t loaded before like if the div is in the same document?

Has someone an idea why it doesn’t work with my examples? Maybe another idea how to solve the problem?

Thank you

Read more here: Slide in page template horizontal after Menuclick

Leave a Reply

Your email address will not be published. Required fields are marked *