twitter-bootstrap 垂直菜单引导程序和角度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27578732/
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
Vertical menu bootstrap and angular
提问by
I'm trying to create vertical menu like this site. the thing i'm looking for is : when menu is collapse sub menus open with hover and when menu is open , sub menus open below the links .
我正在尝试创建像这个站点这样的垂直菜单。我正在寻找的是：当菜单折叠时，通过悬停打开子菜单，当菜单打开时，子菜单在链接下方打开。
Here is my JSFiddle, what i've done is : i can open the menu after click the button .
sub menu is working (last one) buti don't want to open submenu when menu is collapsed .
这是我的JSFiddle，我所做的是：单击按钮后我可以打开菜单。
子菜单正在工作（最后一个），但我不想在菜单折叠时打开子菜单。
Angular
角
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
$scope.noneStyle = false;
$scope.bodyCon = false;
$scope.sasd = "asd";
//Toggle the styles
$scope.toggleStyle = function () {
//If they are true, they will become false
//and false will become true
$scope.bodyCon = !$scope.bodyCon;
$scope.noneStyle = !$scope.noneStyle;
}
});
UPDATE
更新
menu with submenu :
带子菜单的菜单：
submenu open with hover
悬停打开子菜单
that's what i want !! thx in advance
这就是我想要的 ！！提前谢谢
回答by Aakash
Try this. http://jsfiddle.net/zqdmny41/4/
试试这个。http://jsfiddle.net/zqdmny41/4/
Remove the collapse class from your sub menu list and use ng-mouseenter on the menu and ng-mouseleave on the aside tag.
从您的子菜单列表中删除折叠类，并在菜单上使用 ng-mouseenter 并在旁边标签上使用 ng-mouseleave。
<aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}" ng-mouseleave="subMenu = false">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#rightMenu" href="#" ng-mouseover="subMenu = true">Tools<i class="fa fa-file-text"></i></a>
Also your div and li tags are all over the place, please structure them correctly. For example, div cannot come in between two li tags.
此外，您的 div 和 li 标签到处都是，请正确构建它们。例如，div 不能介于两个 li 标签之间。
回答by kite.js.org
Just use CSS, apply different styles to your submenu when "noneStyle" is toggled, under normal style, your submenu should use position: absolute; left: --px;for positioning, and under "noneStyle", it should be position: staticto force it display with initial style.
使用CSS，切换“noneStyle”时为子菜单应用不同的样式，在正常样式下，您的子菜单应该position: absolute; left: --px;用于定位，而在“noneStyle”下，应该position: static强制以初始样式显示。
and BTW, please do not place <div>tag under <ul>, it's not a good way to write HTML, I've changed it for you.
顺便说一句，请不要<div>在 下放置标签<ul>，这不是编写 HTML 的好方法，我已经为您更改了。
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
$scope.noneStyle = false;
$scope.bodyCon = false;
$scope.sasd = "asd";
//Toggle the styles
$scope.toggleStyle = function () {
//If they are true, they will become false
//and false will become true
$scope.bodyCon = !$scope.bodyCon;
$scope.noneStyle = !$scope.noneStyle;
}
//add class to search box
$scope.openSearch = false;
$scope.searchToggle = function () {
$scope.openSearch = !$scope.openSearch;
}
});body{
background:#300F18 !important;
}
li{
list-style:none;
}
.rightbar {
background: none repeat scroll 0 0 #fff;
border-left: 5px solid #ccc;
height: 100%;
padding-top: 50px;
position: fixed;
right: 0;
width: 60px;
z-index: 200;
}
.rightbar ul li {
color: #333;
font-weight: 100;
padding: 16px 0 21px;
/*width: 0;*/
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.rightbar ul li:hover {
background:inherit;
width:100%;
}
.rightbar ul li a {
color: #8b8b8b;
float: right;
font-size: 12px;
line-height: 23px;
padding-right: 54px !important;
font-size:0;
transition: all 0.2s ease 0s;
-webkit-transition:all 0.1s ease;
-moz-transition:all 0.1s ease;
-o-transition:all 0.1s ease;
transition:all 0.1s ease;
}
.accordion-heading .accordion-toggle{
padding:0;
}
.rightbar ul li a i{
color: #8b8b8b;
float: right;
font-size: 22px;
position: absolute;
right: 15px;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.accordion-group{
border:medium none;
}
.tools-menu {
position: relative;
}
.tools-menu .submenu {
position: absolute;
width: 100px;
left: -140px;
background-color: #fff;
display: none;
}
.tools-menu:hover .submenu {
display: block;
}
.noneStyle .tools-menu .submenu {
display: block;
position: static;
}
.accordion-inner ul li{
padding:10px 0;
list-style:none;
}
.rightbar ul li:hover a,
.rightbar ul li:hover a i {
color: #23b7e5;
text-decoration: none;
}
.noneStyle a{
font-size:13px !important;
}
.noneStyle {
width: 144px;
z-index: 1000;
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="mainCtrl">
<div class="navbar navbar-default topnavbar">
<ul class="nav navbar-nav">
<li>
<a href="#" ng-click="toggleStyle()">
<em class=" fa fa-navicon">
</em>
</a>
</li>
</ul>
</div>
<aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}">
<ul>
<li><a href="#/456">Dashboard<i class="fa fa-tachometer"></i></a></li>
<li><a href="#/123">write<i class="fa fa-pencil-square-o"></i></a></li>
<li><a href="#/963">list<i class="fa fa-list"></i></a></li>
<li class="tools-menu">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#rightMenu" href="#collapseFour">
Tools<i class="fa fa-file-text"></i>
</a>
<ul class="submenu">
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</li>
</ul>
</aside>
{{sasd}}
</div>