Images ~ Text ~ Nav Menus ~ Photos
Peek a boo sliders is a fun way to show and hide images, text, and slider nav bars on your webpage.
1. Simply include 'peekaboo.js' in your scripts folder, and link to it in the <head> of your index.html file.
2. Peekaboo.js builds upon the jQuery UI library, so please be sure to add the following 3 scripts to your index.html page:
".toggle-up" - the slider goes down and then [UP] or
".toggle-right" - the slider goes to the left and then [RIGHT] or
".toggle-down" - the slider goes up and then [DOWN] or
".toggle-left" - the slider goes right and then [LEFT]
to the HTML element you would like to use as your trigger. It can be an image, text, a div, or a link.
3. Make sure to add a class of ".slider" + ".slider-[direction] to the menu, image, or text block you would like to hide and then slide onto the page. Again, I used a div, but you can put it on any tag in your html.
4. Download the Plugin here: Peekaboo.zip (1kb)
♥ Hope you enjoy the plugin as much as I enjoyed making it! ♥
In the meantime, keep clicking! : )