css3和jquery实现的可折叠导航菜单(适合手机网页)

之前为大家介绍了好几款css3导航，今天为大家在介绍的是一款适合放在手机网页的导航菜单。点击列表图标以下拉式的形式显示菜单，单击关闭，动画关闭。效果相当不错。效果图如下：

在线预览源码下载

这个实例由css3和依赖于jquery插件。下面是实现代码

html代码：

   <nav class="nav" role="navigation" style="height: 195px;">
        <ul class="nav-items">
            <li><a target=_blank href="http://***">Home</a></li>
            <li><a target=_blank href="http://***">About</a></li>
            <li><a target=_blank href="http://***">Clients</a></li>
            <li><a target=_blank href="http://***">Contact Us</a></li>
        </ul>
    </nav>
    <header style="-webkit-transform: translate3d(0px, 195px, 0px);">
  <button class="menu-button-target active" data-ic-class="button-trigger">
      <span class="menu-button"></span>
  </button>
  Example Header
</header>
    <section>
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
        <article>
        </article>
    </section>

更多相关文章

随机推荐