Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

how to define css to get the simple tabbed menu

how to define css to get the simple tabbed menu

Problem

can I have css for the above Tabbed Menu, I have tried many but failed to get exact design. below is my directive, html and css code my html:

  • Tab 1
  • Tab 2
  • Tab 3

Content for Tab 1

Content for Tab 2

Content for Tab 3

my directive

app.directive('basictabs', function() {
    return {

      restrict: 'AE',
      replace: true,
     templateUrl :'app/partials/basictabs.html',
         link: function(scope, elm, attrs) {
             var jqueryElm = $(elm[0]);
             $(jqueryElm).tabs();
         }

  };
});

my css

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
Problem courtesy of: user3824049

Solution

You can do it by using Angular-Bootstrap easily, without going for using Jquery plugin.

Working Demo

basictabs.html

Content for Tab 1

Content for Tab 2

Content for Tab 3

But if you are very specific and want to achieve that by using JQuery UI Try this out

Working Demo



 
  AngularJS Plunker
Solution courtesy of: Nidhish Krishnan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

how to define css to get the simple tabbed menu

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×