Content aware dropdown

Developer
Rune Sejer Hoffmann
Size
5,716 Kb
Views
6,072
  1. Content aware dropdown Previews
  2. Content aware dropdown HTML Codes
  3. Content aware dropdown CSS Codes
  4. Content aware dropdown JS Codes

How do I make an content aware dropdown?

Stripe.com style dropdown, that measures the dropdown content size, and makes a backdrop follower accordingly. . What is a content aware dropdown? How do you make a content aware dropdown? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

Content aware dropdown Previews
IQ Test

Content aware dropdown - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Content aware dropdown</title> <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content"> <nav class="navigation"> <div class="navigation__backdrop"></div> <div class="navigation__container"> <ul class="navigation__list"> <li class="navigation__item">Home <div class="navigation__item-content"><span class="fontelico-emo-coffee"></span> <p>This menu is aware of it's own content</p> <p>... Kinda the JS measures the content and</p> <p>makes a backdrop accordingly</p> </div> </li> <li class="navigation__item">Portfolio <div class="navigation__item-content"><span class="fontelico-emo-thumbsup"></span> <p>Have you ever visited stripe.com? </p> <p>There you can see same type, just full fledged</p> </div> </li> <li class="navigation__item">Services <div class="navigation__item-content"><span class="fontelico-emo-beer"></span> <p>Just pop your content into this menu, and let the JS handle the rest.</p> <p>Feel free to use it on your own project</p> <p>Have a look at my other pens</p><a class="navigation__item-button" href="https://codepen.io/RSH87/" target="_blank">here</a> </div> </li> </ul> </div> </nav> <div class="content__main"> <h2 class="content__main-headline">Content aware dropdown</h2> <h6 class="content__main-signoff">By RSH87</h6> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Content aware dropdown - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=fontelico);
[class*="fontelico-"]:before { font-family: 'fontelico', sans-serif; color: #58E1E9; font-size: 28px; opacity: .8;
}
* { -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
body { background-color: #1f0743; background-image: url("data:image/svg+xml,%3Csvg width='250' height='150' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237352a7' fill-opacity='0.10'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); font-family: 'Nunito', sans-serif; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; overflow: hidden;
}
.content { max-width: 1070px; margin-left: auto; margin-right: auto;
}
.navigation { height: 70px;
}
.navigation__backdrop { background: #f8f8f8; position: absolute; top: 90px; left: 0; right: 0; opacity: 0; border-radius: 3px; z-index: 0;
}
.navigation__backdrop:before { content: ''; position: absolute; top: -8px; left: 0; right: 0; margin: auto; background: #f8f8f8; height: 20px; width: 20px; border-radius: 3px; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.navigation__backdrop_active { opacity: 1; -webkit-transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.navigation__container { max-width: 1040px; margin-left: auto; margin-right: auto;
}
.navigation__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.navigation__item { position: relative; list-style: none; padding: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; font-weight: 200; font-size: 20px; color: #ffffff;
}
.navigation__item-content { position: absolute; padding: 40px; font-size: 14px; top: 80px; left: 50%; color: rgba(0, 0, 0, 0.6); -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); display: none;
}
.navigation__item-button { padding: 12px 35px 12px 35px; margin-top: 15px; display: inline-block; border-radius: 50px; background: #58E1E9; color: #fff; text-decoration: none;
}
.navigation__item-enter .navigation__item-content { display: block;
}
.navigation__item-active .navigation__item-content { opacity: 1;
}
.content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.content__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.content__main-headline { font-size: calc(2vw + 26px); color: #58E1E9; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; font-weight: bold;
}
.content__main-signoff { margin-top: 10px; font-size: 12px; color: #ffffff;
}
p { min-width: 150px; margin-top: 10px; white-space: nowrap;
}

Content aware dropdown - Script Codes JS Codes

class sizeable_dropdown {	constructor(){	this.x;	this.nav_items = document.querySelectorAll('.navigation__item');	this.backdrop = document.querySelector('.navigation__backdrop');	this.nav_items.forEach(trigger => trigger.addEventListener('mouseenter', cn => this.handle_enter(cn)));	this.nav_items.forEach(trigger => trigger.addEventListener('mouseleave', cn => this.handle_leave(cn)));	}	handle_enter(e) {	e.target.classList.add('navigation__item-enter');	setTimeout(() => e.target.classList.add('navigation__item-active'),100);	let item_content = e.target.querySelector(".navigation__item-content");	let w = item_content.offsetWidth;	let h = item_content.offsetHeight;	this.x = e.target.offsetLeft + e.target.offsetWidth / 2 - w / 2;	this.handle_backdrop(w, h);	}	handle_backdrop(w, h) {	setTimeout(() => this.backdrop.classList.add('navigation__backdrop_active'),100);	Object.assign(this.backdrop.style, {	transform : "translateX(" + this.x +"px)",	height : h + "px",	width : w + "px"	});	}	handle_leave(e) {	e.target.classList.remove('navigation__item-enter', 'navigation__item-active');	setTimeout(() => this.backdrop.classList.remove('navigation__backdrop_active'),100);	}
}
new sizeable_dropdown();
Content aware dropdown - Script Codes
Content aware dropdown - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3
Size 5,716 Kb
Views 6,072
Do you need developer help for Content aware dropdown?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
3D CSS Gameboy
Nav ui
Another menu concept
Crosshair loader
RoadFURY
Left right navigation
Menu concept
Perspective CSS hover effect
Login form
Offset menu
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!