---
tags: template
---
# Créer un menu avec des onglets ("tabs") dans CodiMD
<div id="menu">
<a href="#cat1">Catégorie 1 </a>
<a href="#cat2">Catégorie 2</a>
<a href="#cat3">Catégorie 3</a>
<a href="#cat4">Catégorie 4</a>
</div>
<div id="cat1">
Catégorie 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non diam ut quam vehicula efficitur sit amet vitae nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed at rutrum dui. Vivamus vestibulum lacinia ligula, a faucibus erat. Nunc eleifend sapien nec diam tristique cursus. Integer vitae condimentum velit, eget pharetra tortor. Vivamus molestie, eros non euismod ornare, mi eros gravida enim, sit amet malesuada diam risus sed ipsum. Nulla cursus elit euismod dui fringilla placerat. Ut ac ornare tellus, imperdiet porta ligula. Donec elementum elit sed risus efficitur, pellentesque maximus urna laoreet. Curabitur in gravida nulla. Donec sit amet porta urna, sed porta nulla. Cras accumsan mi a tellus posuere, aliquam dapibus tortor porttitor. Nunc in posuere diam. Quisque tincidunt commodo mauris, a ornare diam molestie a. Donec at mauris et augue eleifend accumsan vitae non sem.
</div>
<div id="cat2">
Catégorie 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non diam ut quam vehicula efficitur sit amet vitae nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed at rutrum dui. Vivamus vestibulum lacinia ligula, a faucibus erat. Nunc eleifend sapien nec diam tristique cursus. Integer vitae condimentum velit, eget pharetra tortor. Vivamus molestie, eros non euismod ornare, mi eros gravida enim, sit amet malesuada diam risus sed ipsum. Nulla cursus elit euismod dui fringilla placerat. Ut ac ornare tellus, imperdiet porta ligula. Donec elementum elit sed risus efficitur, pellentesque maximus urna laoreet. Curabitur in gravida nulla. Donec sit amet porta urna, sed porta nulla. Cras accumsan mi a tellus posuere, aliquam dapibus tortor porttitor. Nunc in posuere diam. Quisque tincidunt commodo mauris, a ornare diam molestie a. Donec at mauris et augue eleifend accumsan vitae non sem.
</div>
<div id="cat3">
Catégorie 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non diam ut quam vehicula efficitur sit amet vitae nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed at rutrum dui. Vivamus vestibulum lacinia ligula, a faucibus erat. Nunc eleifend sapien nec diam tristique cursus. Integer vitae condimentum velit, eget pharetra tortor. Vivamus molestie, eros non euismod ornare, mi eros gravida enim, sit amet malesuada diam risus sed ipsum. Nulla cursus elit euismod dui fringilla placerat. Ut ac ornare tellus, imperdiet porta ligula. Donec elementum elit sed risus efficitur, pellentesque maximus urna laoreet. Curabitur in gravida nulla. Donec sit amet porta urna, sed porta nulla. Cras accumsan mi a tellus posuere, aliquam dapibus tortor porttitor. Nunc in posuere diam. Quisque tincidunt commodo mauris, a ornare diam molestie a. Donec at mauris et augue eleifend accumsan vitae non sem.
</div>
<div id="cat4">
Catégorie 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non diam ut quam vehicula efficitur sit amet vitae nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed at rutrum dui. Vivamus vestibulum lacinia ligula, a faucibus erat. Nunc eleifend sapien nec diam tristique cursus. Integer vitae condimentum velit, eget pharetra tortor. Vivamus molestie, eros non euismod ornare, mi eros gravida enim, sit amet malesuada diam risus sed ipsum. Nulla cursus elit euismod dui fringilla placerat. Ut ac ornare tellus, imperdiet porta ligula. Donec elementum elit sed risus efficitur, pellentesque maximus urna laoreet. Curabitur in gravida nulla. Donec sit amet porta urna, sed porta nulla. Cras accumsan mi a tellus posuere, aliquam dapibus tortor porttitor. Nunc in posuere diam. Quisque tincidunt commodo mauris, a ornare diam molestie a. Donec at mauris et augue eleifend accumsan vitae non sem.
</div>
<style>
#cat1,
#cat2,
#cat3,
#cat4 {
display: none;
border: 1px darkblue solid;
padding: 2em;
}
#cat1:target,
#cat2:target,
#cat3:target,
#cat4:target {
display: block;
transition: all 0.35s;
}
#menu a {
display: block;
font-size: 1.6em;
margin-left: 1em;
color: white;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-bottom: 1px darkblue solid
}
#menu a:hover {
text-decoration: none;
border-bottom: 1px white solid;
color: #DDD
}
#menu {
display: flex;
background-color: darkblue;
flex-wrap: wrap;
padding: 1em;
}
</style>