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

下载地址

 

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

• Home
• Archive
  • Sub Item 1
  • Sub Item 2
  • Sub Item 3
• Categories
  • Sub Item 1
  • Sub Item 2
  • Sub Item 3
• About
• Contact

下面的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( /[ ]/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); }

dd: