Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form here. Thanks so much!

Features

Inspired by Envato site-switcher, here is what I came up with, a sticky side panel made with CSS and enhanced greatly with jQuery.

Show on Hover/Click/Dblclick

Set menu to be shown when mouse hover, click, or double-click. In this page, you can see the left one is click and the right one is hover.

Works without JS (CSS Fallback)

Built from ground up, Sticklr is friendly for user having their JavaScript disabled. Although this is an extreme rare case.

Left/Right Side

There is no right placement whether it's right or left. Sometimes it could be both.

Fixed position

Even if you scroll the page, Sticklr will remain in it's place. Sticklr will always follow you in the middle on the side of the page.

Multiple column

Menu can be separated in multiple columns with different title, you only need to make a separate list for each column.

Flexible Styling

Easy to customize the styling right from CSS, that's why it's CSS file is separated from the jQuery script.

Centered Automatically

Sticklr is smartly positioned. Resizing your browser would automatically correct the position itself to center of the browser.

Cross-browser compatible

Sticklr has been tested to work on IE7+, Firefox 3+, Chrome 11+. If you still found a bug, please shoot me an email so I can fix it.

Simple & lightweight

Come with <10KB minified JS+CSS, a fair size for a nice enhancement.

Usage

Document Setup

First you have to include all the required files: the jQuery library, the Sticklr CSS file, and the Sticklr JS file

<!-- include the required CSS -->
<link rel="stylesheet" type="text/css" href="jquery-sticklr-1.4-light-color.css" />
                
<!-- include any version of jQuery before including plugin -->
<script type="text/javascript" src="jquery-1.x.x.min.js"></script>

<!-- include the plugin -->
<script type="text/javascript" src="jquery-sticklr-1.4.min.js"></script>

Then you must have this HTML markup somewhere before closing <body> tag

<ul id="example" class="sticklr">
    <li>
        <a href="#" class="icon-something" title="This is a floated icon"></a>
        <ul>
            <li class="sticklr-title">
                <a href="#">This is a title</a>
            </li>
            <li>
                <a href="http://www.google.com" class="icon-something">This is a link</a>
            </li>
            <li>
                <a href="http://www.facebook.com" class="icon-something">Another link</a>
            </li>
        </ul>
    </li>
</ul>

Thus, some set of rules here are

  • The pattern as general is ul > li > a+ul > li a/form/table
  • It's recommended for the topmost <ul> element having "sticklr" class name, this will ensure CSS fallback.
  • Menu defined in second level <ul> list, so you can make multiple column by adding another <ul> element there
  • To make a link as menu title, add class="sticklr-title" to it's <li> parent
  • To set the icon to a link, simply add icon class name to the <a> element
  • Make sure all elements have proper closing tag to avoid unwanted behavior

Finally, apply Sticklr to that list

<script type="text/javascript">
    $(document).ready(function(){
        $('#example').sticklr();
    }
</script>

Plugin Options

Options Type Default value Description
animate Boolean false Define whether the sticky panel has to be animated when scrolling/resizing browser.
menuHeight Number 20 Define the height size of a column in pixel, default to 20 pixel.
menuWidth Number 180 Define the width size of a column in pixel, default to 180 pixel.
relativeTo String 'center' Define vertical positioning relative to the browser viewport (top/middle/ground), default to center.
relativeGap Number 15 Define the relative gap size in pixel if relativeTo was set to top or bottom.
showOn String 'click' Define event when menu must be shown. Some possible mouse events: 'hover', 'click', 'dblclick'.
stickTo String 'left' Define placement position whether to left or right side.
tabHeight Number 16 Define the height size of the tab, default to 16px
tabWidth Number 16 Define the width size of the tab, default to 16px

To override default value, you can pass the custom values when initialize. You don't have to pass all, just specific properties you need.

$('#example').sticklr({
    animate     : true,
    menuHeight  : 20,
    menuWidth   : 200,
    relativeTo  : 'top',
    relativeGap : 10,
    showOn      : 'hover',
    stickTo     : 'right',
    tabHeight   : 64,
    tabWidth    : 32
});

Public Method

Sticklr provide public method to hide the current active shown menu with sticklr('hide'), for example if you want to hide all shown menu when an event occured you can use

$().sticklr('hide');

Custom Icon

To define an icon class name you have to dive into CSS file, then add class like example below in the bottom of the file

.icon-twitter {
    background-image: url('images/twitter.png');
}

The image for icon must be a PNG/GIF/JPG with the same size as your defined size (or by default it's 16x16 pixel). In the example above we can see the twitter icon is in /images folder relative to the CSS file.

Credits

  • Some icons used here are from icondock and pc.de which licensed under CreativeCommons.

Thanks

Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the script on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

-amatyr4n