Although this is not a very advanced technology, but for beginners is still quite difficult. If you are a novice, I hope you can learn something from this article, if you are a master, I hope you can leave your valuable comments and suggestions
A. What plugins do you want to do?
I want to implement a menu plug-in that can be used in a Web site or Web application, with a flexible, customizable look, simplicity, ease of use, easy expansion, and stability. It can be used in the site's main navigation bar, but also can be used in the management background.
Two. What is the desired effect?
Usually the menu is in a closed state, when the mouse moves in the display of its subordinate menu, and so on, you can easily use HTML tags to set the structure of the menu, you can also use the array dynamic generation.
Three. Design the function
Description of the picture
The default state of the menu item.
The state that has the subordinate menu and the mouse is moved in.
Interval (Effect of grouping)
Has a subordinate menu, the mouse is not moved in the state.
The vertical has a subordinate menu and the mouse moves in the state.
The state at which the focus is obtained.
Other features
All the state styles of the menu are controlled by CSS and can be flexibly modified as needed.
Generates menus in HTML and JavaScript two ways.
Specifies the click callback function and the jump address for the menu item (when the callback function is specified, the URL address is not set and the URL address is passed in to the callback function).
Four. How to implement the function?
1. Use CSS styles to control appearance.
* To avoid CSS naming conflicts, we need to determine a namespace for the plug-in, under which all the styles are under that namespace.
2. Menu Label Selection
* In general, the implementation of the menu label most of the choice of list label <ul><li></li></ul> to achieve, we are no exception.
Menu items: <li><a href= "link Address" ><span> menu item Display name </span></a></li>
3. Control the display mode of UL label
* Use CSS to remove symbols and indents
* Using CSS to arrange horizontally, there are two ways to arrange horizontally:
(1). The more floating arrangement (float:left;); but one of the biggest problems with this approach is that it destroys the structure of the page, and I don't really like it that way.
(2). Use inline (display:inline-block); The problem is currently known to be that the lower version of the browser may not support the very good, this problem on the network has a special article discussion, I will not repeat the details here.
* When I am using this way there is a small problem, that is, blocks and blocks have about 10px of space between. When I remove the space between tags in the HTML code (line breaks), these voids disappear; This solves the problem, but it does not break the structure of the code, the readability is poor, and if it is dynamically generated it is acceptable. So I think of another solution, which is to set the left margin of each block (<li> tag) to be -10px, and to set the left inner margin of <ul> to 10px,perfect!!!
Five. Browser compatible
No related tests were performed under IE6 and IE7.
Six. function implementation and invocation
Style control
Copy Code code as follows:
View Code
/* To avoid naming conflicts, we put all of the plug-in's styles under the class * *
. ctcx-menu
{
font-size:14px;
}
. Ctcx-menu UL
{
List-style-type:none;
margin:0;
padding:0;
}
/* Set Offset * *
. Ctcx-menu Ul.offset
{
position:relative;
top:-32px;
left:100px;
}
. ctcx-menu ul li/* menu item Style * *
{
width:100px;
height:30px;
line-height:30px;
Text-align:center;
Vertical-align:top;
margin:0;
padding:0;
}
/* menu item Style * *
. Ctcx-menu A
{
Display:block;
height:100%;
border:1px solid #999;
Background-color: #FFF;
Text-decoration:none;
Color: #000;
}
. Ctcx-menu a:hover
{
Background-color: #999;
Color: #FFF;
}
. Ctcx-menu a:active{}
/* Horizontal Menu * *
. Ctcx-menu. Horizontal
{
padding-left:7px;
}
. ctcx-menu. Horizontal Li
{
Display:inline-block;
margin-left:-7px;
}
. ctcx-menu. Horizontal Li.item-has-children > A/* menu item style with submenu * *
{
}
. ctcx-menu. Horizontal li.spacing/* Transverse interval * *
{
height:30px;
width:10px;
Background-color: #000;
}
/* Vertical Menu/*
. Ctcx-menu. Vertical
{
}
. ctcx-menu. Vertical Li
{
margin-left:0px;
}
. Ctcx-menu. Vertical Li.item-has-children > A/* menu item style with submenu * *
{
}
. Ctcx-menu. Vertical li.spacing/* longitudinal interval * *
{
height:10px;
width:100px;
Background-color: #000;
}
Plug-in code
Copy Code code as follows:
View Code
(function ($) {
$.fn.menu = function (options) {
if (typeof options!= ' undefined ' && options.constructor = = Array) options = {Data:options};
var opts = $.extend ({}, $.fn.menu.defaults, options);
var _tempmenudata = [];
Return Data level
function Getlevel (ID) {
var _level = 0;
var _o = getmenudata (ID);
while (_o!= null) {
_level++;
_o = Getmenudata (_o.pid);
}
return _level;
}
Return data Object
function Getmenudata (ID) {
for (var i = 0; i < opts.data.length; i++) {
if (opts.data[i].id = = ID)
return opts.data[i];
}
return null;
}
Returns the generated HTML
function gethtml (PID) {
var _li_data = getData (PID);
if (_li_data.length = = 0) return null;
var _ul = $ (' <ul></ul> ');
$.each (_li_data, function (i, _d) {
var _children = gethtml (_d.id);
var _li = $ (' <li></li> '). Appendto (_ul);
if (_D.N = null | | _d.n.length = 0) {
_li.addclass (' spacing ');
else if (typeof _d.fn = = ' function ') {
$ (' <a href= "javascript:;" ></a> '). HTML (_D.N)
. Click (function () {
_d.fn (_d.url);
}). Appendto (_li);
else if (_d.url.length > 0) {
$ (' <a href= ' + _d.url + ' ></a> '). HTML (_D.N). Appendto (_li);
}
if (_children!= null) {
_li.addclass (' Item-has-children ');
_children.appendto (_li);
_li.bind ({
Mouseover:function () {
_children.show ();
},
Mouseout:function () {
_children.hide ();
}
});
}
})
if (PID = = NULL && Opts.type = 1) {
_ul.addclass (' horizontal ');
} else {
var _level = getlevel (PID);
_level > 0 && _ul.hide ();
_ul.addclass (' vertical ');
if (_level > Opts.type)
_ul.addclass (' offset ');
}
return _ul;
}
Returns an array of subordinate data
function GetData (PID) {
var _data = [];
_tempmenudata = $.grep (_tempmenudata, function (_d) {
if (_d.pid = = pid) {
_data.push (_d);
return true;
}
return false;
}, True);
return _data;
}
Return This.each (function () {
var me = $ (this);
Me.addclass (' Ctcx-menu ');
if (opts.data!= null && opts.data.length > 0) {
$.merge (_tempmenudata, opts.data);
Me.append (gethtml (null));
} else {
Me.find ('. Item-has-children '). each (function () {
var self = $ (this);
var _ul = Self.children (' ul ');
_ul.hide ();
Self.bind ({
Mouseover:function () {
_ul.show ();
},
Mouseout:function () {
_ul.hide ();
}
});
});
}
});
}
Set Default parameters
$.fn.menu.defaults = {
Type:1,//menu display mode (mainly refers to the first level is horizontal or vertical, the default horizontal 1, longitudinal 0)
/*
Data: An array of dynamically generated menus that, if specified, populates the menu with this data (the original data in the menu is replaced)
Data format: [Menu,menu,...]
Menu Object Format: {id:1, Pid:null, N: ' Menu name 1 ', url: ' # ', fn: callback function}
*/
Data:null
}
}) (JQuery);
Call JS Code
Copy Code code as follows:
View Code
$ (function () {
var _menudata = [
{id:1, Pid:null, N: ' Menu name 1 ', url: ' # '},
{id:2, Pid:null, N: ' Menu Name 2 ', url: ' # '},
{id:3, Pid:null, N: ' Menu name 3 ', url: ' # '},
{id:4, Pid:null, N: ' Menu name 4 ', url: ' # '},
{id:5, Pid:null, N: ' Menu name 5 ', url: ' # '},
{id:6, Pid:3, N: ' Menu name 6 ', url: ' # '},
{id:7, Pid:3, N: ' Menu name 7 ', url: ' # '},
{id:8, Pid:3, N: ' Menu name 8 ', url: ' # '},
{id:9, Pid:3, N: ' Menu name 9 ', url: ' # '},
{id:10, Pid:9, N: ' menu name ', url: ' # '},
{id:11, Pid:9, N: ' Menu name one ', url: ' # '},
{id:12, Pid:9, N: ' menu name ', url: ' # '},
{id:13, Pid:9, N: ' menu name ', url: ' # '},
{id:14, pid:13, N: ' menu name ', url: ' # '},
{id:15, pid:1, N: ' menu name ', url: ' # '}
];
$ (' #dynamic-menu1 '). Menu ({type:0, data: _menudata});
$ (' #dynamic-menu2 '). menu ();
$ (' #dynamic-menu3 '). menu ();
});
Html
Copy Code code as follows:
View Code
<div id= "Dynamic-menu3" class= "Ctcx-menu" >
<ul class= "Horizontal" >
<li><a href= "#" ><span> level menu 1</span></a></li>
<li><a href= "#" ><span> level menu 2</span></a></li>
<li class= "Item-has-children" >
<a href= "#" ><span> level menu 3</span></a>
<ul class= "Vertical" >
<li><a href= "#" ><span> Level two menu 1</span></a></li>
<li><a href= "#" ><span> Level two menu 2</span></a></li>
<li><a href= "#" ><span> Level two menu 3</span></a></li>
<li class= "Item-has-children" >
<a href= "#" ><span> Level two menu 4</span></a>
<ul class= "vertical offset" >
<li><a href= "#" ><span> Level three menu 1</span></a></li>
<li><a href= "#" ><span> Level three menu 2</span></a></li>
<li><a href= "#" ><span> Level three menu 3</span></a></li>
<li><a href= "#" ><span> Level three menu 4</span></a></li>
<li><a href= "#" ><span> Level three menu 5</span></a></li>
</ul>
</li>
<li><a href= "#" ><span> Level two menu 5</span></a></li>
</ul>
</li>
<li><a href= "#" ><span> level menu 4</span></a></li>
<li><a href= "#" ><span> level menu 5</span></a></li>
</ul>
</div>
<div id= "dynamic-menu1" class= "Ctcx-menu" style= "margin-top:30px"; ></div>
<div id= "dynamic-menu2" class= "Ctcx-menu" style= "margin-top:60px"; >
<ul class= "Vertical" >
<li><a href= "#" ><span> level menu 1</span></a></li>
<li><a href= "#" ><span> level menu 2</span></a></li>
<li class= "Item-has-children" >
<a href= "#" ><span> level menu 3</span></a>
<ul class= "vertical offset" >
<li><a href= "#" ><span> Level two menu 1</span></a></li>
<li><a href= "#" ><span> Level two menu 2</span></a></li>
<li><a href= "#" ><span> Level two menu 3</span></a></li>
<li class= "Item-has-children" >
<a href= "#" ><span> Level two menu 4</span></a>
<ul class= "vertical offset" >
<li><a href= "#" ><span> Level three menu 1</span></a></li>
<li><a href= "#" ><span> Level three menu 2</span></a></li>
<li><a href= "#" ><span> Level three menu 3</span></a></li>
<li><a href= "#" ><span> Level three menu 4</span></a></li>
<li><a href= "#" ><span> Level three menu 5</span></a></li>
</ul>
</li>
<li><a href= "#" ><span> Level two menu 5</span></a></li>
</ul>
</li>
<li><a href= "#" ><span> level menu 4</span></a></li>
<li><a href= "#" ><span> level menu 5</span></a></li>
</ul>
</div>
seven. Download
Click here to download the usage examples, and all the files.
