From software to websites, menus are everywhere. In traditional application software development, there are usually ready-made controls that can be used. However, when developing web pages, developers basically have to design them on their own. Although this is not a very advanced technology, however, it is quite difficult for new users. If you are a newbie, I hope you can learn from this article. If you are a master, I hope you can leave your valuable comments and suggestions.
I. What plug-ins do I need?
I want to implement a menu plug-in that can be used on a website or a WEB application system and can be flexibly tailored to the appearance, simplicity, ease of use, convenience of expansion, and stability. It can be used on the website's main navigation bar or the management background.
2. What is the desired effect?
In normal times, the menu is collapsed. When you move the mouse to display its lower menu, and so on, you can easily set the menu structure using html tags, or use arrays to dynamically generate menus.
3. Design Features
Description of images
The default status of the menu item.
It has a lower-level menu and the status when the mouse moves in.
Interval (grouping effect)
Has a sub-menu, the status when the mouse is not moved.
The status when the vertical bar has a lower menu and the mouse moves in.
The status when the focus is obtained.
Other functions
The style of all menu states is controlled by CSS and can be modified flexibly as needed.
Generate menus using HTML and javascript.
Specify the click callback function and jump address for the menu item (when the callback function is specified, the URL address is passed into the callback function instead of the URL address ).
4. How to Implement functions?
1. Use the CSS style to control the appearance.
* To avoid CSS naming conflicts, we need to determine a namespace for the plug-in. All styles under it are under this namespace.
2. Menu label selection
* In general, most menu labels will select list labels.
.
Menu item:
Display name of menu items
3. Control the display mode of UL labels
* Remove symbols and indentation using CSS
* CSS horizontal arrangement:
(1). Floating arrangement (float: left;) is usually used. But the biggest problem with this method is that it will damage the page structure. I don't like this method very much.
(2 ). use the inline (display: inline-block) method. Currently, the known problem is that earlier browsers may not support very well. This problem has been discussed in some special articles on the Internet, I will not go into details here.
* When I use this method, there is a small problem, that is, there is a gap of about 10 PX between the block and the block. After I delete the gaps (line breaks) between tags in HTML code, these gaps disappear. This can solve the problem, but it does not damage the code structure and has poor readability; dynamic generation is acceptable. So I think of another solution, that is, to set each block (
The left margin of the tag) is-10px.
The left inner margin of is 10px, perfect !!!
5. browser compatibility
No tests were conducted in IE6 and IE7.
Vi. function implementation and calling
Style Control
The Code is as follows:
View Code
/* To avoid naming conflicts, place all styles of the plug-in under the class */
. Ctcx-menu
{
Font-size: 14px;
}
. Ctcx-menu ul
{
List-style-type: none;
Margin: 0;
Padding: 0;
}
/* Set the 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
{
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 sub menu */
{
}
. Ctcx-menu. horizontal li. spacing/* horizontal 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 sub menu */
{
}
. Ctcx-menu. vertical li. spacing/* vertical interval */
{
Height: 10px;
Width: 100px;
Background-color: #000;
}
Plug-in code
The Code is 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;
}
// Return the generated HTML
Function getHtml (pid ){
Var _ li_data = getData (pid );
If (_ li_data.length = 0) return null;
Var _ ul = $ ('
');
$. Each (_ li_data, function (I, _ d ){
Var _ children = getHtml (_ d. id );
Var _ li = $ ('
'). AppendTo (_ ul );
If (_ d. n = null | _ d. n. length = 0 ){
_ Li. addClass ('spacing ');
} Else if (typeof _ d. fn = 'function '){
Certificate (''0000.html (_ d. n)
. Click (function (){
_ D. fn (_ d. url );
}). AppendTo (_ li );
} Else if (_ d. url. length> 0 ){
Parameters (''{.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 ('version ');
If (_ level> opts. type)
_ Ul. addClass ('offset ');
}
Return _ ul;
}
// Returns an array of lower-level 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 the default parameters
$. Fn. menu. defaults = {
Type: 1, // The display mode of the menu (mainly refers to whether the first level is horizontal or vertical, the default is horizontal 1, vertical 0)
/*
Data: The array data of the menu is dynamically generated. if this data is specified, the menu is filled 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
The Code is 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 10', url :'#'},
{Id: 11, pid: 9, n: 'menu name 11', url :'#'},
{Id: 12, pid: 9, n: 'menu name 12', url :'#'},
{Id: 13, pid: 9, n: 'menu name 13', url :'#'},
{Id: 14, pid: 13, n: 'menu name 14', url :'#'},
{Id: 15, pid: 1, n: 'menu name 15', url :'#'}
];
$ (# Dynamic-menu1). menu ({type: 0, data: _ menuData });
$ (# Dynamic-menu2). menu ();
$ (# Dynamic-menu3). menu ();
});
HTML
The Code is as follows:
View Code
- Level 1 menu 1
- Level 1 menu 2
Level 1 menu 3
- Level 2 menu 1
- Level 2 menu 2
- Level 2 menu 3
Level 2 menu 4
- Level 3 menu 1
- Level 3 menu 2
- Level 3 menu 3
- Level 3 menu 4
- Level 3 menu 5
- Level 2 menu 5
- Level 1 menu 4
- Level 1 menu 5
- Level 1 menu 1
- Level 1 menu 2
Level 1 menu 3
- Level 2 menu 1
- Level 2 menu 2
- Level 2 menu 3
Level 2 menu 4
- Level 3 menu 1
- Level 3 menu 2
- Level 3 menu 3
- Level 3 menu 4
- Level 3 menu 5
- Level 2 menu 5
- Level 1 menu 4
- Level 1 menu 5
7. Download
Click here to download the example and all files.
