JSFiddle - React, Tailwind, and code Playground

by berber5

HTML

<div ng-app="myApp"> 
    <div ng-controller="mainCtrl">
         <navigation-bar datas ="data"> </navigation-bar>
     </div>
</div>

CSS

.navigation {
  height: 40px;
  background-color: #f8f8f8;
}
.navigation > ul > li {
  list-style: none;
  /* pour enlever les puces sur IE7 */
  float: left;
  position: relative;
  display: block;
}
.navigation > ul > li > a {
  display: inline-block;
  padding-top: 15px;
  padding-bottom: 15px;
  padding: 10px 15px;
  line-height: 20px;
  color: #777;
  text-decoration: none;
}
.navigation > ul > li > a:hover {
  background-color: #DBDBDB;
}
.navigation #subMenu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navigation #subMenu > li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.navigation #subMenu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
}
.navigation #subMenu > li > a:hover {
  background-color: #DBDBDB;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";
}

/*# sourceMappingURL=app.css.map */

JavaScript

var app = angular.module('myApp', [ ]);
/* Controller*/
app.controller('mainCtrl', ['$scope', function ($scope) {
		$scope.data = [
			{
				libelle : "Menu 01",
				route: "#/menu01",
				subMenu: [
                    {
						libelle : "Sub menu 01 a",
						route: "#/sm01a"
					}
				]
			},
			{
				libelle : "Menu 02",
				route: "#/menu02",
				subMenu: [
					{
						libelle : "Sub menu 02 a",
						route: "#/sm02a"
					},
					{
						libelle : "Sub menu 02 b",
						route: "#/sm02b"
					}
				]
			},
            {
				libelle : "Menu 03",
				route: "#/menu03",
				subMenu: []            
            }
		];
}]);
/*Directive*/
app.directive('navigationBar', ['$window', function ($window) {

        return {
            restrict: 'EA',
            template: "<div id='navigation' class='navigation'>"+
				"<ul id='navidationUl' name='navigationName'> "+
					"<li id='navLi' ng-repeat='(key, value) in datas'>"+
						"<a  ng-href='{{value.route}}' ng-click='toggle($index)'> {{value.libelle}} "+
							"<span ng-if='value.subMenu.length > 0' class='caret'></span>"+
						"</a> "+
						"<ul  id ='subMenu' ng-show ='value.showMe && value.subMenu.length > 0'>"+
							"<li ng-repeat='(key2, value2) in value.subMenu'>"+
								"<a ng-href='{{value2.route}}' ng-click ='dismissAll()'>{{value2.libelle}}</a>"+
							"</li>"+
						"</ul>"+
						
					"</li> "+
				"</ul>"+
			"</div>",
            scope: {
                datas : "=datas"
            },
			link: function (scope, elem, attrs) {
                scope.dismissAll = function (){
					for(var i = 0; i< scope.datas.length; i++) {
						scope.datas[i].showMe = false;
					}
				}
				scope.toggle = function toggle(index){
					scope.datas[index].showMe = !scope.datas[index].showMe;
					for(var i = 0; i< scope.datas.length; i++) {
						if (i !=index) {
							scope.datas[i].showMe = false;
						}
					}
				};
			}
        };
    }]);