jQuery UI の Menu によるアイコン付き多階層メニュー

jQuery UI の Menu Widget による多階層メニューの各メニューにアイコンを加える方法。

実装例(サンプル)

実装例(サンプル)の動作について

「>」のある「メニュー2」と「メニュー4」にカーソルを合わせると、それぞれの第二階層のメニューが現れる。

「>」のある第二階層の「メニュー2-1」にカーソルを合わせると、第三階層のメニューが現れる。

メニューがフォーカス状態の場合、キーボードの矢印キーなどで操作することもできる。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>

JavaScript

<script>
jQuery( function() {
    jQuery( "#sampleMenu" ).menu();
} );
</script>

CSS

<style>
<!--
.ui-menu {
    width: 200px;
    font-size: 12px;
}
-->
</style>

HTML

アイコンを加えたいメニューに<span class="ui-icon アイコンの種類"></span>を加える。

アイコンの種類については、jQuery UI の Button プラグインで作るアイコンボタン一覧のページへ。

<ul id="sampleMenu">
    <li><a href="#"><span class="ui-icon ui-icon-home"></span>メニュー1</a></li>
    <li><a href="#"><span class="ui-icon ui-icon-folder-collapsed"></span>メニュー2</a>
        <ul id="sampleMenu">
            <li><a href="#"><span class="ui-icon ui-icon-folder-collapsed"></span>メニュー2-1</a>
                <ul id="sampleMenu">
                    <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>メニュー2-1-1</a></li>
                    <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>メニュー2-1-2</a></li>
                    <li><a href="#"><span class="ui-icon ui-icon-search"></span>メニュー2-1-3</a></li>
                </ul>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-clock"></span>メニュー2-2</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-calendar"></span>メニュー2-3</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="ui-icon ui-icon-star"></span>メニュー3</a></li>
    <li><a href="#"><span class="ui-icon ui-icon-folder-collapsed"></span>メニュー4</a>
        <ul id="sampleMenu">
            <li><a href="#"><span class="ui-icon ui-icon-cart"></span>メニュー4-1</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-pencil"></span>メニュー4-2</a></li>
            <li><a href="#"><span class="ui-icon ui-icon-heart"></span>メニュー4-3</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>メニュー5</a></li>
</ul>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Menu, メニュー パーマリンク