jQuery

【jQuery】軽量のレスポンシブメニュープラグインPrMenu

September 27, 2018
jQuery PrMenu

jQuery PrMenuは軽量のレスポンシブメニューjQueryプラグイン。メニューコンテナの幅全体に均等にリンクを持つメニューを実装。

How to use

		<ul id="top-menu">
        <li><a href="#">Home</a></li>
         <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Personal</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Professional Services</a>
                    <ul>
                        <li><a href="#">Doctor</a></li>
                        <li><a href="#">Lawyer</a>
                        	<ul>
		                        <li><a href="#">Tax</a></li>
		                        <li><a href="#">Real Estate</a></li>
		                        <li><a href="#">Criminal</a></li>
                    		</ul>
                        </li>
                        <li><a href="#">Accountant</a>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Support for Customers</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Personal</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Professional</a>
                    <ul>
                        <li><a href="#">Family Doctor Clinic</a></li>
                        <li><a href="#">Lawyer</a>
                        	<ul>
		                        <li><a href="#">Tax</a></li>
		                        <li><a href="#">Real Estate Lawyer</a></li>
		                        <li><a href="#">Criminal</a></li>
                    		</ul>
                        </li>
                        <li><a href="#">Enterprise Accountant</a>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
$(document).ready(function(){
$('#top-menu').prmenu();
});
$('#top-menu').prmenu({
	"fontsize": "14",
	"height": "50",
	"case": "capitalize",
	"linkbgcolor": "#286090",
	"linktextcolor": "#ffffff",
	"linktextweight": "400",
	"linktextfont": "sans-serif",
	"hoverdark": false
});

Options

  1. fontsize
  2. height
  3. case
  4. lingbgcolor
  5. linktextweight
  6. linktextfont
  7. hoverdark

MIT