User Interface Techniques: May 2011

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.

HOW TO USE:
Put this code in <head> tag:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>

Now, the menu HTML needs to be as follows:

<div id="menu">

   <ul>

      <li><a href="[LINK]">

         <img src="[IMG]" alt="[TITLE]" />

      </a></li>

      <!-- more menu items -->

   </ul>

</div>

Note The alt attribute of the image will be used as title when the user hovers the image.

When that's all set, you can execute the following JavaScript statement to enable the plugin on the just created menu:

$("#menu").jSlickmenu();

OPTIONS:
speed - Any of the jQuery speed values. Speed for the animation when hovering.
fadeopacity - Any of the jQuery opacity values. Opacity of the siblings when hovering.
infomargin - Integer. Margin (in px) for the infobox to appear above the image.
leftmargin - Integer. Margin (in px) for the menu items seperated from each other.
css3rotate - Boolean. Whether the menu items should be rotated using CSS3.
css3shadow - String. The CSS3 box-shadow property.
css3borderradius - Integer. The size of the border radius property.
borderneutral - Integer. Width of the border size in px when the user is not hovering.
borderhover - Integer. Width of the border size in px when the user is hovering.

VIEW DEMO
DOWNLOAD

Now you can build a horizontal accordion just by using CSS3 transition effects, and filters for IE. We will continue to use ":hover" instead of ":target" pseudo class to cater Internet Explorer and other usability issues.

Accordion Markup

<div class="horizontalaccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>
Note:
* Each "li" element inside unordered list represents a panel
* Each "h3" element inside a list item represents panel head
* Each "div" element inside a list item represents panel content

Styling Accordion Structure

.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}

.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 300px;

/* Decorative CSS */
background:#f0f0f0;
}

.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:280px;

/* Decorative CSS */
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;

/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px); /* FF3.5+ */
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px); /* Opera 10.5 */
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px); /* Saf3.1+, Chrome */
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */

}

.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-40px;
left:40px;
*top:0px; /* IE7 Hack */
*left:0px; /* IE7 Hack */
margin:0;
width:320px;
height:280px;
padding:10px;
}
Note:
*Child Combinators
I have purposely used child combinators to make sure that CSS applies only to the elements used in creating accordion structure and not inherited by elements that are used in accordion content.
*Default State: Panels
Since we are not using ":target" pseudo class, we are not able to specify accordion’s state. That’s why we have to set all panels in collapsed state by default. This is done by setting width of "li" equal to the height (which becomes width after rotation) of "h3" elements (i.e., total width of each panel is equal to the width of its head).
*Panel Head
This is the trickiest part of horizontal accordion. Note that height specified here will become width and width will become height after rotating the panel head. So the total height (which will become width after transform) of "h3" element is calculated by adding height, padding-top, padding-bottom and height of the border (if any). Transformation is done using CSS3 transform property and filter for Internet Explorer. In addition to rotating the h3 element, we are also adjusting its position using "translate" so that panel’s content area will adjust its position accordingly.
*Panel Content
For panel content "div", you may want to note that overflow is set to "auto". This will add scrolling bar(s) if content doesn’t fit inside the content area. Total width (width + padding-left + padding-right) of the content area is determined by using this formula: accordion-width - (number-of-panels x width-of-panel-head). Also note that we have to keep content panel’s position relative to its head (i.e., "h3" element) and adjust the position here as well. Since Internet Explorer 7’s behavior during transformations is different from other browsers, I have used a little hack to accommodate its position.

Styling Accordion Behavior

.horizontalaccordion>ul>li:hover {

    overflow: hidden;

    width: 380px;

}

.horizontalaccordion:hover>ul>li:hover>div {

    display:block;

}

.horizontalaccordion:hover>ul>li:hover>h3 {

    /* Decorative CSS */

    color:#fff;

    background:#000000;

}

.horizontalaccordion>ul>li>h3:hover {

        cursor:pointer;

}

Note:

*Opening Panel With Hover
In order to add behavior to our accordion – all we need to do is increase width of the Panel ("li" element) when mouse is moved over it. Panel width is determined by using this formula: accordion-width – ((number-of-panels – 1) x width-of-panel-head). We also need to "display" content panel’s as "block" when mouse is moved its head.
*Highlighting Current Panel Head
We have highlighted current or open panel by changing the background property of the "h3" element when mouse moves over "li". It is important to do this on "li:hover" instead of "h3:hover", because you want to highlight panel head even mouse is hovering over its content.
*Changing Mouse Pointer
Since we are not using anchors, we have changed mouse pointer using CSS when mouse hovers over "h3" element.

Adding Transition Effect

transition: width 0.3s ease-in-out;

-moz-transition: width 0.3s ease-in-out;

-webkit-transition: width 0.3s ease-in-out;

-o-transition: width 0.3s ease-in-out;

VIEW DEMO
DOWNLOAD

pxfont-size	emequivalent	* Roundedto 3dp	1pxin ems	Notes
11	0.689	*	0.091
12	0.750		0.083
13	0.814	*	0.077
14	0.875		0.071
15	0.938	*	0.067
16	1.000		0.063	Browser standard default
17	1.064	*	0.059
18	1.125		0.056
19	1.188	*	0.053
20	1.250		0.050
21	1.313	*	0.048
22	1.375		0.046
23	1.438	*	0.044
24	1.500		0.042
25	1.563	*	0.040
26	1.625		0.039
27	1.688	*	0.037
28	1.750		0.036
29	1.813	*	0.035
30	1.875		0.033

User Interface Techniques

GA+Mnet

May 26, 2011

jSlickmenu: jQuery plugin using CSS3

May 12, 2011

Horizontal accordion using CSS3 (Cross browser)

May 4, 2011

Difference between pixel and em (px vs em)

Test post after a long time

Search This Blog