I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to get the current page to highlight. While I've seen suggestions about adding 'current link' formatting in a separate file, I must include all the code in this snippet. This task requires the use of HTML, CSS, and Angular, and I am new to learning Angular.
Given these constraints, is it possible to achieve what I am trying to do? If so, how can I make it work?
body {
font-family: Source Sans Pro;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
#navbar li a.current {
background-color: #FFF;
}
li {
display: inline;
}
#bl {
background-color: #5a5a5a;
color: yellow;
}
#or {
background-color: #5a5a5a;
color: yellow;
}
#gr {
background-color: #5a5a5a;
color: yellow;
}
#bl:hover, #or:hover, #gr:hover {
background-color: #ff6900;
}
.left {
float: left;
}
<body ng-app="watch">
<div ng-controller="control">
<ul>
<li><a href="#" ng-click = "person()" id="bl">Person</a></li>
<li><a href="#" ng-click = "product()" id="or">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr">Place</a></li>
</ul>
</div>
</body>'use strict';
var mymodule = angular.module("watch", []);
mymodule.controller("control",function($scope) {
$scope.jsonerator = true;
$scope.jsonerator2 = false;
$scope.jsonerator3 = false;
$scope.person = function() {
$scope.jsonerator = true;
$scope.jsonerator2 = false;
$scope.jsonerator3 = false;
}
$scope.product = function() {
$scope.jsonerator = false;
$scope.jsonerator2 = true;
$scope.jsonerator3 = false;
}
$scope.place = function() {
$scope.jsonerator = false;
$scope.jsonerator2 = false;
$scope.jsonerator3 = true;
}
};
and this is my menu on jsfiddle:jsfiddle
Thanks