CSS: MENÚ de PESTAÑAS RESPONSIVE SIN JS
Los siguientes son los pasos para crear un menú RESPONSIVE con pestañas, usando solo CSS (Sin usar Javascript):
1- Crear el CSS:
.tabs-container ul.tabs li{width:33.33%;font-size:75%}.tabs-container ul.tabs2 li{width:25%;font-size:70%}
.tabs-container ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;text-align:center
}
.tabs-container ul li {
margin: 5px 1px}
ul.tabs li label,ul.tabs2 li label {display:block;cursor:pointer;box-sizing:border-box;
text-decoration: none;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
transition: background-color 0.3s ease}
ul.tabs li label:hover,ul.tabs2 li label:hover {
background-color: #ddd}
.contenido_tab {
display: none;
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
margin-top: 10px}
#tab1:checked ~ .contenedor_tab #tab1-content,
#tab2:checked ~ .contenedor_tab #tab2-content,
#tab3:checked ~ .contenedor_tab #tab3-content,
#tab4:checked ~ .contenedor_tab #tab4-content,
#tab5:checked ~ .contenedor_tab #tab5-content,
#tab6:checked ~ .contenedor_tab #tab6-content,
#tab7:checked ~ .contenedor_tab #tab7-content {
display: block}
input[type="radio"] {
display: none}
@media (min-width:375px) {.tabs-container ul.tabs li,.tabs-container ul.tabs2 li{font-size:100%}}
2- Código HTML, entre <body> y </body>:
<div class="tabs-container">
<!-- Radio inputs para manejar las pestañas -->
<input type="radio" name="tabs" id="tab1" checked>
<input type="radio" name="tabs" id="tab2">
<input type="radio" name="tabs" id="tab3">
<input type="radio" name="tabs" id="tab4">
<input type="radio" name="tabs" id="tab5">
<input type="radio" name="tabs" id="tab6">
<input type="radio" name="tabs" id="tab7">
<!-- Menú de pestañas -->
<ul class="tabs">
<li><label for="tab1">Español</label></li>
<li><label for="tab2">English</label></li>
<li><label for="tab3">Português</label></li>
</ul>
<ul class="tabs2">
<li><label for="tab4">العربية</label></li>
<li><label for="tab5">हिंदी</label></li>
<li><label for="tab6">Русский</label></li>
<li><label for="tab7">Ελληνικά</label></li>
</ul>
<!-- Contenido de las pestañas -->
<div class="contenedor_tab">
<div id="tab1-content" class="contenido_tab" lang="es">
<h1>Español</h1>
<p>Texto en español - Imagen - Video</p>
</div>
<div id="tab2-content" class="contenido_tab" lang="en">
<h1>English</h1>
<p>Texto en inglés</p>
</div>
<div id="tab3-content" class="contenido_tab" lang="pt">
<h1>Português</h1>
<p>Texto en portugués</p>
</div>
<div id="tab4-content" class="contenido_tab ar" lang="ar" dir="rtl">
<h1>العربية</h1>
<p>Texto en árabe (DE DERECHA a IZQUIERDA)</p>
</div>
<div id="tab5-content" class="contenido_tab hi" lang="hi">
<h1>हिंदी</h1>
<p>Texto en hindi</p>
</div>
<div id="tab6-content" class="contenido_tab" lang="ru">
<h1>Русский</h1>
<p>Texto en ruso</p>
</div>
<div id="tab7-content" class="contenido_tab" lang="el">
<h1>Ελληνικά</h1>
<p>Texto en griego</p>
</div>
</div>
</div>
Agregar la hoja de estilo entre <head> y </head>.
<link rel="stylesheet" href="REEMPLZAR-hoja-de-estilos.css">
Ver Ejemplo de Menú RESPONSIVE de pestañas - Solo CSS