当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和CSS3响应式多用途多级下拉菜单插件

发布时间:2018/07/25 来源:互联网 浏览: 关键词:jquery 下拉菜单 菜单导航 响应式 CSS3 
jQuery和CSS3响应式多用途多级下拉菜单插件 jQuery和CSS3响应式多用途多级下拉菜单插件
阿里云

简要教程

这是一款非常实用的jQuery和CSS3响应式多用途多级下拉菜单插件。该下拉菜单插件可以将目录进行分组多级展示,可以以网格形式展示缩略图,还可以使用图标和文字混搭,适合于网站目录或产品目录较多的站点使用。

该下拉菜单插件可以在桌面设备和移动手机设备上正常工作,但两种情况下的下拉菜单表现形式有所不同,来看下面的图片:

多级下拉菜单演示

在这个插件中,下拉菜单是通过鼠标点击或用手触摸下拉菜单按钮来触发的。

制作方法

HTML结构

这个下拉菜单插件的HTML结构分为2个主要部分:一个是<header>元素,包含下拉菜单组件。一个是<main>元素,用于放置页面的内容。

.cd-dropdown-wrapper元素中包含一个.cd-dropdown-trigger元素,用于触发下拉菜单。还有一个.cd-dropdown元素,它包含了多级嵌套的无序列表元素。

<header>
  <divclass="cd-dropdown-wrapper">
    <aclass="cd-dropdown-trigger"href="#0">Dropdown</a>
    <navclass="cd-dropdown">
      <h2>Title</h2>
      <ahref="#0"class="cd-close">Close</a>
      <ulclass="cd-dropdown-content">
        <li>
          <formclass="cd-search">
            <inputtype="search"placeholder="Search...">
          </form>
        </li>
        <liclass="has-children">
          <ahref="#0">Clothing</a>
  
          <ulclass="cd-secondary-dropdown is-hidden">
            <liclass="go-back"><ahref="#0">Menu</a></li>
            <liclass="see-all"><ahref="#0">All Clothing</a></li>
            <liclass="has-children">
              <ahref="#0">Accessories</a>
  
              <ulclass="is-hidden">
                <liclass="go-back"><ahref="#0">Clothing</a></li>
                <liclass="see-all"><ahref="#0">All Accessories</a></li>
                <liclass="has-children">
                  <ahref="#0">Beanies</a>
  
                  <ulclass="is-hidden">
                    <liclass="go-back"><ahref="#0">Accessories</a></li>
                    <liclass="see-all"><ahref="#0">All Benies</a></li>
                    <li><ahref="#0">Caps & Hats</a></li>
                    <!-- other list items here -->
                  </ul>
                </li>
                <liclass="has-children">
                  <ahref="#0">Caps & Hats</a>
  
                  <ulclass="is-hidden">
                    <liclass="go-back"><ahref="#0">Accessories</a></li>
                    <liclass="see-all"><ahref="#0">All Caps & Hats</a></li>
                    <li><ahref="#0">Beanies</a></li>
                    <!-- other list items here -->
                  </ul>
                </li>
                <li><ahref="#0">Glasses</a></li>
                <!-- other list items here -->
              </ul>
            </li>
  
            <liclass="has-children">
              <!-- other list items here -->
            </li>
  
            <liclass="has-children">
              <!-- other list items here -->
            </li>
  
            <liclass="has-children">
              <!-- other list items here -->
            </li>
          </ul><!-- .cd-secondary-dropdown -->
        </li><!-- .has-children -->
  
        <liclass="has-children">
          <!-- other list items here -->
        </li><!-- .has-children -->
  
        <liclass="has-children">
          <!-- other list items here -->
        </li><!-- .has-children -->
  
        <liclass="cd-divider">Divider</li>
  
        <li><ahref="#0">Page 1</a></li>
        <!-- other list items here -->
  
      </ul><!-- .cd-dropdown-content -->
    </nav><!-- .cd-dropdown -->
  </div><!-- .cd-dropdown-wrapper -->
</header>
  
<mainclass="cd-main-content">
  <!-- your content here -->
</main>    

CSS样式

对于移动手机设备的用户体验来说,应该让用户的注意力放在下拉菜单的内容上。插件中将下拉菜单设置为固定定位,并将它的宽度和高度设置为手机的100%宽度和高度。默认情况下,它隐藏在屏幕右上方(translateY(-100%))。当用户触发了下拉菜单按钮,下拉菜单上会被添加.dropdown-is-active class,该class将下拉菜单移动到屏幕中。

.cd-dropdown {
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform:translateY(-100%);
  transition: transform0.5s;
}
.cd-dropdown.dropdown-is-active {
  transform:translateY(0);
}  

当用户选择了一个新一级子菜单,可见的菜单面板被使用.move-out class移出屏幕之外,新的菜单面板会通过在<ul>元素上移除class .is-hidden移入屏幕中。

.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden{
  /* push the secondary dropdown items to the right */
  transform:translateX(100%);
}
  
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
  /* push the dropdown items to the left when secondary dropdown slides in */
  transform:translateX(-100%);
}      

在大屏幕设备上(屏幕尺寸大于1024像素),因为有足够的空间显示下拉菜单的内容,因此不用替换可见的内容。

@media onlyscreenand (min-width:1024px) {
  .cd-dropdown {
    position:absolute;
    top:100%;
    /* reset style*/
    height:auto;
    width:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(30px);
    transition: opacity0.3s0s, visibility0s0.3s, transform0.3s0s;
  }
  .cd-dropdown.dropdown-is-active {
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition: opacity0.3s0s, visibility0.3s0s, transform0.3s0s;
  }
  
  .cd-dropdown-content {
    /* reset mobile style */
    position:static;
    height:auto;
    width:280px;
  }
  .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
    transform:translateX(0);
    left:100%;
    height:auto;
  }
  .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden{
    /* reset mobile style */
    transform:translateX(0);
  }
  .cd-dropdown-content > .has-children > ul {
    visibility:hidden;
  }
  .cd-dropdown-content > .has-children:hover > ul {
    /* when hover over .cd-dropdown-content items - show subnavigation */
    visibility:visible;
  }
  .cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {
    /* if .cd-secondary-dropdown is visible - show also subnavigation */
    visibility:visible;
  }
}  
JAVASCRIPT

插件中使用jQuery来监听指定元素的点击事件,如.cd-dropdown-trigger,.go-back等,并为他们相应的添加和移除对应的class。

共有人阅读,期待你的评论!评论
Top