Off-Canvas_Menu_Effectsのデモページ_-_Top_Side

Facebook風メニューから何でもござれのOff-Canvas Menu Effectsプラグイン

2014.10.13   2015


ナビゲーションメニューのエフェクトの種類がなんとこのプラグイン一つで9種類も使える!
しかもどのエフェクトもイケてる。
あのサイトみたいなメニューが良いな…と思っているあなたはこの9種類の中にあるのでは?

 

Off-Canvas Menu Effectsプラグインのオススメ/ポイント

  •   Facebook風のメニュー表示だけではない!メニューエフェクト種類がなんと9種類も!
  •   ナビゲーションのプラグインを探している方はこれだけで十分では?
  •   jQueryも必要なし!

Off-Canvas Menu Effectsプラグインのデモ


Off-Canvas Menu Effectsプラグインのページ


Off-Canvas Menu Effectsプラグインの使い方

それではOff-Canvas Menu Effectsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div class="menu-wrap">
    <nav class="menu-top">
        <div class="profile"><img src="img/pei.png" alt="pei"/><span>pei</span></div>
        <div class="icon-list">
            <a href="#"><i class="fa fa-fw fa-star-o"></i></a>
            <a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
            <a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
            <a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
        </div>
    </nav>
    <nav class="menu-side">
        <a href="#">Recent Stories</a>
        <a href="#">Reading List</a>
        <a href="#">My Stories</a>
        <a href="#">Categories</a>
    </nav>
</div>
<button class="menu-button" id="open-button">Open Menu</button>

CSSコード

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/menu_topside.css" />
/* font awasomeを利用 */
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />

JavaScriptコード

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

チェックポイント

デザインとしてFont Awesome Iconsを利用していますので、その点は各自にお任せ致します。
エフェクトの変更の仕方は実装するCSSとJavaScriptファイルを変更して利用します。
各エフェクトのCSSやJavaScriptはフルページデモのソースをご確認下さい。

プラグインへ一言

リッチナビゲーションを探しているならこのプラグインで決まり

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております