jQuery

【jQuery】jQueryとブートストラップ3を使用した軽量のナビCheeseburger Navigation

December 7, 2016
cheeseburger

Cheeseburger NavigationはjQueryとブートストラップ3を使用した軽量、レスポンシブのアニメーション効果を持つハンバーガーアイコンとナビゲーション。

Installation

jQueryとcheeseburger.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="assets/js/cheeseburger.js"></script>

Bootstrapとcheeseburger.css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/cheeseburger.css" rel="stylesheet">

HTMLマークアップ

<nav class="navigation">
    <div class="container nav-inner">
        <div class="nav-logo">
            <a href="/">
                <img src="assets/img/logo.png" class="img-responsive" alt="Logo">
            </a>
        </div>
        <div class="nav-links">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Shop</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Register</a></li>
              <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>
    <div class="cheeseburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

MIT