To use Ajax.Navigation, include the jQuery library (1.8 < X > 3.0 ) and the Ajax.Navigation source files into the head of your HTML document:
<link type="text/css" rel="stylesheet" href="/path/to/files/ajax.navigation.css"> <script type="text/javascript" src="/path/to/files/jquery.js"></script> <script type="text/javascript" src="/path/to/files/ajax.navigation.js"></script>
This is an example of a minimal required markup.
<div id="ajaxArea" data-ajax-effect="slide-left"> Content goes here... </div>
The required attributes are:
To initiate the plugin, call the .ajaxNavigation() plugin method on anchor elements, on which you want to have the functionality.
We have to define one or more areas, whose contents will be changed.
$(".anyAnchorElement").ajaxNavigation({ areas : "#ajaxArea" });
Although it is possible to use $("a") as an selector, I do not recommend it.
Head over to Options to see all available configuration options.