menu with inclined tab

Asked

Viewed 78 times

2

hi, I am developing an html page and I am using bootstrap, I would like to make a menu with tabs and that was slightly cyclized to the right... more or less like this idea of the file...

follows my html code:

<ul class="nav nav-tabs" id="#" role="tablist">



    <li class="nav-item active">
        <a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <i class=" fa fa-list-alt"></i> Tarefa</a>
  </li>
   <li class="nav-item">
      <a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><i class="fa fa-lightbulb-o"></i> Sugestão</a>
   </li>
     <li class="nav-item">
           <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><i class=" fa fa-search"></i> FAQ</a>
      </li>
</ul>

follows my css code:

[![.nav-tabs {
border-bottom: 2px solid var(--cor-primaria-2);
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
/* margin-top: 0px; */
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid;
border-bottom: 0px;
border-radius: 4px 4px 0 0;
color: #666666;
background: rgba(204, 204, 204, 0.1803921568627451);
}
.nav-tabs > li > a:hover {
border-color: #FFFFFF;
 }
menu responsive

2 answers

2

If I understand this is what you want, you can use the property transform: skewX() to tilt the tabs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <style>
  


      .nav-tabs {
      border-bottom: 2px solid black;
      }
      .nav-tabs > li {
      float: left;
      margin-bottom: -1px;
      /* margin-top: 0px; */
      }
      .nav-tabs > li > a {
      margin-right: 2px;
      line-height: 1.42857143;
      border: 1px solid;
      border-bottom: 0px;
      border-radius: 4px 4px 0 0;
      color: #666666;
      background: rgba(204, 204, 204, 0.803921568627451);
      transform: skewX(-15deg) ;
      }
      .nav-tabs > li > a > *{
        transform: skewX(15deg);
        display: inline-block;
      }
      .nav-tabs > li > a:hover {
      border-color: #FFFFFF;
      }
  
  </style>
  </head>
  <body>
  
      <ul class="nav nav-tabs" id="#" role="tablist">
  
  
  
          <li class="nav-item active">
              <a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</span></a>
        </li>
         <li class="nav-item">
            <a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span><i class="fa fa-lightbulb-o"></i> Sugestão</span></a>
         </li>
           <li class="nav-item">
                 <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</span></a>
            </li>
      </ul> 
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

0


I managed to make it look exactly the way I designed it.... follows code 

<ul class="nav nav-tabs" id="#" role="tablist">

          <li class="active">
              <a  id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</a>
              </li></span>
            <li>
                <a id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span> <i class="fa fa-lightbulb-o"></i> Sugestão</a></span>
              </li>
          <li>
              <a id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</a> </span>
            </li>  

          <li>
              <a id="contato-tab" data-toggle="tab" href="#contato" role="tab" aria-controls="contato" aria-selected="false"> <span> <i class=" fa fa-address-card"></i> Contato</a></span>
            </li>


        </ul>

and css:

  .nav-tabs {
  border-bottom: 2px solid var(--cor-primaria-2);
  }
  .nav-tabs > li {
  float: left;
  margin-right: 8px;
  /*margin-bottom: -1px;
   margin-top: 0px; */
  }
  .nav-tabs > li > a {
    position: relative;
    padding: 15px;
    color: #666666;
    z-index: 1;
    line-height: 1.42857143;
  /*margin-right: 2px;

  border: 1px solid;
  border-bottom: 0px;
  border-radius: 4px 4px 0 0;
  transform: skewX(-15deg) ;*/


  }
  /*.nav-tabs > li > a > *{
    transform: skewX(-15deg);
    display: inline-block;
  }*/
  .nav-tabs > li > a:hover {
    background: transparent;
    border: 1px solid transparent;
  border-color: #FFFFFF;
  }
  .nav-tabs li a:before{

    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 1px;
    left: 1px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    /* border: 1px solid; */
    border-radius: 0px 1px 0 0px;
    transform-origin: left center 0;
    transform: perspective(9px) rotateX(2deg);
    z-index: -25;
    background: rgba(204, 204, 204, 0.803921568627451);
  }
  .nav-tabs li.active a:before{
    background: var(--cor-primaria);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #fff;
  border: 1px solid transparent;
  background:transparent;
  cursor: default;
  font-weight: 700;
  z-index: 2;
}

Browser other questions tagged menu responsive

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