jQuery Sticky Footer

Awesome jQuery-Powered Footer !

You can use any of the 6 included jQuery effects to show the content, it can be on mouse hover or on click, with 3 different transitions : fade, slide or toggle. There's also an option to show the footer when the page loads and hide it after a delay. This option can be disabled.

On the right, there's a set of social icons showing a simple tooltip on mouse hover. You can add your owns and link to your social networks profiles if you wish.

There is also a full set of typography examples included to help you using this footer. Many elements are styled and ready to be used like headers, lists, paragraphs with icons or borders, this dark box, tables and images ! All of these elements are styled in the CSS, you just have to use the corresponding class in your HTML and this footer comes with a lot of examples ready for the copy and paste if you're not familiar enough with HTML / CSS.

Texts with Icons

This is a paragraph with a calendar icon. Curabitur lorem nulla, imperdiet.

This is a paragraph with a note icon. Praesent id nulla eu risus rhoncus.

This is a paragraph with a archive icon. Ut pulvinar mauris at nunc.

This is a paragraph with a search icon. Nulla tincidunt, purus at luctus.

This is a paragraph with a help icon. Vestibulum venenatis diam sit amet.

Other Examples

This is a paragraph with a delete icon. Quisque at metus a libero sodales.

This is a paragraph with a favorite icon. Donec tortor sem, venenatis.

This is a paragraph with a lock icon. Vivamus eu felis lacus, in tincidunt.

This is a paragraph with a briefcase icon. Cras sagittis, tortor at.

This is a paragraph with a user icon. Mauris quis augue lectus, eget congue.

Columns

Up to 12 columns !

With this powerful grid, you can easily build your own footer and organize all your content into columns ! Once you've choosen the right container (see in the CSS the section number 2 - Drop-up Containers), use the different column sizes and add your stuff quickly !

930px

850px

50px

770px

130px

690px

210px

610px

290px

530px

370px

450px

290px

210px

Images

Sample paragraph with an image

Aenean sagittis dictum purus, mollis consectetur ligula sodales sed. Mauris nec mauris sed mi tempor ornare eget iaculis. Sed condimentum faucibus turpis sed cursus. Ut pharetra bibendum lorem, sagittis mollis nisi eleifend nec.

Nam placerat, nulla vel placerat adipiscing, arcu lorem tincidunt nibh, eget iaculis quam lectus aliquet enim. Nam nec est purus. Vestibulum nec lectus et quam tempor vulputate vitae eget risus. Vivamus id mauris quis odio hendrerit semper. Aliquam dapibus sem ac arcu bibendum.

Another paragraph with an image

Nam placerat, nulla vel placerat adipiscing, arcu lorem tincidunt nibh, eget iaculis quam lectus aliquet enim. Vivamus id mauris quis odio hendrerit semper. Aliquam dapibus sem ac arcu bibendum.

Aenean sagittis dictum purus, mollis consectetur ligula sodales sed. Mauris nec mauris sed mi tempor ornare eget iaculis quam lectus aliquet enim. Nam nec est purus.. Sed condimentum faucibus turpis sed cursus. Ut pharetra bibendum lorem, sagittis mollis nisi eleifend nec.

Texts, Tables & Lists

Additional Lists

Quisque elit est, ullamcorper ac hendrerit eget, porta id enim. Phasellus in velit velit.

Ut ac turpis ipsum. Mauris leo nulla, vestibulum id bibendum nec, auctor eu quam.

Quisque elit est, ullamcorper ac hendrerit eget, porta id enim. Phasellus in velit velit.

Curabitur vulputate, massa sit amet mollis sodales, arcu quam scelerisque augue.

Quisque varius, erat nec fermentum aliquam, erat urna venenatis orci ligula eget.

Vestibulum sed elit ut arcu. Donec leo dui, mollis ut volutpat et, suscipit a mauris.

This is a dark table

Mauris nec mauris sed mi tempor ornare eget iaculis quam lectus aliquet enim. Nam nec est purus.. Sed condimentum faucibus turpis sed cursus. Ut pharetra bibendum lorem, sagittis mollis nisi eleifend nec.

Title 1	Title 2	Title 3	Title 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4

Sticky Footer

This Sticky Footer can contain any kind of content and is ready to be used in your website. You can build your own menu and use from 1 to 12 columns to display your content.

It degrades gracefully if Javascript is disabled, the jQuery effects are used for enhancements only. It comes in two variants : a fixed width to fit your layout width and a full width taking the whole viewport width.

Features

Fixed or Full Width
jQuery Enhancements
Degrades gracefully if Javascript is disabled
Easy to customize
CSS3 enhancements
From 1 up to 12 Columns
Lots of typography Examples (headings, lists, tables, etc.)
Help Documentation
Cross Browser Support
Valid HTML / CSS Markup

Compatibility

This footer has been tested successfully with the following browsers :

Internet Explorer 7+
Firefox 3+
Safari 4+
Chrome 4+
Opera 10+

Support and Updates

Feel free to contact me at any time if you have questions by using the contact form of my profile page. Please keep in mind that once purchased, I provide support for free but customizations are a paid service (adding some functionnality, tweaking the menu, etc.). Support questions sent via any other way won't be answered.

I try to regularly update my products based on the feedback I receive, so if you find any kind of bug, I'll do my best to update the menu as soon as possible. If you have an idea that could improve it, feel also free to ask me, some customization questions happened to be the starting point of an update.

Thanks for reading !

Pixelworkshop