Placing (Arrows) an arrow at the base of my active button

Asked

Viewed 1,352 times

1

I have a tab menu that I need to place an ARROW at the base of the button when it is active. Follow the image as it is:

inserir a descrição da imagem aqui

It has to stay that way:

inserir a descrição da imagem aqui

Follow the code of this "menu":

<div class="cq-tabs " style="width: 100%;" data-tabsstyle="style1" data-titlebg="#cf111d" data-titlecolor="#ffffff" data-titlehoverbg="#fbce07" data-titlehovercolor="#000000" data-rotatetabs="0">
<ul class="cq-tabmenu style1 active" style="background-color: #cf111d; border-bottom-color: #fbce07;">
    <li class="current" style="background-color: #cf111d;"><a style="color: #000000; background: #fbce07;" href="#"><i class="icon-icones-site-01-01"></i><span style="font-size: 11px;">Escolha do trabalhoa ser escolhido</span></a></li>
    <li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-02-01"></i><span style="font-size: 11px;">Inscrição</span></a></li>
    <li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-03-01"></i><span style="font-size: 11px;">Avaliação</span></a></li>
    <li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-04-01"></i><span style="font-size: 11px;">Pré-seleção</span></a></li>
    <li style="background-color: #cf111d;"><a style="color: #ffffff; background: #cf111d;" href="#"><i class="icon-icones-site-05-01"></i><span style="font-size: 11px;">Avaliação Coletiva</span></a></li>
    <li style="background-color: #cf111d;"><a style="color: #ffffff;" href="#"><i class="icon-icones-site-06-01"></i><span style="font-size: 11px;">Premiação</span></a></li>
</ul>
<div class="cq-tabcontent style1" style="background: #cf111d;">
<div class="cq-tabitem" style="color: #ffffff;"><em>O professor escolhe algum projeto ou uma sequência de atividades que desenvolveu no ano letivo de 2016 e/ou 2017 para participar do Prêmio.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>O professor, então, lê o regulamento e faz a inscrição aqui no site do Prêmio, preenchendo todos os campos. O relato do projeto, preenchido de acordo com o modelo fornecido no site, deve ser anexado à inscrição.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>O avaliador de cada categoria analisa o relato com muita atenção. Se o avaliador tiver alguma dúvida sobre o projeto, poderá entrar em contato com o professor. Nesta situação, podem ser solicitados registros das atividades e das produções feitas pelos alunos</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>Os avaliadores fazem uma pré-seleção de projetos que têm o potencial de serem vencedores. Após analisar os registros e produções, caso seja necessário, o avaliador entra em contato novamente com os professores, perguntando detalhes do trabalho.</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>Os trabalhos pré-selecionados são avaliados por uma comissão e os 3 vencedores de cada categoria são escolhidos e premiados!</em></div>
<div class="cq-tabitem" style="color: #ffffff;"><em>A organização do Prêmio liga para dar a notícia aos vencedores, que são, então, convidados para a cerimônia de premiação e participarão da viagem educativa à Londres na Inglaterra.</em></div>
</div>
</div>

Follow his CSS file:

.cq-tabs {
  clear: both;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.cq-tabs .cq-tabcontent{
  margin-top: -1px
}

.cq-tabitem {
  color: #666;
  position: relative;
  display: none;
  margin: 0;
  padding: 12px 15px;
  /*padding: 30px 0;*/
}

.cq-tabitem p {
  margin: 4px 0 10px 0;
}

.cq-tabitem:first-child {
  display: block;
}

.cq-tabs li.current a {
  color: #fbce07;
  background: #00ACED;
}

.cq-tabmenu.style1 {

  /*display: table;*/

    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #eff0f2;
    border-bottom: none;
    width: 100%;
}

.cq-tabmenu.style1 i.fa{
  margin-top: 12px;
  margin-right: 0px;
  font-size: 20px;
}


.cq-tabmenu.style1 li {
    display: inline-block;
    float: left;
    list-style: none;
    line-height: 53px;
    overflow: hidden;
    margin: 1px;
    padding: 0;
    border: 1px solid #fff;
  /*position: relative;*/
}


.cq-tabmenu.style1 a {

  /*background-color: #eff0f2;*/
  font-size: 14px;
  color: #888;
  font-weight: 500;
  float: left;
  display: block;
  /*letter-spacing: 0;*/
  outline: none;
    padding-top: 15px;
    padding-right: 13px;
    padding-bottom: 15px;
    padding-left: 13px;
  text-decoration: none;
  /*-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;*/
  /*border-bottom: 2px solid #87d3b7;*/
}

I found this explanation on the web, but I couldn’t do it:

/** Seta para BAIXO **/

.seta-baixo:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #f00;
}
css wordpress css3

  • Create your own here: CSS Arrow Please.

  • Very good the site, helps a lot!! But I don’t know where to put this arrow_box class to appear only on the "button" active

  • There you have to use javascript by clicking on the desired button, add the class arrow_box, but remove the class before the previous item. As if it were a turn on and off, take one, put in another.

1 answer

1


Creating a triangle is very easy, basically we use the edge of an empty element looks at this article http://www.maujor.com/tutorial/borderplay.php

I’ll leave an example and try to implement in your project:

*{
  margin: 0;
  padding: 0;
}

.menu{
  font-size: 0px;
  list-style: none;
}

.menu-item{
  border: 1px solid #333;
  display: inline-block;  
  margin-right: 5px;
  position: relative;
}

.menu-item > a{
  color: #333;
  display: block;
  font-size: 17px;
  padding: 5px 10px;
  text-decoration: none;
}

.menu-item:target::after{
  border-color: #333 transparent transparent transparent;
  border-style: solid;
  border-width: 10px 10px 0px 10px;
  content: "";
  display: block;
  left: calc(50% - 10px);
  position: absolute;
  width: 0px;
}

.menu-item:target a{
  background-color: #333;
  color: #fff;  
}
<ul class="menu">
  <li id="menu-item-1" class="menu-item">
    <a href="#menu-item-1">link</a>
  </li>
  <li id="menu-item-2" class="menu-item">
    <a href="#menu-item-2">link</a>
  </li>
  <li id="menu-item-3" class="menu-item">
    <a href="#menu-item-3">link</a>
  </li>
  <li id="menu-item-4" class="menu-item">
    <a href="#menu-item-4">link</a>
  </li>
</ul>

Browser other questions tagged css wordpress css3

You are not signed in. Login or sign up in order to post.