html5响应式下拉,CSS3响应式下拉导航菜单特效

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

使用方法

HTML结构

该导航菜单的HTML结构如下：

• Home

• Archive

  • Sub Item 1
  • Sub Item 2
  • Sub Item 3

• Categories

  • Sub Item 1
  • Sub Item 2
  • Sub Item 3

• About

• Contact

JavaScript

该导航菜单使用简单的JavaScript代码来处理菜单的点击事件。

(function(){

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);

}

})()