<nav class="top">
<div class="dropdownBackground">
<span class="arrow"></span>
</div>
<ul class="cool">
<li>
<a href="#">A</a>
<div class="dropdown dropdown1"></div>
</li>
<li>
<a href="#">B</a>
<div class="dropdown dropdown2"></div>
</li>
<li>
<a href="#">C</a>
<div class="dropdown dropdown3"></div>
</li>
</ul>
</nav>
html {
box-sizing: border-box;
font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}
nav {
position: relative;
perspective: 600px;
}
.cool > li > a {
color: yellow;
text-decoration: none;
font-size: 20px;
background: rgba(0,0,0,0.2);
padding:10px 20px;
display: inline-block;
margin:20px;
border-radius:5px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.cool > li {
position: relative;
display:flex;
justify-content: center;
}
.list {
color: red;
flex-direction: column;
}
.dropdown {
opacity: 0;
position: absolute;
overflow: hidden;
top:-20px;
border-radius:2px;
transition: all 0.5s;
transform: translateY(100px);
will-change: transform;
display: none;
}
.trigger-enter .dropdown {
display: block;
}
.trigger-enter-active .dropdown {
opacity: 1;
}
.dropdownBackground {
width:100px;
height:100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
transition:all 0.3s, opacity 0.1s, translate 0.2s;
transform-origin: 50% 0%;
display: flex;
justify-content: center;
opacity:0;
}
.dropdownBackground.open {
opacity: 1;
}
.arrow {
position: absolute;
width:15px;
height:15px;
display: block;
background:white;
transform: translateY(-50%) rotate(45deg);
}
.dropdown1 {
min-height: 200px;
min-width: 120px;
}
.dropdown2 {
min-height: 150px;
min-width: 200px;
}
.dropdown3 {
min-height: 70px;
min-width: 80px;
}
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] { background: #019FE9; }
.button[href*=facebook] { background: #3B5998; }
.button[href*=courses] { background: #ffc600; }
const triggers = document.querySelectorAll('.cool > li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');
function handleEnter() {
this.classList.add('trigger-enter');
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
background.classList.add('open');
const dropdown = this.querySelector('.dropdown');
const drodownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();
const coords = {
height: drodownCoords.height,
width: drodownCoords.width,
top: drodownCoords.top - navCoords.top,
left: drodownCoords.left - navCoords.left
};
console.log(coords);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('top', `${coords.top}px`);
background.style.setProperty('left', `${coords.left}px`);
}
function handleLeave() {
this.classList.remove('trigger-enter', 'trigger-enter-active');
background.classList.remove('open');
}
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.