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

jQuery和css3时尚二级下拉导航菜单插件

发布时间:2018/07/03 来源:互联网 浏览: 关键词:jquery CSS3 菜单导航 下拉菜单 
jQuery和css3时尚二级下拉导航菜单插件 jQuery和css3时尚二级下拉导航菜单插件
阿里云

简要教程

这是一款jQuery和css3时尚二级下拉导航菜单插件。当你的网站上有非常多的子栏目,你的导航菜单应该如何布局才能使用户得到最佳体验效果?你也可以像这个jQuery和css3炫酷隐藏侧边栏菜单特效插件一样将子菜单都隐藏起来。在这个插件中我们不这样做,我们制作一个巨型的下拉导航菜单,里面可以有二级菜单和图文介绍和图标文字介绍等等内容。

插件中使用的图标来自于Dario Ferrando,你可以在Freebiesbug.com免费下载它们。

HTML结构

html结构使用一个嵌套的无序列表结构。我们创建4个主要的section:<header>、<main>、<nav>和.cd-search<div>。你一定想知道导航为什么不放到header中?因为我们在大屏幕上(分辨率大于1170px)使用jQuery将它放到header里面。在小屏幕设备上,它很容易作为一个单独的元素进行处理。

<headerclass="cd-main-header">
  <aclass="cd-logo"href="#0"><imgsrc="img/cd-logo.svg"alt="Logo"></a>
  
  <ulclass="cd-header-buttons">
    <li><aclass="cd-search-trigger"href="#cd-search">Search<span></span></a></li>
    <li><aclass="cd-nav-trigger"href="#cd-primary-nav">Menu<span></span></a></li>
  </ul><!-- cd-header-buttons -->
</header>
  
<mainclass="cd-main-content">
  <!-- your content here -->
   
  <divclass="cd-overlay"></div>
</main>
  
<navclass="cd-nav">
  <ulid="cd-primary-nav"class="cd-primary-nav is-fixed">
    <liclass="has-children">
      <ahref="#0">Clothing</a>
  
      <ulclass="cd-secondary-nav 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</a></li>
                <li><ahref="#0">Gifts</a></li>
                <li><ahref="#0">Scarves</a></li>
              </ul>
            </li>
            <li><!-- ... --></li>
          </ul>
        </li>
  
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
      </ul>
    </li>
  
    <liclass="has-children">
      <!-- ... -->
    </li>
  
    <liclass="has-children">
      <!-- ... -->
    </li>
  
    <li><ahref="#0">Standard</a></li>
  </ul><!-- primary-nav -->
</nav><!-- cd-nav -->
  
<divid="cd-search"class="cd-search">
  <form>
    <inputtype="search"placeholder="Search...">
  </form>
</div>

CSS样式

CSS样式十分简单,你可以下载文件来自行研究一下。有一件事必须指出,我们位导航菜单创建了两个class,这两个样式稍有一些不同:

  • nav-is-fixed - 用于固定导航。
  • nav-on-left - 如果你希望在移动手机设备上导航在左侧就使用它。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top