带引导程序/Jquery 的多级（最多 3 级）垂直菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29888018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multilevel (up to 3 level) Vertical Menu with bootstrap/Jquery
提问by F11
I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appears below that).A sample structure of the menu structure is similar to this
我正在尝试创建一个垂直导航菜单，最多 3 级导航，最后一级是可切换菜单（当您单击最后一级菜单时，其下方会出现一组子菜单）。菜单结构的示例结构是类似于这个
I tried below code but doesn't getting desired output
我试过下面的代码，但没有得到想要的输出
<!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>
Is there any way to create a vertical multilevel menu structure using bootstrap,jquery I haven't got any multilevel menus with vertical orientation .Facing css issues with this code,not able to create similar navigation menu.
有什么方法可以使用 bootstrap,jquery 创建垂直多级菜单结构我没有任何垂直方向的多级菜单。此代码面临 css 问题，无法创建类似的导航菜单。
采纳答案by Alvaro Menéndez
This may not be the answer you are looking for but it's what I would do in your case.
这可能不是您正在寻找的答案，但这是我在您的情况下会做的。
I use sometimes bootstrap but, as good as it is, in my humble opinion, people are very often thinking it's a miraculous code that can make you do whatever you want, and lately I am finding people spent more time trying to modified bootstrap css's than making the whole css's from scratch (if you know a bit of basic css), not to say so many webs "looking" so simillar.
我有时会使用 bootstrap 但是，尽管如此，在我看来，人们经常认为这是一个神奇的代码，可以让你做任何你想做的事，最近我发现人们花更多的时间来尝试修改 bootstrap css，而不是从头开始制作整个 css（如果您了解一些基本的 css），更不用说这么多“看起来”如此相似的 web。
For what you want to do I would basically clearing ALL classes in the html and just sniping the elements from the container I could do a menu as you show in the image (well, it needs some extra style like adding the arrow icons, shadows and such, but the point is to show you another way to do it).
对于您想要做的事情，我基本上会清除 html 中的所有类，然后从容器中截取元素，我可以在图像中显示菜单（嗯，它需要一些额外的样式，例如添加箭头图标、阴影和这样，但重点是向您展示另一种方法）。
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>
And just this css (please notice that when I call directly a <a>tag you may need to call it a different way:
而只是这个 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;
}
And I have just kept the classes that activate the script so keep it untouched.
而且我只是保留了激活脚本的类，因此保持不变。
I hope this can be usefull for you. Feel free to ask any question or if you want something you want to modified (and you can't after, of course, trying) I will try my best to help you.
我希望这对你有用。随意提出任何问题，或者如果您想要修改某些内容（当然，尝试之后您不能），我会尽力帮助您。
回答by MaGiO
you can make it like your screenshot: http://codepen.io/MaGiO/pen/YXXzeJ
你可以让它像你的截图：http: //codepen.io/MaGiO/pen/YXXzeJ
HTML
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
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
JS
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
you want something like this?
你想要这样的东西吗？
