Accordion Image Slider Menu

by | Mar 11, 2016 | CSS Tips & Tricks, Headers and Sliders, Images, Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Accordion Image Slider Menu

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

Accordion Image Slider Menu tutorial for Divi

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 .

Accordion Image Slider Menu tutorial for Divi

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="http://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="http://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="http://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="http://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="http://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="http://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>

ย 
Accordion Image Slider Menu tutorial for Divi

 

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!