CSS3 Horizontal Accordion Slider

Transcription

1 CSS3 Horizontal Accordion Slider DOCUMENTATION Webarti October 2, 2010

2 Table of Contents 1. Introduction Description and Features Documentation File Content HTML Structure CSS Files and Structure

3 1. Introduction 1.1 Description This beautiful and user-friendly accordion slider has been built using pure CSS and no JavaScript has been used. It can be used as a gallery (video or image), product tour, portfolio showcase, content slider etc. The item includes 3 ready to use themes and 2 accordion examples. The examples are a video gallery and a simple website. Features: Cross browser support, No JavaScript or images, Easy to customize, 3 Ready to use themes, 2 Accordion examples, JS-like smooth transition effects, Gradient backgrounds without images. 2. Documentation 2.1 File Content Files in the zip: There are two different directories in the zip file: CSS3 Accordion includes 3 ready to use themes. In theme directories, there are only index.html and theme.css Examples directory includes 2 usage examples of accordion slider. These are a Simple Website and a Video Gallery. 2.2 HTML Structure HTML structure of the accordion consists of only a simple unordered list. In each list item there are two elements. One of them is the title of accordion. The span tag is necessary for the text rotation and the URI fragment identifier (the # in the url) is used to know which item was 3

4 clicked. The identifier in the href parameter should target the id of its parent list item. The other element is the content div. The content can be anything like text, headings, lists, images, videos etc. The HTML structure of accordion is shown in Image 2.1. Image 2.1 HTML Structure of accordion slider Adding video (flash object) into the content div: This part is very important for the buyers who want to embed videos or use flash objects in accordion slider. As you know flash objects display on top of all layers regardless of z-index. This means that any video in the slider will always be on top of your other content and slider itself. However the solution is simple. Just add the following parameter inside the object tag of the video (or flash) that you want to embed. <param name="wmode" value="opaque" /> 4

5 If there is an embed tag, you also have to set wmode= opaque in the embed tag. Image 2.2 shows the final code. Image 2.2 Solution for the flash object z-index problem 2.3 CSS Files and Structure First of all, the CSS file of the accordion should be included in the head of your webpage. Be sure that the file path is set correctly. <link href="theme3.css" rel="stylesheet" type="text/css" /> There are three accordion themes in the main file. The construction of the CSS file of each theme is exactly same. These CSS files consist of three parts: Theme Styles, Theme Structure and necessary properties described as Do not change the following properties In Theme Styles part, there are only styling properties such as background-color, bordercolor, font-family etc. You can easly set these styles according to your websites design. Image 2.3 shows the styles of a theme. 5

6 Image 2.3 Theme Styles part of a CSS file The structure of accordion depends on the number of accordion pieces. Because of this, we need to calculate the necessary width and height of the accordion. The first thing to do is to decide the number of accordion pieces. Let s say our slider has 3 pieces. After that we need to set the width, and height (optional padding, border-width etc.) of elements such as title (<a> 6

7 tag) and content (<div> tag). These values depends on the structure of your website. See Image 2.4 for a sample CSS code. Image 2.4 Sample CSS code for the structure of accordion After setting these values, we need to calculate necessary accordion width and height. In our example, width of accordion is equal to 908px and the height is equal to 402px. See Image 2.5. Image 2.5 The result of calculation 7

8 Calculation of the accordion width: The width of accordion refers to the total width of visible components;.accordion>ul>li>div ( width + paddingright + paddingleft + marginright + borderrightwidth + borderleftwidth ) +.accordion>ul>li>a ( number of accordion pieces x ( width + marginrright ) ) width = ( 740px + 30px + 30px + 4px + 1px + 1px ) + ( 3 x ( 30px + 4px ) ) ---See Image 2.4 width = 908px Calculation of the accordion height: The height of the accordion refers to the total height of visible area;.accordion>ul>li>div ( height + paddingtop + paddingbottom + bordertopwidth + borderbottomwidth ) width = 340px + 30px + 30px + 1px +1px --- See Image 2.4 width = 402px Calculation of the list items magrin-right: Finally, we need to set the list items magrin-right property so that the slider works correctly. This value refers to the negative of total width of content div;.accordion>ul>li>div (width + padding-right + padding-left + marginright + borderrightwidth + borderleftwidth ) margin-right = 740px + 30px + 30px + 4px + 1px +1px --- See Image 2.4 margin-right = 806px and it s negative is -806px 8

9 Important Notes: The accordion is fired by :hover pseudo class in IE, because it does not support :target pseudo class Opera does not support gradient backgrounds. Transitions work in Chrome4+, Safari 4+, Opera 10.5+, Firefox 4+ and IE9+ Hope that you like it and feel free to contact us with any questions that might come up. 9