纯css3下拉导航菜单响应式下拉二级导航菜单特效代码-插件特效-星河码客

使用CSS3来制作的响应式下拉导航菜单特效。该下拉导航菜单使用CSS3动画来在鼠标滑过时显示子菜单项，并且在视口变小时会切换到列表树结构。该导航菜单的HTML结构如下：

下面的jquery代码是手机端样式点击展开的实现方式var animenuToggle = document.querySelector('.animenu__toggle'), animenuNav = document.querySelector('.animenu__nav'), hasClass = function( elem, className ) { return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' ); }, toggleClass = function( elem, className ) { var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' '; if( hasClass(elem, className ) ) { while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) { newClass = newClass.replace( ' ' + className + ' ' , ' ' ); } elem.className = newClass.replace( /^\s+|\s+$/g, '' ); } else { elem.className += ' ' + className; } }, animenuToggleNav = function (){ toggleClass(animenuToggle, "animenu__toggle--active"); toggleClass(animenuNav, "animenu__nav--open"); } if (!animenuToggle.addEventListener) { animenuToggle.attachEvent("onclick", animenuToggleNav); } else { animenuToggle.addEventListener('click', animenuToggleNav); }

纯css3下拉导航菜单响应式下拉二级导航菜单特效代码

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»