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, transform 0.2s; transform-origin: 50% 0; display: flex; justify-content: center; opacity: 0;} .dropdownBackground.open {opacity: 1;} to give the content coloring, positioning, font, size, and animation. .arrow {position: absolute; width: 20px; height: 20px; display: block; background: white; transform: translateY(-50%) rotate(45deg);} to make the pop-up and colorize it. .bio {min-width: 500px; display: flex; justify-content: center; align-items: center; line-height: 1.7;} .bio img { float: left; margin-right: 20px; width: 25%; height: auto;} .courses {min-width: 300px;} .courses li { padding: 10px 0; display: block;border-bottom: 1px solid rgba(0,0,0,0.2);} .dropdown a { text-decoration: none; color: #ffc600;} a.button {background: black; display: block; padding: 10px; color: white; margin-bottom: 10px;} /* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */ .button[href*=twitter] { background: #019FE9; } .button[href*=facebook] { background: #3B5998; } .button[href*=youtube] { background: #ff0000; } .button[href*=instagram] { background: #3f729b; } to stylize the content inside the pop-up. For the JavaScript, I typed:
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 dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();
const coords = {
height: dropdownCoords.height,
width: dropdownCoords.width,
top: dropdownCoords.top - navCoords.top,
left: dropdownCoords.left - navCoords.left
};
background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}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 makes the navigation with the pop-up functional and shows the content of it when hovered over.
Knowing how to use JavaScript is useful to a web designer because it allows web designers to make website functional.
Link: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_40/Lab_40.html
No comments:
Post a Comment