垂直菜单引导程序和角度

Question

我正在尝试创建像 site 这样的垂直菜单。我正在寻找的是：当菜单折叠时，子菜单通过悬停打开，当菜单打开时，子菜单在链接下方打开。

这是我的JSFiddle，我所做的是：单击按钮后我可以打开菜单。
子菜单正在工作（最后一个）但是我不想在菜单折叠时打开子菜单。

角度

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


});  

更新

带有子菜单的菜单：

通过悬停打开子菜单

这就是我想要的！ 提前谢谢

Answer 1

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

从你的子菜单列表中删除折叠类，并在菜单上使用 ng-mouseenter，在 side 标签上使用 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>

还有你的 div 和 li 标签到处都是，请正确地构造它们。例如，div 不能出现在两个 li 标签之间。

Answer 2

只需使用CSS，在切换“noneStyle”时为您的子菜单应用不同的样式，在正常样式下，您的子菜单应使用position: absolute; left: --px;进行定位，而在“noneStyle”下，应为position: static强制显示带有初始样式。

顺便说一句，请不要在<ul>下面放置<div>标签，这不是写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>