web-dev-qa-db-ja.com

マルチレベル（最大3レベル）垂直メニュー、ブートストラップ/ Jquery

垂直で3レベルまでのナビゲーションメニューを作成しようとしています。最終レベルは切り替え可能なメニューです（最終レベルメニューをクリックすると、その下に一連のサブメニューが表示されます）。メニュー構造のサンプル構造は次のとおりです。これに似ています

enter image description here

以下のコードを試しましたが、望ましい出力が得られません

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap </title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link href="StyleSheet1.css" rel="stylesheet" />
    <!-- Optional theme
    <link rel="stylesheet" href="">
         -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .dropdown-submenu {
            position: relative;
            border-bottom: 1px solid #ccc;
        }

            .dropdown-submenu > .dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px;
                border-radius: 0 6px 6px 6px;
            }

            .dropdown-submenu:hover > .dropdown-menu {
                display: block;
            }

            .dropdown-submenu > a:after {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #ccc;
                margin-top: 5px;
                margin-right: -10px;
            }

            .dropdown-submenu:hover > a:after {
                border-left-color: #fff;
            }

            .dropdown-submenu.pull-left {
                float: none;
            }

                .dropdown-submenu.pull-left > .dropdown-menu {
                    left: -100%;
                    margin-left: 10px;
                    -webkit-border-radius: 6px 0 6px 6px;
                    -moz-border-radius: 6px 0 6px 6px;
                    border-radius: 6px 0 6px 6px;
                }

        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-md-3 column margintop20">
            <ul class="nav nav-pills nav-stacked">

                <li class="dropdown-submenu active">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="dropdown-menu">

                        <li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li>
                        <li class="dropdown-submenu"><a href="#">Research</a></li>
                        <li class="dropdown-submenu active">
                            <a href="#">APL & Products</a>
                            <ul class="dropdown-menu parent">
                                <li style=" border-bottom: 1px solid #ccc;">
                                    <a href="#">
                                        Approved Product List
                                        <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                        <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                    </a>

                                    <ul class="child">
                                        <li style="padding:10px 15px;">Platforms</li>
                                        <li style="padding: 10px 15px;">Managed Funds</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                    </ul>

                                </li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"><a href="#">Implementation</a></li>
                        <li class="dropdown-submenu"><a href="#">Review</a></li>
                        <li class="dropdown-submenu"><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu"><a href="#">Personal Development</a></li>
                <li class="dropdown-submenu"><a href="#">Practice</a></li>
                <li class="dropdown-submenu"><a href="#">News</a></li>
            </ul>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
    </script>
</body>
</html>

ブートストラップ、jqueryを使用して垂直マルチレベルメニュー構造を作成する方法はありますか？垂直方向のマルチレベルメニューはありません。このコードでcssの問題に直面すると、同様のナビゲーションメニューを作成できません。

jquerycsstwitter-bootstrapjquery-ui
11
F11

これはあなたが探している答えではないかもしれませんが、それは私があなたの場合にどうするかです。

私はときどきbootstrapを使用しますが、私の考えでは、人々があなたが望むことを何でもできる奇跡的なコードだと思っていることがよくありますが、最近私は人々を見つけていますbootstrap css'sを完全にゼロから作成するよりも（少し基本的なcssを知っている場合）より多くの時間を費やして、それほど多くのWebが "見た目"が似ているとは言いません。

あなたがしたいことのために、私は基本的にhtmlのすべてのクラスをクリアし、コンテナーから要素を切り取るだけで、画像に表示されるようにメニューを作成できます（まあ、矢印アイコン、影、そうですが、ポイントはそれを行う別の方法を示すことです）。

html：

<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class=""><a href="#">Strategy & Technical</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#">APL & Products</a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                        <li class=""><a href="#">Review</a></li>
                        <li class=""><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
                <li ><a href="#">News</a></li>
            </ul>

    </div>

そして、このcssだけです（<a>タグを直接呼び出すときは、別の方法で呼び出す必要があることに注意してください：

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

また、スクリプトをアクティブにするクラスをそのままにしたので、そのままにしておいてください。

[〜＃〜] fiddle [〜＃〜]

これがあなたに役立つことを願っています。ご不明な点がございましたら、お気軽にご相談ください。修正したいものがある場合は、ご遠慮なくお問い合わせください。

7
Alvaro Menéndez

あなたはあなたのスクリーンショットのようにすることができます： http://codepen.io/MaGiO/pen/YXXzeJ

HTML

<div id="mn-wrapper">
        <div class="mn-sidebar">
            <div class="mn-toggle"><i class="fa fa-bars"></i></div>
            <div class="mn-navblock">
                <ul class="mn-vnavigation">
                    <li class="dropdown-submenu active">
                        <a tabindex="-1" href="#">Client Advice</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Pre-advice</a></li>
                            <li><a href="#">Strategy & Technical</a></li>
                            <li><a href="#">Research</a></li>
                            <li class="dropdown-submenu active">
                                <a href="#">APL & Products</a>
                                <ul class="dropdown-menu parent">
                                    <li style=" border-bottom: 1px solid #ccc;">
                                        <a href="#">
                                            Approved Product List
                                            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                            <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                        </a>

                                        <ul class="child">
                                            <li style="padding:10px 15px;">Platforms</li>
                                            <li style="padding: 10px 15px;">Managed Funds</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                        </ul>

                                    </li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Implementation</a></li>
                            <li><a href="#">Review</a></li>
                            <li><a href="#">Execution Only</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Personal Development</a></li>
                    <li><a href="#">Practice</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>
            <div class="text-right collapse-button" style="padding:7px 9px;">

            </div>
        </div>
        <div class="container" id="mn-cont">
            <div class="cnt-mcont">
                <h1>Title Page</h1>
            </div>
        </div>
    </div>

CSS

    html{
        height:100%; /* make sure it is at least as tall as the viewport */
    }
    body{
        height:100%; /* force the BODY element to match the height of the HTML element */
        position: relative;
    }
    .dropdown-submenu {
        border-bottom: 1px solid #ccc;
    }
    #mn-wrapper {
      display: table;
      width: 100%;
      position: absolute;
      height: 100%;
    }
    .mn-sidebar {
      display: table-cell;
      position: relative;
      vertical-align: top;
      padding-bottom: 49px;
      background: #272930;
      width: 216px;
      z-index: 2;
    }
    #mn-cont {
      display: table-cell;
      vertical-align: top;

      position: relative;
      padding: 0;
    }
    .container {
      margin-right: auto;
    }
    .cnt-mcont {
      background-color: #F6F6F6;
      color: inherit;
      font-size: 13px;
      font-weight: 200;
      line-height: 21px;
      padding: 15px 30px 30px 30px;
      margin-top: 0;
      height: 101vh;
    }
    .mn-sidebar .mn-toggle {
      display: none;
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
    }
    .mn-vnavigation {
      margin: 0 0 0 0;
      padding: 0;
      border-top: 1px solid #1a1c20;
      border-bottom: 1px solid #2f323a;
    }
    .mn-vnavigation li a {
      border-top: 1px solid #32353e;
      border-bottom: 1px solid #1a1c20;
      display: block;
      padding: 14px 18px 13px 15px;
      color: #fff;
      text-decoration: none;
      font-size: 12px;
      font-weight: 300;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
      white-space: nowrap;
    }
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        height: 101vh;
        width: 216px;
        background: #272930;
    }
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }
    .dropdown-submenu.pull-left {
        float: none;
    }
    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
    ul {
        list-style: none;
    }

JS

$('.child').hide(); //Hide children by default

    $('.parent').children().click(function () {
        event.preventDefault();
        $(this).children('.child').slideToggle('slow');
        $(this).find('span').toggle();
    });

あなたはこのようなものが欲しいですか？

6
MaGiO