Menu à onglets

In this example below you will see how to do a Menu à onglets with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Captain-Pen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Captain-Pen ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Menu à onglets</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />


</head>

<div class="systeme_onglets">
  <div class="onglets">
    <span id="onglet1" onclick="chargement('contenu1')">menu 1</span>
    <span id="onglet2" onclick="chargement('contenu2')">menu 2</span>
    <span id="onglet3" onclick="chargement('contenu3')">menu 3</span>
  </div>

  <div class="contenu_onglets">
      <div id="contenu1">
        Contenu 1
      </div>

      <div id="contenu2">
        Contenu 2
      </div>

      <div id="contenu3">
        Contenu 3
      </div>
   </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Captain-Pen/menu-andxe0-onglets-ByJJNK */
.onglets{
  display:inline-block;
  margin top:5px;
  margin-left:4px;
  margin-right:4px;
  padding:4px;
  cursor: pointer;
}

#onglet1{
  background-color: pink;
  margin-bottom:20px;
  padding:20px;
}

#onglet2{
  background-color: pink;
  margin-bottom:20px;
  padding:20px;
}
  
#onglet3{
background-color: pink;
margin-bottom:20px;
padding:20px;
}
    
.contenu_onglets{
  background-color:pink;
  padding-bottom:10px;
  padding-right:5px;
  padding-left:10px;
  margin-left:8px;
  margin-top:20px;
  width:255px;
}

.active{
  //background-color:pink;
  //border:3px solid white;
  color:blue;
}

.desactive{
  background-color:#F6E497;
  border:3px solid white;
  
}
#contenu2, #contenu3{
  display:none;
}
.contenu_onglets{
  padding:10;
}




/*Downloaded from https://www.codeseek.co/Captain-Pen/menu-andxe0-onglets-ByJJNK */
function chargement(id){
  for(var i=1;i<=3;i++){
    		document.getElementById("contenu"+i).style.display='none';
  }
  		document.getElementById(id).style.display='block';
  		document.getElementById(id).className='active';
}

Comments