<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./test.css">
<title>Test</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-container">
<li class="navbar-item">Home<span class="navbar-item_label">Home</span></li>
<li class="navbar-item">Services<span class="navbar-item_label">Services</span>
<ul class="navbar-container_sub">
<li class="navbar-item_sub">Service 1</li>
<li class="navbar-item_sub">Service 2</li>
<li class="navbar-item_sub">Service 3</li>
</ul>
</li>
<li class="navbar-item">Products<span class="navbar-item_label">Products</span>
<ul class="navbar-container_sub">
<li class="navbar-item_sub">Product 1</li>
<li class="navbar-item_sub">Product 2</li>
<li class="navbar-item_sub">Product 3</li>
</ul>
</li>
<li class="navbar-item">About<span class="navbar-item_label">About</span></li>
</ul>
</nav>
</body>
</html>$color1: #64d3c3;
$color2: #fbf144;
$color3: #6a3696;
$color4: #8cc7b6;
$color5: #8c7c6c;
body, html, nav, ul, li, span{
font-size: 10px;
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: $color1;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: none;
}
.navbar{
position: relative;
left: 50%;
transform: translateX(-50%);
width: 70rem;
margin-top: 10vw;
transition: all .5s ease;
&-container{
list-style: none;
display: flex;
justify-content: center;
perspective: 50rem;
background-color: darken($color: $color1, $amount: 20);
box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);
&_sub{
position: absolute;
width: 100%;
list-style: none;
border-radius: 0 0 5px 5px;
top: 100%;
left: 0;
padding: 0;
transform: rotateY(180deg) scaleY(0);
transform-origin: top;
opacity: 0;
visibility: hidden;
transition: all .7s ease;
box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);
}
}
&-item{
flex-grow: 1;
padding: 1rem;
font-size: 2rem;
background-color: $color3;
font-weight: bold;
text-align: center;
// color: darken($color: $color1, $amount: 20);
color: whitesmoke;
transition: all .7s ease;
transform: rotateY(0deg);
position: relative;
z-index: 1;
cursor: pointer;
&:hover{
transform: rotateY(180deg);
& > .navbar-container_sub{
transform: rotateY(180deg) scaleY(1);
opacity: 1;
visibility: visible;
}
& > .navbar-item_label {
transform: scaley(1) rotateY(180deg);
opacity: 1;
visibility: visible;
}
}
&_sub{
padding: 1rem;
font-size: 2rem;
background-color: transparent;
position: relative;
overflow: hidden;
color: whitesmoke;
text-align: end;
transition: color .3s ease-in;
&:hover {
color: $color3;
}
&:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: $color4;
}
&:before{
content: "";
position: absolute;
top: 0;
left: 120%;
width: 120%;
height: 100%;
z-index: -1;
background-color: $color2;
transform: skewX(-30deg);
transform-origin: right;
transition: all .3s ease-in;
}
&:hover:before{
left: -10%;
}
}
&_label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: inherit;
font-size: inherit;
font-weight: bold;
text-align: right;
transform: scaleY(0) rotateY(180deg);
transform-origin: top;
opacity: 0;
visibility: hidden;
transition: all .4s ease .1s;
background-color: $color2;
color: $color3;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.