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.
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.
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.
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
450px
290px
290px
290px
210px
210px
210px
210px
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.
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.
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.
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 |
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.
This footer has been tested successfully with the following browsers :
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