Un «tabs» o pestañas en una interfaz web es un componente que permite a los usuarios cambiar entre diferentes secciones de contenido sin necesidad de recargar la página. Se usa comúnmente para organizar información en un espacio limitado, como en el caso de un menú de restaurante, donde los usuarios pueden navegar entre «Desayuno», «Almuerzo», «Cena» y «Bebidas». Vamos a crear un tabs sencillo.
¿Cómo funciona un Tabs en CSS y JavaScript?
1. Estructura en HTML: Se define una lista de botones o enlaces que actuarán como pestañas, junto con los contenedores que tendrán el contenido de cada sección.
2. Estilos en CSS: Se usan reglas para ocultar/mostrar el contenido de cada pestaña, además de efectos visuales para resaltar la pestaña activa.
3. Interactividad con JavaScript: Se utiliza JavaScript para detectar clics en las pestañas y cambiar el contenido mostrado dinámicamente.
Un primer ejemplo en el que vamos a crear un tab sencillo
Os voy a compartir un primer ejemplo de un tab que puede integrarse sin ningún problema en tu proyecto web de restauración. En este caso, utilizaremos bootstrap 5.3 para crear el proyecto. Aquí tenéis el proyecto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú de Productos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
background-color: #111;
color: white;
text-align: center;
}
h1 {
text-align: center;
margin: 15px 0;
padding: 5px 0;
font-size: 1.8rem;
}
.tabs {
display: flex;
justify-content: center;
margin-top: 20px;
}
.tab-button {
background: none;
border: none;
color: white;
font-size: 18px;
padding: 10px 20px;
cursor: pointer;
transition: 0.3s;
}
.tab-button.active {
font-weight: bold;
}
.tab-content {
display: none;
padding: 20px;
margin-top: 20px;
}
.tab-content.active {
display: block;
}
.list-group-item {
background-color: #111;
color: #FFF;
border: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-5">
<h1>LOS PRODUCTOS</h1>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-9">
<div class="tabs">
<button class="tab-button active" onclick="openTab(event, 'entre-panes')">ENTRE PANES</button>
<button class="tab-button" onclick="openTab(event, 'tortillas')">TORTILLAS</button>
<button class="tab-button" onclick="openTab(event, 'to-con-papas')">TÓ CON PAPAS</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-9">
<div id="entre-panes" class="tab-content active">
<div class="row">
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Producto de pan 01</li>
<li class="list-group-item">Producto de pan 02</li>
<li class="list-group-item">Producto de pan 03</li>
<li class="list-group-item">Producto de pan 04</li>
<li class="list-group-item">Producto de pan 05</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Producto de pan 06</li>
<li class="list-group-item">Producto de pan 07</li>
<li class="list-group-item">Producto de pan 08</li>
<li class="list-group-item">Producto de pan 09</li>
<li class="list-group-item">Producto de pan 10</li>
</ul>
</div>
</div>
</div>
<div id="tortillas" class="tab-content">
<div class="row">
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Plato de tortilla 01</li>
<li class="list-group-item">Plato de tortilla 02</li>
<li class="list-group-item">Plato de tortilla 03</li>
<li class="list-group-item">Plato de tortilla 04</li>
<li class="list-group-item">Plato de tortilla 05</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Plato de tortilla 06</li>
<li class="list-group-item">Plato de tortilla 07</li>
<li class="list-group-item">Plato de tortilla 08</li>
<li class="list-group-item">Plato de tortilla 09</li>
</ul>
</div>
</div>
</div>
<div id="to-con-papas" class="tab-content">
<div class="row">
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Plato de patatas 01</li>
<li class="list-group-item">Plato de patatas 02</li>
<li class="list-group-item">Plato de patatas 03</li>
<li class="list-group-item">Plato de patatas 04</li>
<li class="list-group-item">Plato de patatas 05</li>
</ul>
</div>
<div class="col-6">
<ul class="list-group">
<li class="list-group-item">Plato de patatas 06</li>
<li class="list-group-item">Plato de patatas 07</li>
<li class="list-group-item">Plato de patatas 08</li>
<li class="list-group-item">Plato de patatas 09</li>
<li class="list-group-item">Plato de patatas 10</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function openTab(event, tabName) {
let tabContents = document.getElementsByClassName("tab-content");
for (let content of tabContents) {
content.classList.remove("active");
}
let tabButtons = document.getElementsByClassName("tab-button");
for (let button of tabButtons) {
button.classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
event.currentTarget.classList.add("active");
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>El resultado de éste código lo podéis ver en la siguiente imagen que os comparto a continuación.
Un segundo proyecto de tabs para un proyecto de restauración
Ahora os comparto un segundo ejemplo de un tabs para un proyecto de restauración que podéis utilizar en vuestros proyectos web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú de Restaurante</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #f4f4f4;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab-button {
padding: 10px 20px;
border: none;
background: #ddd;
cursor: pointer;
font-size: 16px;
margin: 0 5px;
border-radius: 5px;
}
.tab-button.active {
background: #ff6600;
color: white;
}
.tab-content {
display: none;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: auto;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<h2>Menú del Restaurante</h2>
<div class="tabs">
<button class="tab-button active" onclick="openTab(event, 'desayuno')">Desayuno</button>
<button class="tab-button" onclick="openTab(event, 'almuerzo')">Almuerzo</button>
<button class="tab-button" onclick="openTab(event, 'cena')">Cena</button>
<button class="tab-button" onclick="openTab(event, 'bebidas')">Bebidas</button>
</div>
<div id="desayuno" class="tab-content active">
<h3>Menú de Desayuno</h3>
<p>Café, jugos, pan tostado, huevos revueltos, etc.</p>
</div>
<div id="almuerzo" class="tab-content">
<h3>Menú de Almuerzo</h3>
<p>Platos de carne, ensaladas, sopas y más.</p>
</div>
<div id="cena" class="tab-content">
<h3>Menú de Cena</h3>
<p>Pizzas, hamburguesas, pastas, etc.</p>
</div>
<div id="bebidas" class="tab-content">
<h3>Menú de Bebidas</h3>
<p>Jugos, cócteles, vinos y más.</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tabbuttons;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
tabbuttons = document.getElementsByClassName("tab-button");
for (i = 0; i < tabbuttons.length; i++) {
tabbuttons[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
</script>
</body>
</html>El resultado de este código lo ilustro en la siguiente imagen que comparto a continuación:
Si estáis interesados en que desarrolle vuestro propio sitio web de restauración para vuestro propio negocio de restauración, podéis contactar conmigo a través de mis redes sociales o de mi página web.