I found this template on template monster.

That is what I was working on. How to slide pages about.php, work.php, contact.php directly inside div tag?

Dispaly home.php by default

menus used in example template of template monster

<ul>
    <li><a href="/"><div class='open_hover'></div>gallery</a></li>
    <li><a href="/about.html"><div class='open_hover'></div>about me</a></li>
    <li><a href="/experience.html"><div class='open_hover'></div>Experience</a></li>
    <li><a href="/resume.html"><div class='open_hover'></div>Resume</a></li>
    <li><a href="/contacts.html"><div class='open_hover'></div>Contacts</a></li>
</ul>

When menus are clicked pages slides in and out on main page instead going to that page

HTML

<ul class="nav">                 
    <li><a href="about.php"><span>About</span></a></li>
    <li><a href="work.php"><span>Work</span></a></li>
    <li><a href="contact.php"><span>Contact</span></a></li>
</ul>

<div id="contentliquid">         

 </div>

Script

$(document).ready(function() {     

    $(".nav li a").on("click", function(){

        var activeTab= $(this).attr("href");
        //alert(activeTab);

    //????????????????????????

    return false;
    });   

});

Recommended Answers

All 3 Replies

$( "#contentliquid" ).load(activeTab);

this is working but how to load pages with animation???

Something like this perhaps:

$("#contentliquid").hide().load(activeTab).fadeIn('500');

Thanks.

Now I'm using animate.css with following script

$(".nav li a").on("click", function(){

    var activeTab= $(this).attr("href");
    //alert(activeTab);        

    $("#contentliquid").load(activeTab, function() {

      //alert( "Load was performed." );
      $('#content').addClass('current bounceInRight');          

    });

    return false;

});

HTML

<div id="contentliquid">         
    <div id="content" class="animated">
    </div>
</div>

How to remove class of previous '#content' while going to next? 'bounceInRight' this works on all '#content' but how to add 'bounceOutLeft' to current page before loading next page ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.