Features:
Better appearance: added icon on menu title.
Better actions: Implemented menu sliding in and sliding out effects.
Easier to use: Many comments have been added for easy use.
Of course there are still some undiscovered problems. I hope you can give me some advice:)
Implementing a foldable dynamically changing the value of style.height. This is not very professional:) But it looks very similar!
100% original winXP collapsible menu appearance! If it's different, please tell me and I'll change it.
(qq2006 still has some jitters when clicking.)
Look at the picture first. The latest addition The appearance of qq2006
Test webpage address: navbar.htm
Detailed URL: http://lxbzj.com/showartical.asp?N_id=156
Download: http://lxbzj.com/upload/200604/menu.zip
The new version is still in production. . . (The updated js is on layer 19)
Here is the js modified on 2006-04-13
- It is no longer necessary to add onclick and onkeypress to each This way, the web page and js are further separated
-Define a menu class responsible for adding events to each menu
-Modify onkeypress
-Add interval processing
-Add a retracting acceleration (but not very obvious)
-Added Navbar object, so that only one menu can be opened in a group
-New js is constantly being updated. . .
- Code in navbar.js:
// JavaScript Document
/*==================================== =====
* File name: navbar.js
* Encoding: Utf-8
* Function: javaScript to implement menu folding
* Author: Lei Xiaobao
* Version: 2.3
* Time: 2006-03-07
============================== =============*/
//==========================Define menu class=== ===============;
function Menu(head,child,dir,speed,init_state,ext_on,ext_off)
{
this.head = document.getElementById (head);//Menu header
this.body = document.getElementById(child);//Menu body
this.direction = dir;//Menu retracting direction
this.speed = speed ;//Speed
this.ext_on = ext_on;//Extended menu expansion call
this.ext_off = ext_off;//Extended menu collapse call
this.init_state = init_state;//Initial setting of menu State true/false
this.a = 10;//Acceleration
//Private variable;
this._interval = false;
this._last_state = false;
this._size = false;
this._temp = false;
this._js = false;
this._div = false;
this._parent = false;
this._parent_control = false;
var self = this;
var temp = new Array(null,null);//temp[0] is used for _off(), temp[1] is used for _on()
//==============================Method================ =============
//Click event processing
this.click = function(e)
{
if (self._parent_control)
{ if (self._last_state = = false)
🎜> 🎜> 🎜> this.head.onkeypress = function(e)
{
e||(e=window.event);
if (!(e.keyCode ==32 || e.keyCode == 0) )return;
//alert(':)');
for(var i=0;i {
if (this.body.childNodes[i].nodeType==1)
{
this._div=this.body.childNodes[i];
break;
}
}
if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height
{
this._size = parseInt(this.body.style.height);
}
else
{
this._size = this._div.offsetHeight;
}
switch (this.init_state)
{
case true:
if (this.body.style.display == 'none')
{
//this._last_state = false;
this._on();
}
else
{
this._last_state = true;
}
break;
default://case false:
if (this.body.style.display !='none')
{
this._last_state = true;
this._off();
}
break;
}
}
//展开菜单
this._on = function()
{
if (self._last_state == false)
{
self._last_state = true;
self.body.style.display="";
temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size)) 1:self._size/5;
if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
if (self.ext_on)
{
self.ext_on(self.head,self.body)
}
self._interval = Interval.set(self._action_on,speed);
}
//setTimeout('slowon("' self.body.id '")',5)
}
//收起菜单
this._off = function()
{
if (self._last_state == true)
{
self._last_state = false;
//if (temp[0] == null)
//{
temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size)) 1:self._size/5;;
//}
if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size 'px';
if (self.ext_off)
{
self.ext_off(self.head,self.body)
}
self._interval = Interval.set(self._action_off,this.speed);
}
}
//以下处理滑动
this._action_on = function()
{
if (parseInt(self.body.style.height) temp[1]>self._size)
{
self.body.style.height = self._size 'px';
Interval.clear(self._interval);
}
else
{
self.body.style.height = parseInt(self.body.style.height) temp[1] 'px';
temp[1] =self.a;
}
}
this._action_off = function()
{
if(parseInt(self.body.style.height)-temp[0]<0)
{
Interval.clear(self._interval);
self.body.style.display = "none";
}
else
{
self.body.style.height = parseInt(self.body.style.height)-temp[0] 'px';
temp[0]-=self.a ;
}
}
}
//End of meanu class
//====================Definition Navbar class, used to manage a set of menu collections ================================
function navbar(dir,a ,speed,ext_on,ext_off)
{
this.open_only_one = true;//Whether only one menu of this group is open at any time, true/false
this.dir = dir;//menu group public direction. Since it is a group of menus, they should have the same direction, right?
this.a =a;//menu Public acceleration
this.speed =speed;//Public speed
this.ext_on = ext_on;//Public extension open function call
this.ext_off = ext_off;//Public extension collapse function call
this.menu_item = new Array();//menu group
this._openning;//If only one menu is allowed to be opened, this will record the currently opened one Menu
this.open_all = function()//
{
};
this.add = function (head,body)//Function to add menu
{
var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);
this.menu_item.push(temp);
};
this.init = function ()//Navbar’s initialization function must be called after add is completed.
{
if(this.open_only_one == true)
A menu is open
if (this.menu_item.length>0)
{
with(this.menu_item[0])
🎜> init_state = true;
_parent = this;//Set the father of the menu as this Navbar
_parent_control = true;//Set the parent to control the menu
init();
} }
This._openning = this.menu_item[0] ;
through > 🎜> init();
}
else
{//If open_only_one == false then only initialize the menu
for(var i = 0;i {
this.menu_item.init();
;
//Additional parent control function
this._control = function(child)
{
var self =child;
Interval.clear(self._interval);
if (self._last_state == false)
._openning._off();
self._parent. }
else
{
//self._off( );
return false; ====================interval processing============================ =
//Note: _stack only has 20 items
//When expanding, an initial value of 1-n must be assigned
Interval=
{
length:20,
_action: new Array( length),
_stack : new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19 ),
_interval : Array(length),
_timeout: new Array(length),
//for(var i=0;i<_action.length;i )stack.push(i); ,
set:function(action_function,speed,time_out)
{
time_out = time_out?time_out:15000;//The default interval timeout is 15000 seconds. If you do not need to set a timeout, then setTimeout below Then comment out the line; val._interval[p ]=setInterval('if(Interval._action[' p '])Interval._action[' p ']();',speed);//The repeated execution function here cannot be written as 'Interval._action[' p '] 'Because it is very likely that after Interval.clear, there will be another execution that has not been completed, so an error occurred
Interval._timeout[p] Interval.clear(' p ')', time_out); // This line sets the interval timeout, you can comment it out if you don’t need it;
; p])
🎜> Interval._action[p] = "";
Interval._stack.push(p);
}
}
}
//Interval processing ends
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
