R9: Accordion Image Slider Menu

Update – 29/09/2017: After recent Divi updates this is no longer working so well. As this recipe was originally experimental and a bit of fun I will not be updating it so please use at your own risk, you will need a decent level of CSS knowledge to get this working with Divi 3.0.76+.

Recipe #9 takes an accordion image slider I found on Tympanus.net (can you tell I am a little obsessed with that site? ) and turns it into a cool responsive menu you can use to link to galleries, portfolios, projects or even blog categories. This would be a great feature for photography or portfolio websites but with a little imagination, you could use it for pretty much anything

Click here to see the live demo and download the xml file

So let’s get cooking!

Ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
6 suitable images (mine are 500x750px)

Cooking time

This should take you around 15 – 20 minutes max.

Preparation

The first thing we need to do is create our module. We are going to use the code module for this effect as it won’t strip out the custom code we are adding like a text module sometimes does.

Create a new section with one column and add a code module.

Click on the Custom CSS tab and give the code module a custom css class of ds-container .

Method

Next, whilst still in the code module, click on the General Setting tab and paste in the following HTML into the Content area. Be sure to paste it in as it is, don’t try to add line spacing to make it look nicer as this will break the effect. You will need to replace the link URLs, captions, image URLs and alt text with your own images and text. Then save & exit.

<figure><img src="https://divisoup.com/wp-content/uploads/2016/03/children.jpg" alt="Children"><input type="radio" name="radio-set" checked="checked"><figcaption><a href="#"><span>Children</span></a></figcaption><figure><img src="https://divisoup.com/wp-content/uploads/2016/03/newborn.jpg" alt="Newborn"><input type="radio" name="radio-set"><figcaption><a href="#"><span>Newborn</span></a></figcaption><figure><img src="https://divisoup.com/wp-content/uploads/2016/03/pets.jpg" alt="Pets"><input type="radio" name="radio-set"><figcaption><a href="#"><span>Pets</span></a></figcaption><figure><img src="https://divisoup.com/wp-content/uploads/2016/03/weddings.jpg" alt="Weddings"><input type="radio" name="radio-set"><figcaption><a href="#"><span>Weddings</span></a></figcaption><figure><img src="https://divisoup.com/wp-content/uploads/2016/03/fashion.jpg" alt="Fashion"><input type="radio" name="radio-set"><figcaption><a href="#"><span>Fashion</span></a></figcaption><figure><img src="https://divisoup.com/wp-content/uploads/2016/03/food.jpg" alt="Food"><input type="radio" name="radio-set"><figcaption><a href="#"><span>Food</span></a></figcaption></figure></figure></figure></figure></figure></figure></figure>

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*---------- [Accordion Image Slider Menu] ----------*/

.ds-container {
	width: 1000px;
	margin: 20px auto;
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,1);
}

.ds-container figure {
        position: absolute;
	top: 0 !important;
	left: 100px; /* width of visible piece */
	margin: 0;
	width: 500px;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
        transition: all 0.3s ease-in-out;
}   

.ds-container > figure {
        position: relative;
	left: 0 !important;
}

.ds-container img {
	display: block;
	width: 100%;
}

.ds-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
        opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ds-container input:checked{
	width: 5px;
	left: auto;
	right: 0px;
}
.ds-container input:checked ~ figure {
        left: 500px;
        transition: all 0.7s ease-in-out;
}

.ds-container figcaption {
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.1);
	position: absolute;
	top: 0px;
        transition: all 0.2s linear;
}

.ds-container figcaption span {
	position: absolute;
	top: 80%;
	margin-top: -30px;
	right: 20px;
	left: 20px;
	overflow: hidden;
	text-align: center;
	background: rgba(87, 73, 81, 0.3);
	border: 1px solid #fff;
	line-height: 20px;
	font-size: 20px;
        opacity: 0;
	text-transform: uppercase;
	letter-spacing: 8px;
	font-weight: 800;
	padding: 30px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.ds-container figcaption span:hover {
	background: rgba(255, 255, 255, 0.3);
	color: #000;
	border: 1px solid #000;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.ds-container input:checked + figcaption,
.ds-container input:checked:hover + figcaption{
	background: rgba(87, 73, 81, 0);
}

.ds-container input:checked + figcaption span {
        transition: all 0.4s ease-in-out 0.5s;
	opacity: 1;
	top: 88%; /*placement of title link*/
}

.ds-container #ds-selector-last:checked + figcaption span {
	transition-delay: 0.3s;
}

.ds-container input:hover + figcaption {
	background: rgba(87, 73, 81, 0.03);
}

.ds-container input:checked ~ figure input{
        z-index: 1;
}

@media screen and (max-width: 1024px) {
        .ds-container { 
		width: 740px; 
	}
	
	.ds-container figure { 
		left: 80px; 
		width: 340px; 
	}
	
	.ds-container input { 
		width: 80px; 
	}
	
	.ds-container input:checked ~ figure { 
		left: 340px; 
	}
	
	.ds-container figcaption span { 
		font-size: 18px; 
	}
	
	.ds-container input:checked + figcaption span {
		top: 82%; /*placement of title link*/
	}
}

@media screen and (max-width: 768px) {
        .ds-container { 
		width: 540px; 
	}
	
	.ds-container figure { 
		left: 50px; 
		width: 290px; 
	}
	
	.ds-container input { 
		width: 50px; 
	}
	
	.ds-container input:checked ~ figure { 
		left: 290px; 
	}
	
	.ds-container figcaption span { 
		font-size: 16px; 
	}
	
	.ds-container input:checked + figcaption span {
		top: 80%; /*placement of title link*/
	}
}

@media screen and (max-width: 520px) {
        .ds-container { 
		width: 300px; 
	}
	
	.ds-container figure { 
		left: 30px; 
		width: 150px; 
	}
	
	.ds-container input { 
		width: 30px; 
	}
	
	.ds-container input:checked ~ figure { 
		left: 150px; 
	}
	
	.ds-container figcaption span { 
		font-size: 12px; 
		letter-spacing: 2px; 
		padding: 10px; 
		margin-top: -20px; 
	} 
	
	.ds-container input:checked + figcaption span {
		top: 77%; /*placement of title link*/
	}

}

@media screen and (max-width: 320px) {
        .ds-container { 
	        width: 260px; 
	}
	
	.ds-container figure { 
		left: 26px; 
		width: 130px; 
	}
	
	.ds-container input { 
		width: 26px; 
	}
	
	.ds-container input:checked ~ figure { 
		left: 130px; 
	}
	
	.ds-container figcaption span { 
		font-size: 10px; 
		letter-spacing: 2px; 
		padding: 10px; 
		margin-top: -20px; 
	} 
	
	.ds-container input:checked + figcaption span {
		top: 77%; /*placement of title link*/
	}

}

This CSS allows for 6 images/links but you can easily adjust it if you need more or less. Here’s how to do it:

The width is calculated like this: Number of images, minus 1, multiplied by the visible area you want to show, plus the width of the image.

So in my example it is calculated like this: ((6 – 1) * 100) + 500 = 1000. So 5 images (we ignore the first one as it shows by default) each having a 100px wide visible and clickable area with the active image being 500px wide.

The media queries use the same calculation but with smaller values based on the screen size.

And that’s it. Now you have a cool accordion image slider menu for use in your Divi projects.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X