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

转载于 2021-12-24 18:49:22 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/11848

文章标签：

#javascript #css3 #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这篇博客介绍了如何利用CSS3实现一个响应式的导航菜单，该菜单在鼠标悬停时通过动画展示子菜单，并在屏幕尺寸变小时转换为列表树结构。文章还展示了用于手机端样式的jQuery代码，实现点击展开菜单的功能。

下载地址

使用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( /[ ]/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); }