CSS Fast navigation pull-down menu animation effect

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.

Html

The HTML structure of the navigation menu is as follows:

<a href= "#0" class= "Nav-trigger" >open nav<span aria-hidden= "true" ></span></a>

<nav class= "Main-nav" >
<ul>
<li class= "Has-dropdown Gallery" data-content= "about" >
<a href= "#0" >About</a>
</li>

<li class= "Has-dropdown links" data-content= "pricing" >
<a href= "#0" >Pricing</a>
</li>

<li class= "has-dropdown button" data-content= "Contact" >
<a href= "#0" >Contact</a>
</li>
</ul>
</nav>

<div class= "Morph-dropdown-wrapper" >
<div class= "Dropdown-list" >
<ul>
<li id= "About" class= "dropdown gallery" >
<!--dropdown content here-->
</li>

<li id= "Pricing" class= "dropdown links" >
<!--dropdown content here-->
</li>

<li id= "Contact" class= "dropdown button" >
<!--dropdown content here-->
</li>
</ul>

<div class= "Bg-layer" aria-hidden= "true" ></div>
</div> <!--dropdown-list-->
</div> <!--morph-dropdown-wrapper-->

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 exit 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.showdropdown ($ (this));
}). MouseLeave (function () {
If not hovering over a nav item or a dropdown-> hide dropdown
if (Self.mainNavigation.find ('. 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 ': ' Translatex (' + 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 ': ' ScaleX (' + width + ') scaleY (' + height + ') ',
'-o-transform ': ' ScaleX (' + width + ') scaleY (' + height + ') ',
' Transform ': ' ScaleX (' + width + ') scaleY (' + height + ') '
});
};