JSFiddle - React, Tailwind, and code Playground

by stanney

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
  <div class="span3 bs-docs-sidebar">
    <ul id="nav-odd" class="nav nav-list bs-docs-sidenav">
      <li ng-click="back()">
        <a href="#" ng-show="menuLevel == 1">All Categories</a>
        <a href="#" ng-show="menuLevel > 1">
          <i class="icon-arrow-left right"></i>
          <span ng-bind="menuTitleOdd"></span>
        </a>
      </li>
      <li ng-repeat="item in menuDataOdd" ng-click="clickMenu($index)">
        <a href="">
          <span ng-repeat="(name, value) in item" ng-bind="name"></span>
        </a>
      </li>
    </ul>
    <ul id="nav-even" class="nav nav-list bs-docs-sidenav">
      <li ng-click="back()">
        <a href="#">
          <i class="icon-arrow-left right"></i>
          <span ng-bind="menuTitleEven"></span>
        </a>
      </li>
      <li ng-repeat="item in menuDataEven" ng-click="clickMenu($index)">
        <a href="">
          <span ng-repeat="(name, value) in item" ng-bind="name"></span>
        </a>
      </li>
    </ul>
  </div>

CSS

.bs-docs-sidebar {
    position: relative;
  }
  .nav {
    background-color: white;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-out;
  }
  .nav.fadehidden {
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0ms;
  }
  .nav.small {
    opacity: 0;
    -webkit-transform: scale(0.4);
    -webkit-transition-duration: 40ms;
  }
  .nav.big {
    opacity: 0;
    -webkit-transform: scale(1.5);
    -webkit-transition-duration: 40ms;
  }
  .nav.normal-big {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
  .nav.normal-small {
    opacity: 0;
    -webkit-transform: scale(0.4);
  }
  .right {
    dislpay: inline;
    float: right
  }

JavaScript

angular.module('myApp', [])
    .controller('myCtrl', ['$scope',
      function($scope) {
        var navOdd = document.getElementById('nav-odd'),
          navEven = document.getElementById('nav-even'),
          ngNav = {};
        ngNav.Odd = angular.element(navOdd),
        ngNav.Even = angular.element(navEven);
        ngNav.Even.addClass('fadehidden'); // 一開始先隱藏 nav Even
        navOdd.addEventListener('webkitTransitionEnd', onTransitionEnd);
        navEven.addEventListener('webkitTransitionEnd', onTransitionEnd);

        $scope.menuLevel = 1;
        $scope.parity = 'Odd';

        $scope.menuDataOdd = [{
          'Devices': {
            'icon': 'url',
            'sub': [{
              'Mobile Phones': {
                'icon': 'url',
                'sub': [{
                  'hTC': {}
                }, {
                  'Apple': {}
                }, {
                  'Samsung': {}
                }]
              }
            }, {
              'Televisions': {}
            }, {
              'Cameras': {}
            }]
          }
        }, {
          'Magazines': {}
        }, {
          'Store': {}
        }, {
          'Credits': {}
        }];

        $scope.menuData1 = [$scope.menuDataOdd[0], $scope.menuDataOdd[1], $scope.menuDataOdd[2], $scope.menuDataOdd[3]];
        $scope.clickMenu = function(index) {
          var title = Object.keys(this.item)[0];

          //替換標題＆替換 list
          if (this.item[title].sub) {
            // 退場效果
            $scope.parity = ($scope.menuLevel % 2 == 0) ? 'Even' : 'Odd';
            ngNav[$scope.parity].addClass('normal-big');

            // 資料繫結
            $scope.menuLevel++;
            $scope.parity = ($scope.menuLevel % 2 == 0) ? 'Even' : 'Odd';
            $scope['menuTitle' + $scope.parity] = title;
            $scope['menuData' + $scope.parity] = this.item[title].sub;
            $scope['menuData' + $scope.menuLevel] = this.item[title].sub;

            // 進場準備
           ...