HTML/CSS – Add a small triangle or arrow to the bottom of an active Tab in my navigation

Tags: , ,



I need help with something I’m working on: tabs to show different content. It’s simple HTML/CSS with some javascript to help with the tab selection. I have created a simple tab system and I’m able to cycle through all the tabs and show different content. And I’m able to style the active tab with a different color and I use Javascript to change the active tab whenever I click on another tab. Now for my question, I want to display a little arrow below the active tab. Which just points to the content and shows the active tab. I’ve tried a few things using the ::before and ::after pseudo classes but I can’t get the arrow to stick below the tab headings. For example, I want there to be an arrow below the ‘ACADEMICS’ or below the ‘CHALO LIFE’ heading or the ‘SPOTLIGHT’ heading. If anyone is able to help me do this, I will greatly appreciate.

HTML

<div class="indexContainer grayContainer">
    <div class="tabDiv">
       <nav class="tab">
            <ul class="tabMenu">
                <li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
                <li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
                <li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
            </ul>   
        </nav>

        <div id="Academics" class="tabContent default">
            <h3>Academics</h3>
            Talk about our academic programs
        </div>
        <div id="ChaloLife" class="tabContent">
            <h3>Chalo Life</h3>
            Talk about life at Chalo Trust School
        </div>
        <div id="Spotlight" class="tabContent">
            <h3>Spotlight</h3>
            Spotlight on special events or people
        </div>
    </div>
</div>

CSS

.indexContainer {
  width: 100%;
  margin: auto;
  min-height: 350px;
  height: auto;
        }
        .grayContainer {
            background-color: #ededed;
            color: black;
        }
        nav {  
            margin: 0px;

        }

        /*Sets the nav bar in a horizontal manner. Hides the items for the 
 list and ensures there's no scroll bar*/
        nav ul {
            display: flex; 
            flex-direction:row;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;

        }

        /*Styles each of the individual items in the nav bar list. Adds color 
  and changes their font. Adds a border at the end*/
        nav ul li {
            flex-grow: 1;
            font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida 
 Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation 
 Serif",Georgia,serif;
            font-size: 1em;
            font-weight: bolder;
            padding: 0;
        }

        /*Determines how the links inside the navbar will be displayed.Gives 
 them a background color*/
        nav ul li a {
            display: block;
            background: #800000;
            height: 30px;
            text-align:center;
            padding: 7px 10px;
            text-transform: uppercase;
            -webkit-transition:  0.45s;
            transition: 0.45s;

        }
        nav.tab {
            overflow: hidden;
            background: #e4e4e6;
            display: block;
            margin: auto;             
        }

        nav.tab a {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            display: block;
            margin: auto;
            height: 30px;
            vertical-align: middle;
            padding: 20px 16px;
            transition: 0.3s;
            border-right: #000 solid 1px;
            position: relative;
            color: #990000;

        }

        a.tablinks.lastChild{
            border: none;
        }
        a.tablinks:link {
            color: #990000;
            font-weight:bolder;
            font-size: 20px;
            text-transform: capitalize;
        }
        a.tablinks:visited {
            color: #990000;
            font-size: 20px;
            font-weight: 900;
        }

        a.tablinks:hover {
            color: black;
            background: white;

        }
        ul.tabMenu{
            border: none;
            display: flex;
            flex-direction: row;
        }

        a.tablinks.activeTab {
            background-color: #990000;
            color: white;

        }   
        .tabContent {
            display: none;
            padding: 6px 12px;
            border-top: none;
        }
        .default {
            display: block;
        }

JAVASCRIPT

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabContent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabContent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " activeTab";
    return true;
}

Answer

Try this:

function openTab(evt, tabName) {
  // Declare all variables
  var i, tabContent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabContent = document.getElementsByClassName("tabContent");
  for (i = 0; i < tabContent.length; i++) {
      tabContent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " activeTab";
  return true;
}
.indexContainer {
  width: 100%;
  margin: auto;
  min-height: 350px;
  height: auto;
}
.grayContainer {
    background-color: #ededed;
    color: black;
}
nav {  
    margin: 0px;

}

/*Sets the nav bar in a horizontal manner. Hides the items for the 
list and ensures there's no scroll bar*/
nav ul {
    display: flex; 
    flex-direction:row;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    overflow: hidden;

}

/*Styles each of the individual items in the nav bar list. Adds color 
and changes their font. Adds a border at the end*/
nav ul li {
    flex-grow: 1;
    font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida 
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation 
Serif",Georgia,serif;
    font-size: 1em;
    font-weight: bolder;
    padding: 0;
}

        /*Determines how the links inside the navbar will be displayed.Gives 
 them a background color*/
nav ul li a {
    display: block;
    background: #800000;
    height: 30px;
    text-align:center;
    padding: 7px 10px;
    text-transform: uppercase;
    -webkit-transition:  0.45s;
    transition: 0.45s;
    
    /* ADD THIS */
    position: relative;
}

/* ADD THIS */
nav ul li a.activeTab::before {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top: 0;
  border-bottom-color: black;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
/* END ADD */
nav.tab {
    overflow: hidden;
    background: #e4e4e6;
    display: block;
    margin: auto;             
}

nav.tab a {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
    margin: auto;
    height: 30px;
    vertical-align: middle;
    padding: 20px 16px;
    transition: 0.3s;
    border-right: #000 solid 1px;
    position: relative;
    color: #990000;

}

a.tablinks.lastChild{
    border: none;
}
a.tablinks:link {
    color: #990000;
    font-weight:bolder;
    font-size: 20px;
    text-transform: capitalize;
}
a.tablinks:visited {
    color: #990000;
    font-size: 20px;
    font-weight: 900;
}

a.tablinks:hover {
    color: black;
    background: white;

}
ul.tabMenu{
    border: none;
    display: flex;
    flex-direction: row;
}

a.tablinks.activeTab {
    background-color: #990000;
    color: white;

}   
.tabContent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
.default {
    display: block;
}
<div class="indexContainer grayContainer">
    <div class="tabDiv">
       <nav class="tab">
            <ul class="tabMenu">
                <li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
                <li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
                <li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
            </ul>   
        </nav>

        <div id="Academics" class="tabContent default">
            <h3>Academics</h3>
            Talk about our academic programs
        </div>
        <div id="ChaloLife" class="tabContent">
            <h3>Chalo Life</h3>
            Talk about life at Chalo Trust School
        </div>
        <div id="Spotlight" class="tabContent">
            <h3>Spotlight</h3>
            Spotlight on special events or people
        </div>
    </div>
</div>


Source: stackoverflow