jQuery

【jQuery】フルスクリーンナビゲーションプラグイン。Menu Puncher

April 22, 2016
Menu Puncher

【jQuery】フルスクリーンでメニュー表示。フルスクリーン系ナビメニューjQueryプラグイン10選でご紹介したMenu Puncher。Menu PuncherはjQueryのためのシンプルなフルスクリーンのナビゲーションプラグインです。

CSS&JS

<script type="text/javascript" src="menupuncher.js"></script>
<link rel="stylesheet" type="text/css" href="menupuncher.css">

オプション

<script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#team').menupuncher({
            color : '#000',
            textcolor  : '#FFF',
            opacity: '0.8',
            hovercolor: '#FFF'
        });     
    });

</script>
  1. color->背景色
  2. textcolor->メニューテキストの色
  3. opacity->フルスクリーンの背景の透明度
  4. hovercolor->マウスオーバーリンクの背景

HTML

<a href="#" class="pusher">
  <span></span>
  <span></span>
  <span></span>
</a>

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

MITライセンス。