Implementación rápida de efectos de animación de menú desplegable de navegación basado en JS con descarga de código fuente

Este es un menú de navegación desplegable con efectos de animación de deformación. Cuando el menú de navegación cambia entre elementos, el menú desplegable se deformará rápidamente según el tamaño del contenido del menú, mostrando el tamaño adecuado del menú desplegable, lo que tiene un efecto muy impresionante.

El efecto de animación de desplazamiento rápido del menú de navegación es el siguiente:

Demostración de efectos　　　　　　　 　Descarga del código fuente

HTML

La estructura HTML de este menú de navegación es la siguiente:

<header class="cd-morph-dropdown"> 
<a href="#0" class="nav-trigger">Abrir Nav<span aria-hidden="true"></span></a> 
<nav class="main-nav"> 
<ul> 
<li class="has-galería desplegable" data-content="about"> 
<a href="#0">Acerca de</a> 
</li> 
<li class="has-enlaces desplegables" data-content="pricing"> 
<a href="#0">Precios</a> 
</li> 
<li class="has-botón desplegable" 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"> 
<!-- contenido aquí de desplegable --> 
</li> 
<li id="pricing" class="dropdown links"> 
<!-- contenido aquí de desplegable --> 
</li> 
<li id="contact" class="dropdown button"> 
<!-- contenido aquí de desplegable --> 
</li> 
</ul> 
<div class="bg-layer" aria-hidden="true"></div> 
</div> <!-- dropdown-list --> 
</div> <!-- morph-dropdown-wrapper --> 
</header>

Las estilos CSS se refieren al css en el código fuente./archivo style.css.

JavaScript

Para implementar este menú de navegación, se creó un objeto morphDropdown en los efectos y se utilizó el método bindEvents () para manejar los eventos del elemento.

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(); 
}
bindEvents() se utiliza para detectar eventos de entrada y salida del ratón en .has-detectar eventos de entrada y salida del ratón en los elementos .dropdown y .dropdown
morphDropdown.prototype.bindEvents = function() { 
var self = this; 
this.mainNavigationItems.mouseenter(function(event){ 
//hover sobre uno de los elementos de navegación -> mostrar cuadro desplegable 
self.showDropdown($(this)); 
}).mouseleave(function(){ 
//if not hovering over a nav item or a dropdown -> ocultar cuadro desplegable 
if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown(); 
}); 
//... 
}; 
El método showDropdown se utiliza para manejar el ancho, la altura y .dropdown-valor de translateX del elemento de lista, así como el aumento y disminución.bg-elemento de capa.
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; 
//Actualizar la posición y tamaño del cuadro desplegable y el fondo del cuadro desplegable 
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 + ')' 
}); 
};

Lo que se menciona anteriormente es lo que el editor les ha presentado sobre cómo lograr efectos de animación de menú desplegable basado en JS rápidamente, acompañado de descarga de código fuente, esperando que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo. También agradezco mucho el apoyo de todos a la página web de la教程 de grito!