角度Jsフライアウトメニュー

Question

これは角度jの私の最初のプロジェクトで、私はフライアウトメニューにツリーを表示しようとしています。このドロップダウンメニューの例はhttp://angular-ui-tree.github.io/website/tree.htmlで、フライアウトメニューに変更したいと思います。

この例では、子ノードは親ノードの下に表示されています。しかし、私は子供のノードを親の右側に表示したい。

私が逃した例がありますか？ メニューの内容が動的に読み込まれることを知っていることは、どのようなことをするのに最適なのでしょうか？

Answer 1

ここでは、Angularを使用した簡単なフライアウトメニューを示します。この例ではコンテンツは動的ではありませんが、データモデルを調整してメニューのコンテンツを動的に読み込むことができます。

http://codepen.io/jonnycincocinco/pen/dpovAB

.tree { 
    position: relative; 
    display: block; 
    width: 150px; } 
    .tree .currentItem { 
    position: relative; 
    display: inline-block; 
    box-sizing: border-box; 
    width: 150px; 
    padding-left: 10px; 
    cursor: pointer; 
    min-height: 30px; 
    line-height: 30px; 
    border: 1px solid #d8d8d8; 
    border-radius: 3px; } 
    .tree .currentItem:hover { 
     background-color: #f9f9f9; } 
    .tree .currentItem > .arrow { 
     top: 13px; } 
    .tree .currentItem > ul { 
     left: -1px; 
     top: -5px; } 
    .tree li a { 
    display: block; 
    position: relative; 
    min-height: 30px; 
    line-height: 30px; 
    padding-left: 10px; 
    padding-right: 20px; 
    cursor: pointer; 
    color: #7f7f7f; 
    text-decoration: none; } 
    .tree .arrow { 
    position: absolute; 
    top: 10px; 
    right: 10px; } 
    .tree .arrow.right { 
     border-left-color: #7f7f7f; } 
    .tree li a.active { 
    background: #4285f4; 
    color: white; } 
    .tree li a.active > .arrow.right { 
     border-left-color: white; } 
    .tree ul { 
    box-sizing: border-box; 
    width: 150px; 
    padding: 10px 0; 
    top: -11px; 
    left: 100%; 
    display: none; 
    position: absolute; 
    background: white; 
    border-radius: 3px; 
    border: 1px solid #d8d8d8; 
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); } 
    .tree .active > ul { 
    display: block; }