Community Forums › Forums › Archived Forums › Design Tips and Tricks › Accordion Slider CSS issues
This topic is: resolved
Tagged: accordion slider, inserting css
- This topic has 2 replies, 2 voices, and was last updated 9 years, 8 months ago by jenglish647.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
July 27, 2014 at 12:30 pm #115474jenglish647Member
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.
July 27, 2014 at 1:06 pm #116011DTHkellyMemberLooks complicated.
An alternative:
http://codecanyon.net/item/accordion-slider-responsive-wordpress-plugin/7341927August 5, 2014 at 9:34 pm #117250jenglish647Memberthanks 🙂
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- The topic ‘Accordion Slider CSS issues’ is closed to new replies.