Themeforest

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

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags

Social Network Tabs
WordPress Social Stream Plugin
Top Social Share Posts Plugin
jQuery Social Share Buttons Plugin
Theme Forest