垂直菜单引导和角 [英] Vertical menu bootstrap and angular

问题描述

我想创建这样网站。我在找的东西是：当菜单崩溃的子菜单与悬停开放，当菜单下面的链接，开开，子菜单

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 .

下面是我的 的jsfiddle ，我所做的就是：我可以打开菜单单击该按钮后结果
子菜单是工作（最后一个）的但我不想当菜单被折叠打开子菜单。

Here is my JSFiddle , what i've done is : i can open the menu after click the button .
sub menu is working (last one) but i don't want to open submenu when menu is collapsed .

角

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

菜单，子菜单：

的子菜单悬停打开结果

submenu open with hover

这就是我想要的！
THX提前

that's what i want !! thx in advance

推荐答案

试试这个。 http://jsfiddle.net/zqdmny41/4/

从菜单和NG-鼠标离开在一旁标签上的子菜单列表，并使用NG-的mouseenter删除崩溃类。

Remove the collapse class from your sub menu list and use ng-mouseenter on the menu and ng-mouseleave on the aside tag.

<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>

此外，您的股利和李标签所有的地方，请正确构建它们。例如，DIV不能进来二里标记之间。

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.

这篇关于垂直菜单引导和角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！