jQuery Slick Plugin

Getting Started

For the WordPress plugin version please see the
Slick Menu plugin project page.

The jQuery slick plugin can also be seen in action on our WordPress Contact Form Plugin.

Overview

The jQuery Slick Plugin creates sticky, sliding tabs from any static content. Ideal for adding sticky navigation or forms to any website.

The plugin has several features, including:

Multiple slick tabs per page
Set the exact location of slide out tab using a combination of “location” and “offset”
Set the text for the slick tabs
Toggle the tab open/closed via external links
Option to have the tab open on page load

Also Check Out Our Premium jQuery Plugins:

Quick Start

1. The HTML

Take any HTML content and wrap it in a div tag with an ID:

<div id="slick-1">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Terms &amp; Conditions</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

The contents of the div tag will be inserted into the slick tab.

2. Include the jQuery Slick Plugin

<script type='text/javascript' src='js/jquery.slick.2.1.js'></script>

3. The CSS

There are a few CSS rules, which are required to make the slick content work. The CSS below gives the basic styling requirements for all locations:

.dc-slick {
width: 260px; /* Required to limit width of slick content */
background: #333;
padding: 20px;
font-family: Arial;
}
.dc-slick .dc-slick-content {
overflow: auto; /* Required for content that may exceed browser width/height */
color: #fff;
}
/* Positioning of slick content */
.dc-slick.top  {
top: 0;
}
.dc-slick.right  {
right: 0;
}
.dc-slick.bottom  {
bottom: 0;
}
.dc-slick.left  {
left: 0;
}
/* Positioning for tab and alignment */
.dc-slick .tab {
cursor: pointer;
font-size: 12px;
line-height: 12px;
background: #333;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dc-slick, .dc-slick .tab {
border: 3px solid #ccc;
}
.dc-slick.right .tab, .dc-slick.left .tab {
top: 0;
}
.dc-slick.top .tab {
bottom: 3px; /* Set to same width as border */
}
.dc-slick.top, .dc-slick.top .tab {
border-top: none;
}
.dc-slick.right .tab {
left: 3px; /* Set to same width as border */
margin-top: -3px;
}
.dc-slick.right, .dc-slick.right .tab {
border-right: none;
}
.dc-slick.bottom .tab {
top: 3px;
}
.dc-slick.bottom, .dc-slick.bottom .tab {
border-bottom: none;
}
.dc-slick.left .tab {
right: 3px; /* Set to same width as border */
margin-top: -3px;
}
.dc-slick.left, .dc-slick.left .tab {
border-left: none;
}

.dc-slick.align-right .tab {
margin-right: -3px; /* Set to same width as border */
}
.dc-slick.align-left .tab {
margin-left: -3px; /* Set to same width as border */
}

4. Initialise The Slick Plugin

The plugin can be quickly and easily initialised using the default options by adding the following code to the head of your document, where #slick is the ID of the div tag wrapping the content you want to include inside the slick tab:

jQuery(document).ready(function($) {
    $('#slick').dcSlick();
});

1 Comment

jQuery & WordPress Slick Flyout Menu Plugins | ChurchMag May 14, 2012 at 4:00 pm

[...] the plugins and demo it on the jQuery Slick demo page, but you might want to start here. [...]

Reply