Scribd
Upload
13 views4 pages

Menu Efectos

The document contains HTML code for a stylish menu with impressive effects, designed for a futuristic computer sales website. It features a responsive navigation bar with submenus for products and offers, utilizing CSS for visual effects such as hover animations and background gradients. The design is centered around a modern aesthetic with a focus on user interaction and visual appeal.

Uploaded by

Johnny ChikoHack Peru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views4 pages

Menu Efectos

The document contains HTML code for a stylish menu with impressive effects, designed for a futuristic computer sales website. It features a responsive navigation bar with submenus for products and offers, utilizing CSS for visual effects such as hover animations and background gradients. The design is centered around a modern aesthetic with a focus on user interaction and visual appeal.

Uploaded by

Johnny ChikoHack Peru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú con Efectos Impresionantes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #121212;
color: white;
}
.menu {
position: fixed;
top: 0;
width: 100%;
background: linear-gradient(90deg, #ff6a00, #ee0979);
padding: 15px 0;
display: flex;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: background 0.5s;
}
.menu:hover {
background: linear-gradient(90deg, #ee0979, #ff6a00);
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu ul li {
margin: 0 20px;
}
.menu ul li a {
text-decoration: none;
color: white;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease-in-out;
position: relative;
padding: 10px 15px;
}
.menu ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: white;
bottom: -5px;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
.menu ul li a:hover::after {
transform: scaleX(1);
}
.menu ul li a:hover {
color: #ffdf00;
transform: scale(1.1);
text-shadow: 0px 0px 10px rgba(255, 223, 0, 0.8);
}
.menu ul li a:active {
transform: scale(0.95);
}
</style>
</head>
<body><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Futurista para Venta de Computadoras</title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Orbitron&display=swap');

body {
font-family: 'Orbitron', sans-serif;
margin: 0;
padding: 0;
background-color: #e0f7fa;
color: #fff;
text-align: center;
}
.menu {
position: fixed;
top: 0;
width: 100%;
background: linear-gradient(90deg, #00eaff, #0072ff);
padding: 15px 0;
display: flex;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: background 0.5s;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu ul li {
position: relative;
margin: 0 20px;
}
.menu ul li a {
text-decoration: none;
color: white;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease-in-out;
padding: 10px 20px;
display: block;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.menu ul li a:hover {
background: #ffdf00;
color: black;
transform: scale(1.1);
box-shadow: 0px 0px 15px rgba(255, 223, 0, 0.8);
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: rgba(0, 114, 255, 0.9);
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.submenu li {
display: block;
margin: 0;
}
.submenu li a {
color: white;
padding: 12px 20px;
display: block;
transition: background 0.3s;
}
.submenu li a:hover {
background: #00eaff;
color: black;
}
.menu ul li:hover .submenu {
display: block;
}
</style>
</head>
<body>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Productos</a>
<ul class="submenu">
<li><a href="#">Laptops</a></li>
<li><a href="#">PC Gamers</a></li>
<li><a href="#">Accesorios</a></li>
</ul>
</li>
<li>
<a href="#">Ofertas</a>
<ul class="submenu">
<li><a href="#">Descuentos</a></li>
<li><a href="#">Promociones</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>

<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>

You might also like