Angular Tab Menu

Developer
Jakob-e
Size
5,052 Kb
Views
46,552
  1. Angular Tab Menu Previews
  2. Angular Tab Menu HTML Codes
  3. Angular Tab Menu CSS Codes
  4. Angular Tab Menu JS Codes

How do I make an angular tab menu?

What is a angular tab menu? How do you make a angular tab menu? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Angular Tab Menu Previews
IQ Test

Angular Tab Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Tab Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-ng-app="App" data-ng-controller="AppCtrl"> <ul data-tab-menu data-ng-model="ui.tabview"> <li><a href="tab1.html">Tab 1</a></li> <li><a href="tab2.html">Tab 2</a></li> <li><a href="tab3.html">Tab 3</a></li> </ul> <section data-ng-include="ui.tabview"> <!-- Tab Content Goes Here Note! this section only renders if a tab is selected --> </section> <script type="text/ng-template" id="tab1.html"> <h2>Angular Tab Menu</h2> <p>- a simple directive</p> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png" /> <p class="note">Stop! - I'm not that responsive ;-)</p> </script> <script type="text/ng-template" id="tab2.html"><h2>Tab 2 Content</h2></script> <script type="text/ng-template" id="tab3.html"><h2>Tab 3 Content</h2></script> </div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular Tab Menu - Script Codes CSS Codes

*, *:before, *:after { margin: 0; padding: 0; list-style: none; outline: 0; text-decoration: none; : -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: arial; color: #404040;
}
body { padding: 50px;
}
html { height: 100%; background: #b5bdc8; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iIzgyOGM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b5bdc8), color-stop(36%, #828c95), color-stop(100%, #28343b)); background: -webkit-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background: -o-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background: -ms-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );
}
[data-tab-menu] a { -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px;
}
[data-tab-menu] { position: relative; z-index: 1;
}
[data-tab-menu] li { float: left;
}
[data-tab-menu] a { display: block; padding: 10px 30px; border: 1px solid #ccc; background: #f1f1f1; margin-right: -1px;
}
[data-tab-menu] a.active { border-bottom: 1px solid #fff; background: #fff;
}
section { position: relative; float: left; clear: left; display: block; margin-top: -1px; width: 100%; min-height: 250px; border: 1px solid #ccc; background: #fff; padding: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.2);
}
h2 { float: left; margin-right: -100%;
}
p { float: left; clear: left; margin-right: -100%;
}
img { float: right; width: 200px; height: auto;
}
.note { display: none;
}
@media (max-width: 570px) { img { clear: left; width: 100%; margin-top: 30px; }
}
@media (max-width: 410px) { .note { display: block; float: left; width: 100%; clear: left; margin: 20px 0; font-size: 12px; text-align: center; }
}

Angular Tab Menu - Script Codes JS Codes

console.clear();
// Includes:
// //ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js
var app = angular.module('App',[]) .directive('tabMenu',[function(){ return { restrict:'A', require: 'ngModel', scope: { modelValue: '=ngModel' }, // modelValue for $watch link:function(scope, element, attr, ngModel){ // Links collection var links=element.find('a'); // Add click listeners links.on('click',function(e){ e.preventDefault(); ngModel.$setViewValue( angular.element(this).attr('href') ); scope.$apply(); }) // State handling (set active) on model change scope.$watch('modelValue',function(){ for(var i=0,l=links.length;i<l;++i){ var link = angular.element(links[i]); link.attr('href') === scope.modelValue ? link.addClass('active') : link.removeClass('active') } }) } } }]) .controller('AppCtrl',['$scope',function($scope){ $scope.ui = {}; $scope.ui.tabview = 'tab1.html'; }])
Angular Tab Menu - Script Codes
Angular Tab Menu - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4
Size 5,052 Kb
Views 46,552
Do you need developer help for Angular Tab Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
SVG Encoding
Video wallpaper and css filters
Responsive break out of parent element
Navigation highlighting using waypoints.js
SVG Path Circle
SCSS Unit Conversion
Placeholder Services
Baseline, Scale and Element Queries
Very Simple ViewPort Bookmarklet
Snap to base-line
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!