Vertical bootstrap menu and angular

Question

I am trying to create a vertical menu such as a website . the thing i'm looking for is: when the menu collapses the submenus, they are opened by hovering, and when the menu is open, the submenus open under the links.

Here is my JSFiddle that I did: I can open the menu after clicking the button. the submenu works (the last one) , but I don’t want to open the submenu when the menu crashes.

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 is open with freezes

what I want!! thanks in advance

Answer 1

. http://jsfiddle.net/zqdmny41/4/

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

div li , , . , div li.

Answer 2

CSS, , "noneStyle" , position: absolute; left: --px; , "noneStyle" position: static, .

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

Hide result