JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
  <div class="nav-center">
	<!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
	<div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-model="parent" ng-mouseover="showChild()" ng-mouseleave="hideChild()"> 
	  <div>
		<a ng-href="{{obj.pagePath}}" class="main-link multiple">{{obj.pageTitle}}</a>
		<!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->
		<!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">--> 
		<div ng-repeat = "obj in pageData.allChildList" class="farm-links" ng-show="childNav">
		  <a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>
		  <div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
			<a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
			<!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
			<ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
			  <li class="second-link">
				<a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</nav>

CSS

/**
* Hiding Search on Mobile
**/
.search {
  display: none;
}

/**
 * Bounce animation.
 */

@-webkit-keyframes bounce {
  0%   { -webkit-transform: scale(1.0); }
  50%   { -webkit-transform: scale(1.16); }
  100% {-webkit-transform: scale(1.0); }
}

@keyframes bounce {
  0%   { transform: scale(1.0); }
  50%   { transform: scale(1.16); }
  100% { transform: scale(1.0); }
}


.global-header *,
.global-header *:after,
.global-header *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * Common header styles.
 */

.burger,
.global-header,
.search,
.profile,
.logo {
 	height: 70px;
}

.burger,
.search,
.profile {
	padding: 0;
	border: 0;
	outline: 0;
	cursor: pointer;
}
.profile {
    min-width: 300px; 
	margin-right: 5px;
    position: relative;
    display: inline-block;
    line-height: 70px;
    font-size: 17px;
    float: left;
    flex: 1;
}
.userProfile{
	/*padding-left: 7px;*/
    height: 70px;
}
.boldText,.userProfile:hover{
	font-weight: 600;
}
.userName{
	float: left;
}
.underlineText,.userName:hover{
	text-decoration: underline !important ;
}
.global-header .greeting{
    float: left;
	margin-right: 5px;
}
.rotatetriangle{
    float: right;
}
.profile-links{
    margin-bottom: 0px; 
}
.burger,
.search {
	min-width: 70px;
}

/**
 * Header uses flexbox in order to  change the order
 * of search, profile and the main navigation.
 *
 * This allows use to expand and show/hide parts of the header with CSS
 * only.
 */

.global-header {
	position: fixed;
	z-index: 9999;
	width: 100%;
	background: white;

    display: -webkit-box;  /* iOS 6-, Safari 3.1-6, BB7 */
    display: -moz-box;
    display: -ms-flexbox;  /* IE 10 */
    display: -webkit-flex; /* Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* Spec - Firefox, Chrome, Opera */
    -webkit-align-items: center;
    align-items: center;

    -webkit-font-smoothing: antialiased;

    border-bottom: 1px solid #F2F2F2;
}

.logo {
	background:...

JavaScript

var app = angular.module("topNavApp", []);
app.controller('navCtrl', ['$scope', function($scope){
	$scope.pageData = navJSON;
	console.log($scope.pageData.allChildList); //array
	
	$scope.showChild = function(){
		//console.log('hello');
		this.childNav = true;
	};
	$scope.hideChild = function(){
		this.childNav = false;
	};
	

}]);