Многоуровневое (до 3-х уровней) Вертикальное меню с бутстрапом/JQuery

Я пытаюсь создать навигационное меню, которое является вертикальным и до трехуровневой навигации, а последний уровень - меню для переходов (когда вы нажимаете на меню последнего уровня, под ним появляется подменю). Структура выборки Структура меню аналогична структуре

Я попытался выполнить код ниже, но не получил желаемый результат

  <!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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;">

    <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 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 с этим кодом, неспособное создать подобное навигационное меню.

Ответ 1

Это не может быть ответ, который вы ищете, но это то, что я сделал бы в вашем случае.

Я использую иногда бутстрап, но, как ни крути, по моему скромному мнению, люди очень часто думают, что это чудесный код, который может заставить вас делать то, что вы хотите, и в последнее время я нахожу, что люди тратят больше времени на модификацию bootstrap css, чем сделать весь css с нуля (если вы знаете немного базового css), не говоря уже о том, что многие веб-сайты "выглядят" так simillar.

Для того, что вы хотите сделать, я бы в основном очистил ВСЕ классы в 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;
}

И я только что сохранил классы, которые активируют script, поэтому не трогайте его.

FIDDLE

Я надеюсь, что это может быть полезно для вас. Не стесняйтесь задавать какие-либо вопросы или хотите что-то, что хотите изменить (и вы не можете после этого, конечно, попробовать). Я постараюсь помочь вам.

Ответ 2

вы можете сделать это как свой снимок экрана: 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;
    }

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

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

вам нужно что-то подобное?