Submit your widget
HomeMenu & NavigationKwicks accordion menu for jQuery

Kwicks accordion menu for jQuery

Created 14 years ago   Views 27136   downloads 5383    Author n/a
Kwicks accordion menu for jQuery
View DemoDownload
157
Share |

Default CSS

Note that all of the examples on this page are using this as their default stylesheet 

/* defaults for all examples */
.kwicks {
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}
.kwicks li{
 display: block;
 overflow: hidden;
 padding: 0;
 cursor: pointer;
}

 

Each example has additional styling that is unique to that particular Kwicks instance. If you are going to try out any of the examples, make sure you include these styles as well.

True to Kwick's origins, here's an example that mimics the original effect on the Mootools homepage.

The HTML

<ul class="kwicks" >
 <li id="kwick1"></li>
 <li id="kwick2"></li>
 <li id="kwick3"></li>
 <li id="kwick4"></li>
</ul>

The CSS

.kwicks li{
 float: left;
 width: 125px;
 height: 100px;
 margin-right: 5px;
}
#kwick1 { 
 background-color: #53b388;
 background-image: url('images/meet.gif');
}
#kwick2 {
 background-color: #5a69a9;
 background-image: url('images/kwicks.gif');
}
#kwick3 {
 background-color: #c26468;
 background-image: url('images/for.gif');
}
#kwick4 { 
 background-color: #bf7cc7;
 background-image: url('images/jquery.gif');
 margin-right: none;
}

 

The JavaScript

$().ready(function() {
 $('.kwicks').kwicks({
  max : 205,
  spacing : 5
 });
});

You might also like