带有引导程序/jQuery的多级(最多3级)垂直菜单 [英] Multilevel (up to 3 level) Vertical Menu with bootstrap/Jquery
问题描述
我正在尝试创建一个垂直的导航菜单，最多可进行三级导航，而上一级是可切换菜单(当您单击上一级菜单时，下面会出现一组子菜单).菜单结构与此类似
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
我尝试了下面的代码，但没有得到想要的输出
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>
有没有办法使用bootstrap创建垂直的多级菜单结构，jquery我没有任何垂直方向的多级菜单.面对此代码的css问题，无法创建类似的导航菜单.
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.
推荐答案
这可能不是您要寻找的答案，但这是我要为您解决的问题.
This may not be the answer you are looking for but it's what I would do in your case.
我有时会使用引导程序，但就我的拙见而言，尽管如此，但人们经常认为这是一个奇迹般的代码，它可以使您做任何想做的事，最近我发现人们花了更多时间尝试进行修改引导css而不是从头开始制作整个css(如果您了解一些基本的css)，更不用说这么多站点看起来"如此相似.
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.
对于您要执行的操作，我基本上会清除html中的所有类，然后从容器中剪裁元素，就可以在图像中显示菜单了(嗯，它需要一些额外的样式，例如添加箭头图标，阴影等，但重点是向您展示另一种方法.
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:
<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>标记时，您可能需要以其他方式调用它:
And just this css (please notice that when I call directly a <a> tag you may need to call it a different way:
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.
FIDDLE
我希望这对您有用. 随时提出任何问题，或者如果您要修改某些内容(当然，尝试之后，您将无法再尝试)，我会尽力为您提供帮助.
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.
这篇关于带有引导程序/jQuery的多级(最多3级)垂直菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
