Hola, tengo un problema con mi código para mi menú desplegable, pues no se porque no quiere ocultar el menú al momento de que la pantalla este muy pequeña.
Este es mi codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taller automotriz | Panamerican motors</title>
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,
[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div class="header-box">
<nav class="navbar">
<div class="menu-toggle">
<!-- Usa un label para el ícono del menú y vincúlalo con el checkbox -->
<label for="toggle"><a href="#"><i class="fa-solid fa-bars"></i></a></label>
</div>
<input type="checkbox" id="toggle">
<ul class="nav-list">
<li class="home"><a href="#"><span class="material-symbols-outlined">home</span></a></li>
<li class="service"><a href="#">SERVICIOS</a></li>
<li class="diagnostic"><a href="#">DIAGNÓSTICO</a></li>
<li class="modification"><a href="#">MODIFICACIONES</a></li>
<li class="about"><a href="#">ACERCA DE</a></li>
<li class="search-bar"><input type="text" placeholder="Buscar..."></li>
<li></li>
</ul>
</nav>
</div>
<div class="main-section">
<div class="title-section">
<h2>PANAMERICAN MOTORS TALLER DE SERVICIOS</h2>
<h3>Servicios especializados en automóviles con certificación.</h3>
<div class="content-wrapper">
<ul class="image-list">
<li>
<img src="IMAGEN/Usandose/IMG1.jpg" alt="Descripción de la página">
</li>
</ul>
<p>Somos una empresa con experiencia, contamos con un personal calificado; aseguramos a nuestros clientes calidad y rendimiento.
Nuestros servicios llegan a domicilio, como cliente puedes elegir el día y horario, nos ajustamos a tus necesidades.
Recuerda que somos una empresa que selecciona y garantiza el mantenimiento de tu vehículo.</p>
</div>
</div>
<div class="content-wrapper">
<ul class="feature-list">
<li>
<img src="IMAGEN/Usandose/Servicios.png" alt="Servicio">
<h3>SERVICIOS DE MANTENIMIENTO</h3>
<p>Ofrecemos revisiones completas periódicamente, con la validez de asegurar un
mejor rendimiento a tu automóvil.
</p>
<a href="#" class="button">Ver más</a>
</li>
<li>
<img src="IMAGEN/Usandose/Diagnostico.png" alt="Diagnosticos">
<h3>DIAGNOSTICOS</h3>
<p>Nos encargamos de la revisión solicitada y/o requerida para el vehículo, tomando en cuenta siempre al cliente.
</p>
<a href="#" class="button">Ver más</a>
</li>
<li>
<img src="IMAGEN/Usandose/Modificaciones.png" alt="Modificaciones">
<h3>MODIFICACIONES</h3>
<p>Mejoramiento y solicitudes de calidad en piezas, accesorios, llantas, por parte de
nuestro cliente a su vehículo.</p>
<a href="#" class="button">Ver más</a>
</li>
</ul>
</div>
<div class="content-wrapper">
<ul class="feature-list">
<li>
<i class="fas fa-users"></i> <!-- Icono de clientes -->
<h3>MISION</h3>
<p>Brindar un servicio de mecánica automotriz de alta calidad y eficiencia en nuestros trabajos.
</p>
</li>
<li>
<i class="fas fa-tools"></i> <!-- Icono de servicio -->
<h3>VISION</h3>
<p>Contamos con talleres propios lo que permite entregarte tu auto o tractocamión e
n las mejores condiciones y brindarte la atención que necesitas.</p>
</li>
<li>
<i class="fas fa-car"></i> <!-- Icono de variedad -->
<h3>VALORES</h3>
<p><strong class="respeto">Respeto:</strong> Actuar basado en el entendimiento hacia los demás.</p>
<p><strong class="pasion">Pasión:</strong> Por la marca, por la empresa, por los colaboradores y por nosotros mismos.</p>
<p><strong class="integridad">Integridad:</strong> Somos profesionales, éticos, honestos y responsables.</p>
<p><strong class="actitud">Actitud:</strong> Transmitir positivismo y energía en cada una de nuestras actividades.</p>
</li>
</ul>
</div>
<div class="image-gallery">
<div class="main-image">
<!-- Imagen grande -->
<img id="mainImage" src="IMAGEN/Usandose/Thumbnail1.png" alt="Imagen grande">
</div>
<div class="thumbnail-images">
<!-- Imágenes pequeñas -->
<img src="IMAGEN/Usandose/Thumbnail1.png" alt="Thumbnail 1" onclick="changeMainImage(this)">
<img src="IMAGEN/Usandose/Thumbnail2.png" alt="Thumbnail 2" onclick="changeMainImage(this)">
<img src="IMAGEN/Usandose/Thumbnail3.png" alt="Thumbnail 3" onclick="changeMainImage(this)">
<img src="IMAGEN/Usandose/Thumbnail4.png" alt="Thumbnail 4" onclick="changeMainImage(this)">
</div>
</div>
<br>
<div class="financing-section">
<h3>TRABAJO A DOMICILIO</h3>
<p>Somos una empresa que trabaja a domicilio, nos ajustamos a tus necesidades en
días y horarios. Por lo que sí, el cliente no puede el día agendado, nosotros
movemos nuestro servicio para el día que pueda.</p>
<a href="#" class="button">CONTÁCTANOS</a>
</div>
<div class="financing-section">
<h3>SEGMENTO DE MERCADO</h3>
<p>Los propietarios de automóviles híbridos buscan el mejor lugar para mantenimiento
de sus unidades. Contamos con servicios especializados; iniciando con el
conocimiento para el diagnóstico, la selección de refacciones con proveedores
filiales y la reparación garantizada por nuestro personal certificado en área
automotriz, ya que el adquirir una unidad nueva cada día requiere de largos tiempos
de espera con calidad asegurada.</p>
</div>
<div class="features">
<div class="feature">
<h4>SERVICIOS SEGUROS</h4>
<p>Mantenimiento y Servicio de confianza</p>
<img src="IMAGEN/Usandose/ImAbajo.png" alt="Imagen de abajo">
</div>
</div>
<div class="subscribe-section">
<ul class="subscribe-list">
<li>
<input type="email" placeholder="Ingresa tu email">
</li>
<li>
<button class="button">SUSCRIBETE</button>
</li>
<li>
<p>Recibe nuestro mejor contenido y mantente informado</p>
</li>
</ul>
</div>
</div>
<div class="footer-box">
<ul class="contact-list">
<li><i class="fa-solid fa-phone"></i><strong> Atención a clientes:</strong><a href="tel:+5561416018">55 6141 6018</a> </li>
<li><strong>Redes sociales:</strong> <i class="fa-solid fa-envelope fa-lg"></i>
<i class="fa-brands fa-facebook fa-lg"></i>
<i class="fa-brands fa-whatsapp fa-lg"></i>
<i class="fa-brands fa-square-instagram fa-lg"></i>
<i class="fa-brands fa-tiktok"></i> <!-- Colocar enlaces de vinculos faltantes --></li>
<li>Horario: Lun-Vier 8:00 AM a 7:00 PM | Sab-Dom 8:00 AM a 5:00 PM (Todos los trabajos con previa cita)</li>
<li><strong>RFC:</strong> PCE1411056H8</li>
<ul class="logo-section">
<li><img src="IMAGEN/Usandose/TebiS Logo.png" alt="Logo de la página abajo"> </li>
</ul>
</ul>
</div>
<div >
<p>Copyright© 2017-2024 Panamotors Center, S.A. de C.V. Todos los Derechos Reservados</p>
</div>
</div>
</body>
<script>
var mainImage = document.getElementById('mainImage');
var thumbnails = document.querySelectorAll('.thumbnail-images img');
var currentIndex = 0;
var interval = 3000; // Cambia la imagen cada 3 segundos (3000 milisegundos)
// Función para cambiar la imagen principal
function changeMainImage(thumbnail) {
mainImage.style.opacity = 0; // Cambia la opacidad a 0 (invisible)
setTimeout(function() {
mainImage.src = thumbnail.src; // Cambia la imagen principal después de que se complete la transición
mainImage.style.opacity = 1; // Restaura la opacidad a 1 (visible)
}, 500); // Espera 0.5 segundos antes de cambiar la imagen
}
// Función para cambiar la imagen automáticamente
function autoChangeImage() {
currentIndex = (currentIndex + 1) % thumbnails.length; // Calcula el índice de la próxima imagen
var nextThumbnail = thumbnails[currentIndex];
mainImage.style.opacity = 0; // Cambia la opacidad a 0 (invisible)
setTimeout(function() {
mainImage.src = nextThumbnail.src; // Cambia la imagen principal después de que se complete la transición
mainImage.style.opacity = 1; // Restaura la opacidad a 1 (visible)
}, 500); // Espera 0.5 segundos antes de cambiar la imagen
}
// Establecer el temporizador para cambiar la imagen automáticamente
setInterval(autoChangeImage, interval);
var toggleMenu = function() {
var navList = document.querySelector('.nav-list');
var isActive = navList.classList.contains('active');
navList.classList.toggle('active', !isActive); // Cambia el estado del menú
if (!isActive) {
// Si el menú se activa, agregamos un event listener para cerrarlo cuando se haga clic fuera de él
document.addEventListener('click', closeMenuOnClickOutside);
} else {
// Si el menú se desactiva, eliminamos el event listener
document.removeEventListener('click', closeMenuOnClickOutside);
}
};
var closeMenuOnClickOutside = function(event) {
var navList = document.querySelector('.nav-list');
if (!event.target.matches('.menu-toggle, .menu-toggle *, .nav-list, .nav-list *')) {
navList.classList.remove("active");
document.removeEventListener('click', closeMenuOnClickOutside);
}
};
document.querySelector('.menu-toggle').addEventListener('click', toggleMenu);
// Cerrar el menú si está abierto y se hace clic en cualquier parte de la pantalla
window.addEventListener("click", function(event) {
if (window.innerWidth < 768 && !event.target.matches('.menu-toggle, .menu-toggle *, .nav-list, .nav-list *')) {
document.querySelector(".nav-list").classList.remove("active");
}
});
</script>
</html>
y este es mi css:
body {
font-family: Arial, sans-serif;
background-color: #2B2D42;
color: #fff;
margin: 0;
padding: 0;
}
.header-box {
background-color: #646363;
padding: 10px;
text-align: center;
}
header {
background-color: #0077cc;
color: #fff;
text-align: center;
padding: 10px;
}
.main-section {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #6b5a5ae1;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.nav-list li {
margin: 0 10px;
display: flex;
align-items: center;
}
.nav-list.active {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
background-color: #646363;
width: 100%;
z-index: 999;
}
.nav-list.active li {
text-align: center;
margin: 10px 0;
}
.nav-list a {
text-decoration: none;
color: #fff;
padding: 5px 10px;
transition: background-color 0.3s;
white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}
.nav-list a:hover,
.nav-list a:active {
background-color: #bdb6b6;
}
.search-bar {
display: flex;
align-items: center;
margin-left: auto; /* Mueve la barra de búsqueda al extremo derecho */
margin-top: 10px; /*Espacio entre la barra de navegación y la barra de búsqueda */
}
.search-bar input {
padding: 5px;
margin-left: 5px;
width: 100%; /* Ajusta el ancho del campo de búsqueda para que ocupe todo el espacio disponible */
}
/* Ocultar elementos por defecto */
.service,
.diagnostic,
.modification,
.about {
display: none;
}
/* Mostrar elementos en pantalla pequeña cuando se activa el menú */
.nav-list.active .service,
.nav-list.active .diagnostic,
.nav-list.active .modification,
.nav-list.active .about {
display: block;
}
.menu-toggle {
display: none; /* Oculta el icono de la barra por defecto */
}
#toggle {
display: none; /* Oculta el checkbox */
}
.title-section img {
width: 90%; /* Ajusta el ancho de la imagen*/
max-width: 400px; /* Establece el ancho máximo para la imagen */
height: auto;
margin-bottom: 4px; /* Reducir el margen inferior */
}
.title-section p {
margin-bottom: 4px; /* Reducir el margen inferior */
}
.title-section {
text-align: center;
margin-bottom: 20px;
}
.title-section h2 {
font-size: 24px;
font-weight: bold;
color: #ffffff; /* Color azul utilizado en la página */
}
.content-wrapper img {
border: 1px solid rgba(0, 0, 0, 0.3); /* Borde sutil de color con transparencia */
border-radius: 5px; /* Borde redondeado */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
background-color: #ffffff;
}
.image-list {
list-style-type: none; /* Eliminar los estilos de la lista */
padding: 0;
margin: 0;
}
.contact-list {
list-style: none;
padding: 0;
}
.contact-list li {
margin-bottom: 10px;
}
.contact-list strong {
color: #2a2e31; /* Color utilizado en la página */
}
.footer-box {
background-color: #ffffff; /* Fondo gris claro */
text-align: center;
padding: 10px;
color: #000; /* Texto negro para contrastar con el fondo */
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
margin-right: 5px;
}
.feature-list {
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.feature-list li {
flex: 1;
text-align: center;
background-color: #8b8383;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-right: 20px;
}
.feature-list li p strong.respeto,
.feature-list li p strong.pasion,
.feature-list li p strong.integridad,
.feature-list li p strong.actitud {
font-weight: bold;
}
.feature-list li a.button {
display: inline-block;
}
.feature-list li:last-child {
margin-right: 0;
}
.feature-list img {
width: 100%;
height: auto;
max-width: 200px;
margin-bottom: 10px;
}
.feature-list h3 {
font-size: 18px;
margin-bottom: 10px;
color: #fff;
}
.feature-list p {
color: #ece5e5;
margin-bottom: 10px;
}
.feature-image{
width: 300px;
height: auto;
}
.feature-list a.button {
display: inline-block;
}
.financing-section {
background-color: #f2f2f2; /* Color de fondo para resaltar la sección */
padding: 20px;
text-align: center;
}
.financing-section h3 {
color: #0077cc; /* Color azul para el título */
}
.financing-section p {
color: #333; /* Color oscuro para el texto */
margin-bottom: 20px; /* Espacio inferior entre el párrafo y el botón */
}
.button {
background-color: #0077cc;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s;
}
.button:hover {
background-color: #005faa;
}
.image-gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.main-image {
margin-bottom: 20px;
}
.main-image img {
width: 400px; /* Ancho deseado para la imagen grande */
height: auto;
border: 2px solid #0077cc; /* Borde alrededor de la imagen */
padding: 10px; /* Relleno dentro del borde */
box-sizing: border-box; /* Incluye el relleno en el ancho y alto total */
background-color: #928787; /* Color de fondo dentro del borde */
transition: opacity 0.5s ease-in-out; /*transición de opacidad */
}
.thumbnail-images {
display: flex;
justify-content: space-around;
width: 100px; /* Ancho deseado para las imágenes pequeñas */
height: auto;
gap: 5px; /* Espacio entre las imágenes */
}
.thumbnail-images img {
width: 80px; /* Ancho deseado para cada imagen pequeña */
height: auto;
border: 2px solid #0077cc; /* Borde alrededor de cada imagen */
cursor: pointer; /* Cambia el cursor al pasar por encima de las imágenes pequeñas */
background-color: #a79e9e; /* Color de fondo dentro del borde */
transition: transform 0.3s; /* Agregamos una transición para suavizar el efecto */
}
.thumbnail-images img:hover {
border: 2px solid #005faa; /* Borde resaltado al pasar el cursor */
}
.thumbnail-images img:hover {
border: 2px solid #0077cc; /* Borde resaltado al pasar el cursor */
transform: scale(1.1); /* Escala el tamaño de la imagen al 110% */
}
.feature img {
width: 200px; /* Ancho */
height: auto; /* Ajusta automáticamente la altura */
border: 1px solid rgba(0, 0, 0, 0.3); /* Borde sutil de color blanco con transparencia */
border-radius: 5px; /* Borde redondeado */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
background-color: #aa9b9b;
}
.subscribe-section {
background-color: #797070;
color: #fff;
text-align: center;
padding: 20px;
}
.subscribe-list {
list-style: none;
padding: 0;
margin: 0;
}
.subscribe-list li {
margin-bottom: 10px;
}
.subscribe-section input {
padding: 10px;
border-radius: 5px;
border: none;
}
.subscribe-section button {
background-color: #0077cc;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
.subscribe-section button:hover {
background-color: #005faa;
}
.logo-section {
list-style: none;
text-align: center;
padding: 20px;
background-color: #fff; /* Color de fondo blanco */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
margin-top: 1px; /* Espacio superior */
margin-bottom: 10px; /* Reducir el espacio entre elementos de la lista */
}
.logo-section img {
width: 500px; /* Ancho deseado para la imagen */
max-width: 100%;
height: auto; /* Ajusta automáticamente la altura */
border: 2px solid #ffffff; /* Borde sólido con color azul */
padding: 5px; /* Relleno dentro del borde */
background-color: #ffffff; /* Color de fondo dentro del borde */
margin-bottom: 10px; /* Reducir el espacio entre el contenido y el pie de página */
}
@media screen and (max-width: 768px) {
/* .nav-list {
flex-direction: column;
align-items: center;
display: none;
}*/
.nav-list li {
text-align: center;
margin: 10px 0;
}
.menu-toggle {
display: block;
text-align: right;
padding: 10px 20px;
cursor: pointer;
}
.nav-list.active {
display: flex;
flex-direction: column;
position: fixed;
top: 100%;
left: 0;
bottom: 0;
right: 0;
background-color: #646363;
width: 100%;
z-index: 999;
}
.nav-list.active li {
text-align: center;
margin: 10px 0;
}
.search-bar {
margin-top: 10px;
margin-bottom: 20px;
}
.main-image img {
width: 100%;
}
.feature-list li {
margin-right: 0;
margin-bottom: 20px;
flex-basis: 100%;
}
.thumbnail-images {
width: auto;
}
.thumbnail-images img {
width: 60px;
}
.logo-section img {
width: 80%;
}
}
@media screen and (max-width: 600px) {
.search-bar {
width: 100%;
margin-top: 10px;
}
.nav-list {
justify-content: center;
}
}
@media screen and (max-width: 480px) {
.title-section img {
max-width: 100%;
}
.subscribe-input input {
width: 100%;
}
.subscribe-input button {
width: 100%;
}
.logo-section img {
width: 100%;
}
.nav-list.active {
position: relative;
}
.nav-list li {
margin: 10px 0;
}
}
Crear cuenta
