Question

I have one page site structure. This is my menu:

I have a menu structure:

 <ul id="creamenu" class="menuHolder">
                        <li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
                        <li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
                        <li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
                    </ul>
                    <ul id="mainmenu" class="menuHolder">
                        <li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
                        <li><a id="about2-menu" href="#/haberler">about 2</a></li>
                        <li><a id="about3-menu" href="#/galeri">about 3</a></li>
                        <li><a id="about4-menu" href="#/referanslar">about 4</a></li>
                        <li><a id="about5-menu" href="#/iletisim">about 5</a></li>
    </ul>

And this is content structure:

<div id='news-1'>
    <!-- content -->
    <!-- content -->

<div id='news-2'>
    <!-- content -->
    <!-- content -->

When i click a menu item, go to page via Parallax effect (I’m using premium plugin for this) But my site is slowly… Because, i want when i click a menu item, load content via ajax. Is it possible? How can i do it?

Answer 1

if the content is in other file, then you can do with $.load(url).

$('#news-1').load('url of the content to load');

if you storing the content in same page, then you can make it visible when menu clicked.

$('#news-1').on('click',function(){
$('#news-1').appendTo($('#creative-events').html()); // this is the prototype, need to make a generic code
})