Navigáció
Középen kiemelkedő „luxury” menü
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<nav class="menu-luxury">
<a href="#" class="active">Kezdőlap</a>
<a href="#">Rólunk</a>
<a href="#">Szolgáltatások</a>
<a href="#">Portfólió</a>
<a href="#">Kapcsolat</a>
</nav>
.menu-luxury {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px;
background: #11151c;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
}
.menu-luxury a {
position: relative;
padding: 13px 21px;
color: #8d98a8;
text-decoration: none;
font-family: Georgia, serif;
font-size: 14px;
letter-spacing: 0.06em;
border-radius: 13px;
transition:
color 0.35s ease,
transform 0.35s ease;
}
.menu-luxury a:hover {
color: #ffffff;
transform: translateY(-2px);
}
.menu-luxury a.active {
color: #f1f5f9;
background: rgba(255, 255, 255, 0.055);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.menu-luxury a.active::before {
content: "";
position: absolute;
left: 50%;
top: -3px;
width: 26px;
height: 2px;
background: #c9aa5f;
transform: translateX(-50%);
box-shadow: 0 0 8px rgba(201, 170, 95, 0.45);
}
.menu-luxury a.active::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 4px;
height: 4px;
background: #c9aa5f;
border-radius: 50%;
transform: translateX(-50%);
}
@media (max-width: 700px) {
.menu-luxury {
flex-wrap: wrap;
}
.menu-luxury a {
padding: 10px 15px;
}
}
Ehhez az elemhez nincs külön JavaScript.