Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Make Animated Toolbox Flyouts

Giving more control and a better UX to your website visitors doesn't have to be tricky. Here's an easy way to do that with animated toolbox flyouts.

Your website's content is one of the most important pieces to your website's success. At times, your website users might not need all of the content you offer at one time. Using animated toolbox flyouts can help offset the amount of copy seen on a page. This cleans up the look of a page by not squeezing in more copy. It also gives your website visitors more control over the content they need to see and when they need to see it. This simple ability to trigger a flyout gives them an improved user experience.

HTML

<section> <img alt="Powering web experiences across the planet" class="img-fluid d-block mx-auto" src="https://www.solodev.com/_/images/powering-the-planet.png"> </section> <div class="container"> <div class="row"> <div class="col-sm-12"> <h1 class="text-center display-3 my-5">Solodev integrates with most favorite platform</h1> </div> </div> <div class="row"> <div class="col-sm-12 toolbox"> <div class="toolbox-item" onclick="location.href='#'"> <a href="#"> <div class="row"> <div class="col-xs-12"> <img src="https://raw.githubusercontent.com/solodev/flyout-boxes/master/salesforce-icon.png" alt="salesforce icon" class="img-fluid"/> <span>SalesForce</span> </div> </div> </a> <div class="more"> <p>Integrate with SalesForce - the most popular CRM system on the planet.</p> </div> </div> <div class="toolbox-item" onclick="location.href='#'"> <a href="#"> <div class="row"> <div class="col-xs-12"> <img src="https://raw.githubusercontent.com/solodev/flyout-boxes/master/integration-solodev-mailchimp-icon.png" alt="mailchimp icon" class="img-fluid"/><span>MailChimp</span> </div> </div> </a> <div class="more"> <p>Integrate with MailChimp and create web hooks to collect data in real time.</p> </div> </div> </div> </div> </div>

CSS

Before you add this to your website, feel free to test it out in the JSFiddle below. Don't forget to adjust the screen size to see how the flyouts render on other sizes like a tablet or mobile device.

@media (max-width: 767.98px) {
	h1 {
		font-size: 2.5rem!important;
	}
}
.toolbox {
	padding: 0 15px;
	overflow: hidden;
	height: 190px;
}
.toolbox.negative-max {
	margin-top: -181px;
}
.toolbox.negative-medium {
	margin-top: -140px;
}
@media (max-width: 576px) {
	.toolbox {
		overflow: visible;
		margin-top: 0 !important;
		margin-bottom: 45px;
		height: auto;
	}
}
.toolbox .toolbox-item {
	border-right: 3px solid transparent;
	float: left;
	width: 50%;
	position: relative;
	height: 181px;
}
@media (max-width: 577px) {
	.toolbox .toolbox-item {
		width: 100%;
		height: auto;
		border-right: 0;
		border-bottom: 1px solid #eee;
	}
	.toolbox .toolbox-item:nth-of-type(1) {
		border-top: 1px solid #eee;
	}
}
.toolbox .toolbox-item:nth-last-of-type(1) {
	border-right: 0;
}
.toolbox .toolbox-item a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background: #f4f1f1;
	padding: 18px 20px;
	font-weight: 600;
	font-size: 1rem;
	color: #000;
	text-transform: uppercase;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	justify-content: center;
	position: relative;
}
@media (min-width: 577px) {
	.toolbox .toolbox-item a {
		-webkit-transform: translate3d(0px, 107px, 0px);
		transform: translate3d(0px, 107px, 0px);
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		-o-transition: opacity 0.35s, transform 0.35s;
		transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
	}
}
.toolbox .toolbox-item a:after {
	content: "";
	width: 9px;
	height: 13px;
	background: url(https://raw.githubusercontent.com/solodev/flyout-boxes/master/arrow-right.png) no-repeat 0 0;
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -5px;
}
@media (min-width: 577px) {
	.toolbox .toolbox-item a:hover, .toolbox .toolbox-item a.active {
		color: #fff;
		background: #0085f9;
	}
	.toolbox .toolbox-item a:hover:after, .toolbox .toolbox-item a.active:after {
		background-position: 0 -13px;
	}
}
.toolbox .toolbox-item a.active {
	font-size: 14px;
	font-size: 1.4rem;
}
@media (max-width: 576px) {
	.toolbox .toolbox-item a {
		font-size: 15px;
		font-size: 1.5rem;
		text-transform: none;
		background: #fff;
		padding: 10px 15px;
	}
	.toolbox .toolbox-item a br {
		display: none;
	}
}
.toolbox .toolbox-item .icon {
	float: left;
	width: 38px;
	height: 38px;
	background: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	margin-right: 15px;
	padding: 10px;
}
@media (max-width: 576px) {
	.toolbox .toolbox-item .icon {
		background: #eff0f1;
	}
}
.toolbox .toolbox-item .more {
	padding: 5px 15px 25px 15px;
	margin: 0;
	font-size: 12px;
	font-size: 1.4rem;
	color: #fff;
	background: #0085f9;
}
@media (min-width: 576px) and (max-width: 1199.98px) {
	.toolbox .toolbox-item .more {
		font-size: 1.2rem;
	}
}
@media (min-width: 576px) {
	.toolbox .toolbox-item .more {
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		-o-transition: opacity 0.35s, transform 0.35s;
		transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
		-webkit-transform: translate3d(0px, 107px, 0px);
		transform: translate3d(0px, 107px, 0px);
	}
}
@media (max-width: 576px) {
	.toolbox .toolbox-item .more {
		display: none;
	}
}
.toolbox .toolbox-item .more p {
	padding-top: 8px;
	font-size: 1rem;
	min-height: 80px;
	border-top: 1px solid #40a4fb;
}
@media (min-width: 577px) {
	.toolbox .toolbox-item:hover a {
		-webkit-transform: translate3d(0px, 0, 0px);
		transform: translate3d(0px, 0, 0px);
		color: #fff;
		background: #0085f9;
	}
	.toolbox .toolbox-item:hover a:after {
		background-position: 0 -13px;
	}
	.toolbox .toolbox-item:hover .more {
		-webkit-transform: translate3d(0px, 0, 0px) rotateX(0deg);
		transform: translate3d(0px, 0, 0px) rotateX(0deg);
	}
}

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Be sure to scale your browser window to various sizes to see how the banner would look on mobile display.

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev