Community Forums › Forums › Archived Forums › Design Tips and Tricks › Accordian Slider
This topic is: resolved
- This topic has 1 reply, 2 voices, and was last updated 9 years, 8 months ago by Susan.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
July 27, 2014 at 12:30 pm #115473jenglish647Member
If anybody out there can help with this I would greatly appreciate it. So I've got some code to add that will create an accordion type slider. The html is:
&lt;!DOCTYPE html&gt; &lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8]&gt; &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="description" content=""&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;link rel="stylesheet" href="_css/main.css"&gt; &lt;/head&gt; &lt;div class="accordian"&gt; <ul> <li> &lt;div class="image_title"&gt; <a href="#">IMG 1</a> &lt;/div&gt; <a href="#"> <img src="_img/mountain_1.jpg" /> </a> </li> <li> &lt;div class="image_title"&gt; <a href="#">IMG 2</a> &lt;/div&gt; <a href="#"> <img src="_img/mountain_2.jpg" /> </a> </li> <li> &lt;div class="image_title"&gt; <a href="#">IMG 3</a> &lt;/div&gt; <a href="#"> <img src="_img/mountain_3.jpg" /> </a> </li> </ul> &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;
AND the CSS is this:
/*Now the styles*/ * { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image = 640px total images = 5 so width of hovered image = 640px width of un-hovered image = 40px - you can set this to anything so total container width = 640 + 40*4 = 800px; default width = 800/5 = 160px; */ .accordian { width: 805px; height: 320px; overflow: hidden; /*Time for some styling*/ margin: 100px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; /*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/ } .accordian li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*If you hover on the images now you should be able to see the basic accordian*/ } /*Reduce with of un-hovered elements*/ .accordian ul:hover li {width: 40px;} /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover {width: 640px;} .accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 20px; font-size: 16px; }
I put the html into the simple hooks plugin under the header and then added the css to the main stylesheet but something went wrong.
Any ideas? GREATLY appreciated.
August 10, 2014 at 10:15 am #118077SusanModeratorClosing this, as you have marked it as "resolved". Go ahead and create a new post if you are still having issues.
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The topic ‘Accordian Slider’ is closed to new replies.