Articles Ajax Ajax-jQuery-Menu

---

tutorials - Ajax and Web-Development.

Ajax jQuery Menu

Published Sat. Sep. 22, 2012

---

Load in php files without reloading the page with this simple ajax menu

// LOAD THE FIRST HREF OF THE MENU_TOP ANCHOR TAG INTO THE DIV ID CONTENT_AREA UPON THE DOM LOADING

$(document).ready(function(){
    $('#content_area').load($('a.menu_top:first').attr('href'));   
});


// WHEN ANY ANCHOR TAG WITH A CLASS NAME OF MENU_TOP IS CLICKED THE DIV ID CONTENT_AREA WILL BE LOADED WITH HREF OF THE ANCHOR TAG

<script type="text/javascript">
    jQuery(function(){
        $('a.menu_top').click(function() {
              var href = $(this).attr('href');
               $('#content_area').load(href);
              return false;
        });
    });
</script>


//THIS HTML UL WILL CONTAIN THE PAGES TO BE LOADED IN - PHP SCRIPT FILES WITH ANY DYNAMIC CODE, OR TEXT, YOUD LIKE

<ul>
<li>
<a class="menu_top" href="first.php">FIRST</a> /
</li>
<li>
<a class="menu_top" href="last.php">LAST</a> /
</li>
</ul>

<div id="content_area"></div>