当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<nav class="animenu"> 
  <button class="animenu__toggle">
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
  </button>
  <ul class="animenu__nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Archive</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>     
    <li>
      <a href="#">Categories</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>                 
  </ul>
</nav>
```

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

```html
(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);
      }
    })()
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果