Search

開閉式ツリー型メニュー

unknown

JavaScriptを使用した開閉式のツリー型メニューです。好きなだけ階層を増やせます。

子メニューを非表示(display:none)にしておき、親テキストがクリックされた時に子メニューを表示(disabled:block)させます。 アイコンは、リストが開いている場合に「+」、閉じている場合に「-」に変わります。 子メニューを閉じる場合は、再度、親テキストをクリックします。

サンプルを見る
<style type="text/css">
    ul#NodeMenu {
        margin:0; padding:0;
        width:250px;
        list-style:none;
    }
    ul#NodeMenu li {
        margin:5px 0; padding:0;
        list-style:none;
    }
    ul#NodeMenu a {
        text-decoration:none;
        color:navy;
        display:block;
        padding:2px 0;
    }
    ul#NodeMenu a:hover {
        color:orange;
    }
    ul#NodeMenu span.parent { /* 親テキスト */
        color:navy; font-weight:bold;
        background-color:#eeeeee;
    }

    ul#NodeMenu div.child { /* 子メニュー */
        background-color:#ffffcc;
    }
    ul#NodeMenu div.indent {
        margin-left:1em;
    }
</style>

<script type="text/javascript">
    /* ブラウザ判別 */
    var ie=document.all ? 1 : 0;
    var ns6=document.getElementById&&!document.all ? 1 : 0;
    var opera=window.opera ? 1 : 0;

    /* 子メニューの表示・非表示切替 */
    function openFolder(childObj, parentObj){
        var child="";
        var parent="";
        var sw="/content/img/js/show.gif"; /* フォルダ表示時のアイコン画像 */
        var hd="/content/img/js/hide.gif"; /* フォルダ非表示時のアイコン画像 */
        if(ie || ns6 || opera){
            child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style;
            parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj);
            if (child.display=="none"){
                child.display="block";
                parent.src=sw;
            }else{
                child.display="none";
                parent.src=hd;
            }
        }
    }
</script>

<ul id="NodeMenu">
    <!-- 2階層[A] Begin -->
    <li>
        <img id="close_1" src="/content/img/js/hide.gif" onclick="openFolder('open_1', 'close_1')" alt="" />
        <span class="parent" onclick="openFolder('open_1', 'close_1')">ctgA(2階層)</span>
    </li>
    <li>
        <div class="indent">
            <div id="open_1" class="child" style="display:none;">
                <!-- [A-1] Begin -->
                <ul>
                    <li><a href="#">・ctgA-1</a></li>
                    <li>
                        <img id="close_1_1" src="/content/img/js/hide.gif" onclick="openFolder('open_1_1', 'close_1_1')" alt="" />
                        <span class="parent" onclick="openFolder('open_1_1', 'close_1_1')">ctgA-2</span>
                    </li>
                    <li>
                        <div class="indent">
                            <div id="open_1_1" class="child" style="display:none;">
                                <ul>
                                    <li><a href="#">・ctgA-2-1</a></li>
                                    <li><a href="#">・ctgA-2-2</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- node[A-1] End // -->
            </div>
        </div>
    </li>
    <!-- 2階層[A] End // -->

    <!-- 3階層[B] Begin -->
    <li>
        <img id="close_2" src="/content/img/js/hide.gif" onclick="openFolder('open_2', 'close_2')" alt="" />
        <span class="parent" onclick="openFolder('open_2', 'close_2')">ctgB(3階層)</span>
    </li>
    <li>
        <div class="indent">
            <div id="open_2" class="child" style="display:none;">
                <!-- [B] Begin -->
                <ul>
                    <li>
                        <a href="#">・ctgB-1</a>
                        <!-- [B-2] Begin -->
                        <ul>
                            <li>
                                <img id="close_2a" src="/content/img/js/hide.gif" onclick="openFolder('open_2a', 'close_2a')" alt="" />
                                <span class="parent" onclick="openFolder('open_2a', 'close_2a')">ctgB-2</span>
                            </li>
                            <li>
                                <div class="indent">
                                    <div id="open_2a" class="child" style="display:none;">
                                        <!-- [B-2-1] Begin -->
                                        <ul>
                                            <li><a href="#">・ctgB-2-1</a></li>
                                            <li>
                                                <img id="close_2aa" src="/content/img/js/hide.gif" onclick="openFolder('open_2aa', 'close_2aa')" alt="" />
                                                <span class="parent" onclick="openFolder('open_2aa', 'close_2aa')">ctgB-2-2</span>
                                            </li>
                                            <li>
                                                <div class="indent">
                                                    <div id="open_2aa" class="child" style="display:none;">
                                                        <ul>
                                                            <li><a href="#">・ctgB-2-2-1</a></li>
                                                            <li><a href="#">・ctgB-2-2-2</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                            <li><a href="#">・ctgB-2-3</a></li>
                                        </ul>
                                        <!-- [B-2-1] End // -->
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- [B-2] End // -->
                    </li>
                </ul>
            </div>
        </div>
    </li>
    <!-- 3階層[Bs] End // -->
</ul>

開閉式ツリー型メニュー(ロールオーバーあり)

unknown

サンプルを見る
<style type="text/css">
    /* メニュー全体 */
    div#menuA, div#menuA * { margin:0; padding:0; }
    div#menuA { margin:20px; width:210px; }
    div#menuA dl { list-style:none; border-top:1px solid silver; width:100%; margin:0; padding:0; }
    /* カテゴリ名 */
    div#menuA dt { border-width:1px; border-style:none solid solid solid; border-color:silver; }
    div#menuA dt a { padding:5px 0; display:block; color:black; text-decoration:none; background:#eee url(/content/img/js/arrowinbox.gif) no-repeat right center; width:100%; }
    /* カテゴリメニュー */
    div#menuA dd { border-width:1px; border-style:none solid solid solid; border-color:silver; }
    div#menuA dd a { text-decoration:none; display:block; background:url(/content/img/js/arrow.gif) no-repeat left center; padding:2px 0 2px 10px; color:black; }
    div#menuA dd a:hover { color:#fff; background:orange url(/content/img/js/arrow_wh.gif) no-repeat left center; }
    div#menuA dd a.line, div#menuA dd a.line:hover { border-bottom:1px dotted silver; }
    div#menuA dd a.end, div#menuA dd a.end:hover { padding-bottom:1px; }
    /* ダイレクトリンク */ 
    div#menuA dt.direct a { display:block; color:#000; background:#fff url(/content/img/js/arrow.gif) no-repeat right center; }
    div#menuA dt.direct a:hover { color:#fff; background:orange url(/content/img/js/arrow_wh.gif) no-repeat right center; }
</style>

<script type="text/javascript">
    /* ブラウザ判別 */
    var ie=document.all ? 1 : 0;
    var ns6=document.getElementById&&!document.all ? 1 : 0;
    var opera=window.opera ? 1 : 0;

    /* 子メニューの表示・非表示切替 */
    function openchild(childObj, parentObj) {
        var parent="";
        var child="";
        var sw="/content/img/js/arrowinbox_on.gif"; /* 子メニューが開いてる時のアイコン */
        var hd="/content/img/js/arrowinbox.gif"; /* 子メニューが閉じている時のアイコン */
        if (ie || ns6 || opera) {
            child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style;
            parent=ns6 ? document.getElementById(parentObj).style : document.all(parentObj).style;
            if (child.display=="none") {
                child.display="block";
                child.backgroundColor="white";
                parent.backgroundColor="orange";
                parent.color="white";
            } else {
                child.display="none";
                parent.backgroundColor="#eeeeee";
                parent.color="black";
            }
        }
    }
</script>

<div id="menuA">
    <dl>
        <!-- menu1 -->
        <dt>
            <a href="javascript:void(0)" id="closer_1" onclick="openchild('opener_1', 'closer_1')">&nbsp;カテゴリⅠ</a>
        </dt>
        <dd id="opener_1" style="display:none;">
            <a href="javascript:void(0)" class="line">メニューⅰ</a>
            <a href="#" class="line">メニューⅱ</a>
            <a href="#" class="end">メニューⅲ</a>
        </dd>
        <!-- menu2 -->
        <dt>
            <a href="javascript:void(0)" id="closer_2" onclick="openchild('opener_2', 'closer_2')">&nbsp;カテゴリⅡ</a>
        </dt>
        <dd id="opener_2" style="display:none;">
            <a href="#" class="line">メニューⅰ</a>
            <a href="#" class="line">メニューⅱ</a>
            <a href="#" class="end">メニューⅲ</a>
        </dd>
        <!-- menu3 -->
        <dt class="direct"><a href="#">&nbsp;カテゴリⅢ</a>
        <!-- 4 -->
        <dt>
            <a href="javascript:void(0)" id="closer_3" onclick="openchild('opener_3', 'closer_3')">&nbsp;カテゴリⅣ</a>
        </dt>
        <dd id="opener_3" style="display:none;">
            <a href="#" class="line">メニューⅰ</a>
            <a href="#" class="line">メニューⅱ</a>
            <a href="#" class="end">メニューⅲ</a>
        </dd>
        <!-- menu5 -->
        <dt class="direct"><a href="#">&nbsp;カテゴリⅤ</a>
        <!-- menu6 -->
        <dt class="direct"><a href="#">&nbsp;カテゴリⅥ</a>
    </dl>
</div>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women