HTML5响应式导航菜单特效代码下载


HTML5响应式导航菜单特效代码下载
HTML5响应式导航菜单特效代码下载以及响应式、导航菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<nav>
  <div class="menubar">
    <a href="#0" class="home">LOGO</a>
    <div class="icons">
      <div class="secondary-icons">
        <i class="icon-second"><img src="svg/icon-171.svg"></i>
        <i class="icon-second"><img src="svg/icon-198.svg"></i>
      <i class="icon-second"><img src="svg/icon-178.svg"></i>
      </div>
      <i class="icon-menu"><span></span></i>
    </div>
  </div>
  <ul class="menu">
    <li class="menu-link"><a href="#0" class="text-item">About</a></li>
    <li class="menu-link sub">
      <a href="#0" class="text-item">Clients<span class="icon"></span></a>
      <ul class="submenu">
        <li class="sub-item"><a href="#0">Burger King</a></li>
        <li class="sub-item"><a href="#0">Southwest Airlines</a></li>
        <li class="sub-item"><a href="#0">Levi Strauss</a></li>
      </ul>
    </li>
    <li class="menu-link sub">
      <a href="#0" class="text-item">Services<span class="icon"></span></a>
      <ul class="submenu">
        <li class="sub-item"><a href="#0">Print Design</a></li>
        <li class="sub-item"><a href="#0">Web Design</a></li>
        <li class="sub-item"><a href="#0">Mobile App Development</a></li>
      </ul>
    </li>
    <li class="menu-link"><a href="#0" class="text-item">Contact</a></li>
  </ul>
</nav>
<article>
  <h1>Navigation with Sub-Navigation using CSS Transitions and Animations</h1>
<p>Made for Codepen Challenge #cpc-fork-nav #codepenchallenge</p>
</article>

相关推荐

发表评论

相关文章