Fast implementation of the navigation Pull-down menu animation effect based on JS download _javascript tips

This is a special effect of the Pull-down navigation menu with deformable animation effects. When the navigation menu switches between menu items, the Drop-down menu quickly changes dynamically depending on the size of the menu's contents, displaying the appropriate Drop-down menu size, and the effect is great.

The Quick Navigation Pull-down menu has the following animation effect:

Effect Demo Source Download

Html

The HTML structure of the navigation menu is as follows:

CSS style please refer to the Css/style.css file in the source code.

Javascript

To implement this navigation menu, a Morphdropdown object is created in the effect. and use the Bindevents () method to handle the element's events.

function Morphdropdown (element) {this.element = element; 
This.mainnavigation = This.element.find ('. Main-nav '); 
This.mainnavigationitems = This.mainNavigation.find ('. Has-dropdown '); 
This.dropdownlist = This.element.find ('. Dropdown-list '); 
... this.bindevents ();
The Bindevents () method is used to detect mouse entry and mouse leaving events on the. Has-dropdown and. Dropdown elements. 
morphDropdown.prototype.bindEvents = function () {var self = this; This.mainNavigationItems.mouseenter (function (event) {//hover over one of the Nav items-> Show dropdown self.showdrop 
Down ($ (this)); }. MouseLeave (function () {//if not hovering over a nav item or a dropdown-> hide dropdown if (self.mainNavigation.fi nd ('. Has-dropdown:hover '). Length = = 0 && self.element.find ('. Dropdown-list:hover '). Length = = 0) 
Self.hidedropdown (); 
}); 
//... 
};
The Showdropdown method is used to handle the Translatex values of the width, height, and. Dropdown-list elements, and to magnify and shrink the. Bg-layer element. MorphDropdown.prototype.showDropdown = function (item) {var Selecteddropdown = this.dropdownList.find (' # ' +item.data (' ConTent ')), selecteddropdownheight = Selecteddropdown.innerheight (), selecteddropdownwidth = Selecteddropdown.children ( 
'. Content '). Innerwidth (), selecteddropdownleft = Item.offset (). Left + item.innerwidth ()/2-selecteddropdownwidth/2; Update dropdown and dropdown background position and size This.updatedropdown (Selecteddropdown, parseint ( 
Selecteddropdownheight), Selecteddropdownwidth, parseint (Selecteddropdownleft)); 
Add the. Active class to the selected dropdown and. Is-dropdown-visible to the. Cd-morph-dropdown//...}; MorphDropdown.prototype.updateDropdown = function (dropdownitem, height, width, left) {this.dropdownList.css ({'- Moz-transform ': ' Translatex (' + left + ' px ') ', '-webkit-transform ': ' Translatex (' + left + ' px ') ', '-ms-transform ': ' Trans LateX (' + left + ' px] ', '-o-transform ': ' Translatex (' + left + ' px ') ', ' Transform ': ' Translatex (' + left + ' px ') ', ' width 
': width+ ' px ', ' height ': height+ ' px '}; This.dropdownBg.css ({'-moz-transform ': ' ScaleX ' + WidtH + ') ScaleY (' + height + ') ', '-webkit-transform ': ' ScaleX (' + width + ') scaleY (' + height + ') ', '-ms-transform ': ' s Calex (' + width + ') scaleY (' + height + ') ', '-o-transform ': ' ScaleX (' + width + ') scaleY (' + height + ') ', ' transform 
': ' ScaleX (' + width + ') scaleY (' + height + ') '}; };

The above is described in small series for you to introduce the fast implementation of the navigation Pull-down menu animation effect with the source code download, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!