"tab"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/justd/pen/dPeKEG" /> <meta name="viewport" content="width=device-width"> <style class="cp-pen-styles">.tab-container { background: #8dc8fb; margin: 0; padding: 0; max-height: 40px; } .tab-container ul.nav-tabs { margin: 0; list-style-type: none; line-height: 40px; max-height: 40px; overflow: hidden; display: inline-block; display: -webkit-flex; display: flex; padding-right: 20px; border-bottom: 5px solid #f7f7f7; } .tab-container ul.nav-tabs > li { margin: 5px -14px 0; -moz-border-radius-topleft: 28px 145px; -webkit-border-top-left-radius: 28px 145px; border-top-left-radius: 28px 145px; -moz-border-radius-topright: 28px 145px; -webkit-border-top-right-radius: 28px 145px; border-top-right-radius: 28px 145px; padding: 0 30px 0 25px; height: 170px; background: #c3d5e6; position: relative; -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); width: 200px; max-width: 200px; min-width: 20px; border: 1px solid #aaa; } .tab-container ul.nav-tabs > li:first-child { margin-left: 0; } .tab-container ul.nav-tabs > li:last-of-type { margin-right: 0; } .tab-container ul.nav-tabs > li > a { display: block; max-width: 100%; text-decoration: none; color: #222; padding: 3px 7px; } .tab-container ul.nav-tabs > li > a span { overflow: hidden; white-space: nowrap; display: block; } .tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover { background-color: transparent; border-color: transparent; } .tab-container ul.nav-tabs > li > a .glyphicon-remove { color: #777; display: inline-block; padding: 3px; font-size: 10px; position: absolute; z-index: 10; top: 7px; right: -10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .tab-container ul.nav-tabs > li > a .glyphicon-remove:hover { background: #d39ea3; color: white; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .tab-container ul.nav-tabs > li.active { z-index: 2; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7)); background-image: -moz-linear-gradient(#ffffff, #f7f7f7 30px); background-image: -webkit-linear-gradient(#ffffff, #f7f7f7 30px); background-image: linear-gradient(#ffffff, #f7f7f7 30px); } .tab-container ul.nav-tabs > li.active > a { background-color: transparent; border-color: transparent; border-bottom-color: transparent; } .tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover { background-color: transparent; border-color: transparent; border-bottom-color: transparent; } .tab-container ul.nav-tabs .btn { float: left; height: 20px; width: 35px; min-width: 35px; max-width: 35px; margin: 10px 0 0 0; border-color: #71a0c9; outline: none; -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .tab-container ul.nav-tabs .btn.btn-default { background: #c3d5e6; } .tab-container ul.nav-tabs .btn.btn-default:hover { background: #d2deeb; } .tab-container ul.nav-tabs .btn.btn-default:active { background: #9cb5cc; } .tab-container .tab-pane { padding: 60px 40px; text-align: center; } .tab-container .tab-pane.active { border-top: 1px solid #ddd; } </style></head><body> <html lang="en" ng-app="chromeTabsApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chrome tabs with Bootstrap and AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <tabset class="tab-container"> <tab ng-repeat="tab in tabs" active="tab.active" tab-highlight> <tab-heading> <span>{{tab.title}}</span> <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i> </tab-heading> <h1>{{tab.content}}</h1> </tab> <button class="btn btn-default" ng-click="addTab()"></button> </tabset> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var app = angular.module('chromeTabsApp', ['ui.bootstrap']); app .controller('AppCtrl', ['$scope', function ($scope) { var counter = 1; $scope.tabs = []; var addTab = function () { $scope.tabs.push({ title: 'Tab ' + counter, content: 'Tab ' + counter }); counter++; $scope.tabs[$scope.tabs.length - 1].active = true; }; var removeTab = function (event, index) { event.preventDefault(); event.stopPropagation(); $scope.tabs.splice(index, 1); }; $scope.addTab = addTab; $scope.removeTab = removeTab; for (var i = 0; i < 5; i++) {if (window.CP.shouldStopExecution(1)){break;} addTab(); } window.CP.exitedLoop(1); }]) .directive('tabHighlight', [function(){ return { restrict: 'A', link: function(scope, element) { var x, y, initial_background = '#c3d5e6'; element .removeAttr('style') .mousemove(function (e) { // Add highlight effect on inactive tabs if(!element.hasClass('active')) { x = e.pageX - this.offsetLeft; y = e.pageY - this.offsetTop; element .css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }) .css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }) .css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }); } }) .mouseout(function () { element.removeAttr('style'); }); } }; }]); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: