Fade navigation Menu

Last Update:2017-01-13 Source: Internet

Author: User

Tags bind iterable setinterval visibility

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The article provides a JS fade out navigation Menu instance code, if you are looking in fade out drop-down menu download free download bar
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> fade Fade in navigation menu </title>
<script>
var mouseo tutorial Ver_tid = [];
var mouseout_tid = [];

jquery (document). Ready (function () {
jquery (' #menus > Li '). each (function (index) {
jquery (this). Hover (

Cancel fade Out menu thread, delay Fade in menu
function () {
var _self = this;
Cleartimeout (Mouseout_tid[index]);
Mouseover_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). Fadein (200);
}, 400);
},

Cancel the Fading menu thread, delay Fade menu
function () {
var _self = this;
Cleartimeout (Mouseover_tid[index]);
Mouseout_tid[index] = settimeout (function () {
jquery (_self). Find (' ul:eq (0) '). fadeout (200);
}, 400);
}

);
});
});
</script>
Hover to display the fade menu, leaving the fade out hidden menu. Need to add deferred processing

Look at an example below

<!doctype HTML PUBLIC "-//w3c//dtd xhtml 1.1//en" "HTTP://WWW.W3.ORG/TR/XHTML11/DTD/XHTML11.DTD" >

/* Navigation Menu Start * *
/* Menu Item * *
#menubar Ul.menus Li {
Float:left; * * Floating on the left
List-style:none; /* Empty list style * *
margin-right:1px; /* Right side of the interval * *
}
/* Menu Necklace Link * *
#menubar Ul.menus Li a {
padding:5px 10px; * * Inside margin * *
Display:block; /* Display as Block * *
Color: #fff; /* Text color * *
Background: #67ace5; /* Background Color * *
Text-decoration:none; /* No lower horizontal line * *
}
/* Current menu item Link * *
#menubar Ul.menus Li.current-cat a {
Background: #5495cd; /* Background Color * *
}
/* Select Menu Necklace Link/*
#menubar Ul.menus li a:hover {
Background: #4281b7; /* Background Color * *
}
/* Level Two menu * *
#menubar Ul.children {
Display:none; /* does not display when initializing the page * *
padding:0;
margin:0;
}
/* menu item of Level Two menu * *
#menubar Ul.children Li {
Float:none; /* Vertical Arrangement * *
margin:0;
padding:0;
}
/* The current menu of Level two menu item link/
#menubar Ul.children Li a {
width:100px; * * is very important for IE6 * *
}
/* navigation menu End/*
</style>
<script type= "text/web Effects" >

/** class *
var class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

/** Menu List * *
var menulist = Class.create ();
Menulist.prototype = {

/**
* Construction Method
* ID: Menu List
* Opacity: Opacity (0.0-1.0, 0.0 is fully transparent, 1.0 is opaque)
*/
Initialize:function (ID, opacity) {
Get Menu List
This.obj = document.getElementById (ID);
if (!this.obj) {return;}

To process all menus in a menu list
var menus = this.obj.childnodes;
for (var i = 0; i < menus.length; i++) {
var menu = menus[i];
if (menu.tagname = = ' Li ') {
Building Menus
New Menu (menu, opacity);
}
}
}
}

/** Menu * *
var menu = Class.create ();
Menu.prototype = {

/**
* Construction Method
* Target: Target menu
* Opacity: Opacity (0.0-1.0, 0.0 is fully transparent, 1.0 is opaque)
*/
Initialize:function (target, opacity) {
This.util = new Menuutil ();

Get target menu (no extra elements)
This.obj = This.util.cleanwhitespace (target);

/* Shade 2008/09/01 Change Start * *
Define transparency, default transparent
this.opacity = 0;
this.maxopacity = Opacity | | 1;
/* Shade 2008/09/01 change End/*

Get Menu
This.menu = This.obj.childnodes

Important! If the menu does not contain a menu item, it is not processed
if (This.menu.length < 2) {return;}

Menu title and vegetable monomer
This.title = this.menu[0];
This.body = this.menu[1];

Defining the initial Style
This.util.setstyle (this.body, ' visibility ', ' hidden ');
This.util.setstyle (this.body, ' position ', ' absolute ');
This.util.setstyle (this.body, ' overflow ', ' hidden ');
This.util.setstyle (this.body, ' Display ', ' block ');

Add Listener
This.addlistener (this.obj, ' mouseover ', This.util.bind (this, this.activate), false);
This.addlistener (this.obj, ' mouseout ', This.util.bind (this, this.deactivate), false);
},

/**
* Activation method
* When the mouse moves to the menu title is activated
*/
Activate:function () {
Gets the position of the current menu body
var pos = This.util.cumulativeoffset (this.title);
var left = pos[0];
var top = pos[1] + this.util.getheight (this.title);

Define activation-time styles
This.util.setstyle (This.body, ' left ', left + ' px ');
This.util.setstyle (this.body, ' top ', top + ' px ');
This.util.setstyle (this.body, ' visibility ', ' visible ');
This.util.setstyle (This.body, ' opacity ', this.opacity);
This.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');

/* Shade 2008/09/01 Add Start * *
if (This.tid) {
Cleartimeout (This.tid);
}
Continuously enhance the opacity of the menu
This.tid = SetInterval (This.util.bind (this, this.appear), 30);
/* Shade 2008/09/01 Add End * *
},

/**
* Lifting Method
* When the mouse moves out the menu title is activated
*/
Deactivate:function () {
/* Shade 2008/09/01 Add Start * *
if (This.tid) {
Cleartimeout (This.tid);
}
Constantly weakening the opacity of the menu
This.tid = SetInterval (This.util.bind (this, this.fade), 30);
/* Shade 2008/09/01 Add End * *

/* Shade 2008/09/01 Delete Start * *
Define release-Time styles
This.util.setstyle (this.body, ' visibility ', ' hidden ');
/* Shade 2008/09/01 Delete End * *
},

/* Shade 2008/09/01 Add start */
/**
* Enhance opacity until maximum opacity
*/
appear:func tion () {
  this.opacity + = 0.1;
  if (this.opacity >= this.maxopacity) {
   this.opacity = this.maxopacity;
   //Cancel Loop call
   cleartimeout (This.tid);
  }
  // Reset Transparency
  this.util.setstyle (this.body, ' opacity ', this.opacity);
  this.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');
},

/**
* reduces opacity until fully transparent hides the menu
*/
fade:function () {
  this.opacity = 0. 1;
  if (this.opacity <= 0) {
   this.opacity = 0;
   //Hide Menu
& Nbsp;  this.util.setstyle (this.body, ' visibility ', ' hidden ');
   //Cancel Loop call
   cleartimeout (This.tid);
  }
  // Reset Transparency
  this.util.setstyle (this.body, ' opacity ', this.opacity);
  this.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');
},
/* shade 2008/09/01 Add end */

/**
* Monitoring method
* Element: Listener Object
* Name: Listening method
* Observer: Methods of execution
* Usecapture: How the browser invokes the event (True is capture, false is bubbling)
*/
Addlistener:function (element, name, observer, Usecapture) {
if (Element.addeventlistener) {
Element.addeventlistener (name, observer, Usecapture);
else if (element.attachevent) {
Element.attachevent (' on ' + name, observer);
}
}
}

/** some practical methods * *
var menuutil = Class.create ();
Menuutil.prototype = {
Initialize:function () {
},

$: function (ID) {
return document.getElementById (ID);
},

$a: function (iterable) {
if (!iterable) {
return [];
}
if (Iterable.toarray) {
return Iterable.toarray ();
} else {
var results = [];
for (var i = 0; i < iterable.length; i++) {
Results.push (Iterable[i]);
}
return results;
}
},

Bind:function () {
var array = this. $a (arguments);
var func = array[array.length-1];
var _method = func, args = array, object = Args.shift ();
return function () {
Return _method.apply (object, Args.concat (array));
}
},

Getheight:function (Element) {
return element.offsetheight;
},

Setstyle:function (element, key, value) {
Element.style[key] = value;
},

Getstyle:function (element, key) {
return Element.style[key];
},

Cleanwhitespace:function (list) {
var node = List.firstchild;
while (node) {
var nextnode = node.nextsibling;
if (Node.nodetype = = 3 &&!/s/.test (Node.nodevalue)) {
List.removechild (node);
}
node = NextNode;
}
return list;
},

Cumulativeoffset:function (Element) {
var Valuet = 0, Valuel = 0;
do {
Valuet + + element.offsettop | | 0;
Valuel + + Element.offsetleft | | 0;
element = Element.offsetparent;
while (element);
return [Valuel, Valuet];
}
}

/** add to page Load event * *
Window.onload = function (e) {
New Menulist (' menus ', 0.9);
}

</script>

<body>

<div id= "Container" >

<div id= "MenuBar" >
<ul id= "menus" class= "menus" >
<li class= "Current-cat" ><a title= "Home" href= ". /">all demos</a></li>
<li class= "Cat-item cat-item-40 ><a href=" javascript:void (0); "title=" View all posts filed. NET under </a>
<ul class= "Children" >
<li class= "Cat-item cat-item-41 ><a href=" javascript:void (0); "title=" View all posts filed under "> Ado.net</a></li>
<li class= "Cat-item cat-item-42 ><a href=" javascript:void (0); "title=" View all posts filed the ASP tutorial. NET " >asp.net Tutorials </a></li>
<li class= "Cat-item cat-item-43 ><a href=" javascript:void (0); "title=" View all posts filed under C # ">c#< /a></li>
</ul>
</li>
<li class= "Cat-item cat-item-50 ><a href=" javascript:void (0); "title=" View all posts Filed under Java ">java </a>
<ul class= "Children" >
<li class= "Cat-item cat-item-51 ><a href=" javascript:void (0); "title=" View all posts filed EJB under </a></li>
<li class= "Cat-item cat-item-52 ><a href=" javascript:void (0); Title= View all posts filed under Hibernate " >hibernate</a></li>
<li class= "Cat-item cat-item-53 ><a href=" javascript:void (0); "title=" View all posts filed Java core "> Java core</a></li>
<li class= "Cat-item cat-item-54 ><a href=" javascript:void (0); "title=" View all posts filed JSP tutorial "under </a></li>
<li class= "Cat-item cat-item-55 ><a href=" javascript:void (0); "title=" View all posts filed Spring "> Spring</a></li>
<li class= "Cat-item cat-item-56 ><a href=" javascript:void (0); "title=" View all posts filed struts "> Struts</a></li>
</ul>
</li>
<li class= "Cat-item cat-item-60 ><a href=" javascript:void (0); "title=" View all posts Filed under Web ">web </a>
<ul class= "Children" >
<li class= "Cat-item cat-item-61 ><a href=" javascript:void (0); Title= View all posts filed under (x) HTML ">" ( x) html</a></li>
<li class= "Cat-item cat-item-62 ><a href=" javascript:void (0); "title=" View all posts filed under Tutorials "> Css</a></li>
<li class= "Cat-item cat-item-63 ><a href=" javascript:void (0); "title=" View all posts filed php tutorials "under </a></li>
<li class= "Cat-item cat-item-64 ><a href=" javascript:void (0); "title=" View all posts filed JavaScript " >javascript</a></li>
</ul>
</li>
</ul>
</div>

<div style= "Clear:both;" ></div>

<div id= "Content" >
<p>in a restaurant, a menu is the "List of options for" a diner to select. A menu May is a la carte or table d ' h?te. The items that are are available for the diner to choose from are broken down into various categories, depending on the time O F Day or the event. A breakfast menu in the "Western world has eggs, toast or fruits to help" diner to start of the day. Grain and protein are considerations as. Lunch and dinner menu items are often larger portions of food because one becomes hungrier later on, after Consu Ming Energy. A degustation menu however may combine elements from breakfast, lunch and dinner.
</p>
<p>in Mary Douglas ' article, "deciphering a meal" she asserts the menu is very important because it are the basis of All society. Through picking items off the A menu, one can learn a lot about a person. If they choose meats or high-protein food, it demonstrates activity and their the need energy replenish. On the other hand, if the items chosen are vegetables or dessert, one could conclude that the person is a vegetarian or th EY like large amounts of sugar. While this does does not apply to absolutely, it may give insight to the lives or people by what they order. You can now get interactive menus and booking service, like onlinemenu.</p>

</div>
</div>

</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Fade navigation Menu

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Fade navigation Menu

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support