Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

November 24, 2014

Creating Pretty Tabs with HTML and CSS

Filed under: AngularJS @ 4:31 pm
Tags: , ,

If you are building data entry forms with HTML (using AngularJS or ASP.NET or other technologies), you may find that you need more space than can fit onto one page. In that case, you may want to implement tabs.

In my AngularJS course entitled “AngularJS Line of Business Applications“, I demonstrate how to build data entry forms using tabs. The result looked like this:

image

I also showed a version with styled tabs like this:

image

This blog post details how to change the rectangular tabs from the first image to the more stylized tabs in the second image.

To keep the example simple, we’ll work with just the tabs:

image

The code for the page shown above with the rectangular tabs is as follows:

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>Acme Product Management</title>

    <!– Style sheets –>
    <link href=”css/bootstrap.css” rel=”stylesheet”/>
    <link href=”css/app.css” rel=”stylesheet”/>
</head>

<body>
  <div class=”panel panel-primary”>
    <div class=”panel-heading” style=”font-size:large”>
        Acme Product Management
    </div>

    <div class=”panel-body”>
        <div class=”wizard”>
            <a>
                Basic Information
            </a>
            <a>
                Price Details
            </a>
            <a>
                Search Tags
            </a>
        </div>
   </div>

  </div>
</body>

</html>

Notice that the tabs are defined with anchor (<a>) tags. Notice also that this HTML links to two css files:

body {
    background-color: #C6D9F1;
}

.wizard a {
    background: #efefef;
    display: inline-block;
    margin-right: 5px;
    min-width: 150px;
    outline: none;
    padding: 10px 40px 10px;
    position: relative;
    text-decoration: none;
}
.wizard .active {
    background: #007ACC;
    color: #fff;
}

We’ll need to add some additional styles to the app.css file in order to implement the arrow-style tabs as shown below:

image

First, we’ll add a before selector for the anchor tag:

.wizard a:before {
        width: 0;
        height: 0;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #fff;
        position: absolute;
        content: “”;
        top: 0;
        left: 0;
    }

This creates the “cut out” on the left side of the tabs.

Then we’ll add the triangle shaped arrow on the right side of the tabs using an after selector for the anchor tag:

.wizard a:after {
        width: 0;
        height: 0;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 21px solid #efefef;
        position: absolute;
        content: “”;
        top: 0;
        right: -20px;
        z-index: 2;
    }

Lastly, we want to ignore the “cut out” border on the left side of the first tab and the arrow on the right side of the last tab. This gives us a clean look for the far left and far right of the tab bar:

.wizard a:first-child:before,
.wizard a:last-child:after {
        border: none;
    }

And if you want to round the corners at the far left and far right of the tab bar, you can round them with this:

.wizard a:first-child {
        -webkit-border-radius: 8px 0 0 0px;
        -moz-border-radius: 8px 0 0 0px;
        border-radius: 8px 0 0 0px;
    }

.wizard a:last-child {
        -webkit-border-radius: 0 8px 0px 0;
        -moz-border-radius: 0 8px 0px 0;
        border-radius: 0 8px 0px 0;
    }

Try building this simple page and then adding each css class and running the application to see its effect on the tabs before adding the next css class.

Enjoy!

4 Comments

  1.   Juanjo — December 5, 2014 @ 1:00 am    Reply

    Hi Deborah,

    Thanks a lot for your wonderful help.

    For the “active” triangle shaped arrow on the right side tab, I added the next rule:

    .wizard a.active.after{
    border-left: 21px solid #007ACC;
    }

    Otherwise it would be in the default gray color.

    Juanjo

  2.   deborahk — December 5, 2014 @ 9:03 am    Reply

    Thanks for catching that, Juanjo!

  3.   Bernhard — August 25, 2015 @ 5:47 am    Reply

    Hi Deborah,

    Thanks for the example. A really nice look’n’feel.

    Best Regards

    Bernhard

  4.   Shamna — May 23, 2016 @ 1:27 am    Reply

    Hi Deborah,

    Thanks for the example. Inorder to get the “active” triangle shaped arrow the mentioned blue color, I edited the above code

    .wizard a.active.after{
    border-left: 21px solid #007ACC;
    }
    as
    .wizard a.active:after{
    border-left: 21px solid #007ACC;
    }
    Note:- . is replaced with :

Trackbacks/Pingbacks

  1. Dew Drop – November 25, 2014 (#1903) | Morning Dew

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2021 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs