| Xmenu(Xml Menu) is a jquery plugin which contructs a expanding and collapsed menu based on a xml file.
There are several benefits by doing this.
Firstly It gives a very clean code, all we need to do is to put <div> in
html, and that is all for your html.
Secondly, it makes life much easier for backend script. Just imagine, if you need to gives different menu options according to user role, all your backend script needs to do is to form different xml .Xmenu takes care of the UI part.
Thirdly, Xmenu is built tightly with CSS. which means you can easily change its look and feel just by editing its CSS.
To start with Xmenu, please first take a look at the xml format. and then read its options table.
And then you can start Basic Example, Css Example, Animation Example.
This is a ongoing plugin, the current version is 2.0. I will be adding more and more features.
Your support is appreciated.Please leave any enquiries or doubts.
Download v1.0
Download v2.0
|
| XML Format:
Please Download This Xml for your referrence. |
Version 1.0 Options Table
| Options |
Required |
Possiable Value |
Remarks |
| url |
true |
links.xml |
This is url path pointing to your xml file. Xml file is loaded through ajax. |
| open |
false |
“single”,
“all”.
Default:
“all” |
When the value is set to be “single”, Xmenu will only leave one menu option open.Which means expanding menu option A will collapse all other menu options.
When the value is set to be “all”, each menu option’s expanding and collapsed state is seperated, they don’t affect each others. |
| int |
false |
“all”,
menu option index(”0″,”1″).
Default:
“all” |
This option will set the default expanding menu option and set all other menu options collapsed.And note the index is “0″ based.
When the value is set to be “all”, it will keep every menu option expanded when xmenu is initialized. |
effect
(available
version 2.0 above) |
false |
“slide”
“fade”
Default:
“slide” |
“slide” option gives menu sliding effect while expanding whereas “fade” option gives menu fading effect while expanding |
|
Basic Samples
|
| version |
sample |
codes |
| 1.0 |
Demo |
<div id=”menu”></div>
$(document).ready(function() {
$(’#menu’).xmenu({url:”links.xml”});
}); |
|
| 1.0 |
Demo |
<div id=”menu2″></div>
$(document).ready(function() {
$(’#menu2′).xmenu({url:”links.xml”,open:”single”,init:”0″});
}); |
|
CSS Samples

|
| version |
sample |
codes |
| 1.0 |
Demo |
.xmenu-item a:hover{
margin-left:20px;
}
$(document).ready(function() {
$(’#menu’).xmenu({url:”links.xml”});
});
<div id=”menu”></div> |
| You can customize various effects by editing xmenu css style according to it css structure. |
|
Animation Sample
|
| 2.0 |
Demo |
<div id=”menu”></div>
$(document).ready(function() {
$(’#menu’).xmenu({url:”links.xml”,open:”all”,init:”0″,effect:”fade”});
}); |
admin 2-Javascript, JQuery
When I was doing one of my projects , I needed a javascript function to read from a file and print it line by line.
However, it is not possible in Javascript to read from local file system.
Thus, I made a work around, which is to read from a file by PHP, and then append a line break symbol at the end of each line.
And finally, I have this javascript “class” to read from “file” line by line.
It works similar to BufferedReader in Java.
Here is the function:
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
//line breaker %lb%
function FileReader(file) {
var lineBreaker ="%lb%";
this.fileString = file.trim();
var cursor = 0;
var recorder = new Array();
//public methods
this.close = function () {
cursor = 0;
recorder = null;
fileString ="";
}
this.readLine = function () {
var value = null;
if(cursor == 0 ){
process();
}
if(cursor<recorder.length) {
value = getLine();
cursor++;
}
alert(value);
return value;
}
//private methods
var process = function () {
recorder = fileString.split(lineBreaker);
}
var getLine = function() {
return recorder[cursor];
}
}
To use this “class”, firstly you can pass a file which is a String (formatted by backend language with a defined line break):
var fileObj = FileReader(file);
And when you call fileObj.readLine() , it will return a line of content.
Please notice that , you have to append a line break symbol(eg. %lb% ), you can also change the line break symbol ,but make
sure you change it in Javascript class.
admin General Javascript