CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3pure-css
Lakhan Khandelwal
Lakhan Khandelwal

Reputation: 63

Tab navigation bar with arrow below the activated menu

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin: 0 2px 0 0;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
        left: 42%;
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left: 81px;
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
        left: 45%;
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

image for the tab navigation

I want to design an tab navigation.which should have dot bullet below it. When I click on any tab menu an arrow should display below the activated menu. The above image describe my concept. There are two tabs available and it should display in center like col-md-6 & col-md-6 format.

Upvotes: 0

Views: 2202

Answers (1)

Mihai T
Mihai T

Reputation: 17697

use also col-xs-6, col-sm-6 and col-md-6 if you want the li's to stay split 50/50 on smaller devices also. OR you could give them width:50% ( without using bootstrap classes col-* )

Also remove the margins because otherwise the li's won't fit side by side ( having width:50% )

And to center the spans ( circle and arrow ) do not use left:42% use instead left:50%;transform:translateX(-50%) where left:50% is depending on the parent (li) width, and translateX(-50%) moves the span to the left with half of it's width and thus centering in perfectly inside the li

see snippet below or JsFiddle

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin:0;
				text-align:center;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
       left:50%;
			 transform:translateX(-50%);
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left:50%;
			 transform:translateX(-50%);
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
         left:50%;
			 transform:translateX(-50%);
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation" class="col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

Upvotes: 0

Related Questions