Related Posts Slide Out Boxes Menu with jQuery and CSS3
Today we will create a very useful element for showing related posts slide out boxes menus in a blog or website. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
You may be interested in the following modern trends related articles as well.
- Catch404 – jQuery Plugin For Handling Broken Links Smartly
- Full Page Background Image Navigation (Slide Effect) with jQuery
- 75+ jQuery Plugins: Download Powerful and Elegent jQuery Plugins & Tutorials
- Download jQuery MegaMenu 2 Plugin
- jQuery Validity Elegant and Powerful jQuery Plugin
- AviaSlider jQuery Slideshow Plugin for Your Next Project
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.
Don’t forget to
subscribe to our RSS-feed and
follow us on Twitter — for recent updates.
Related Posts Slide Out Boxes Menu Preview:
Requirements: jQuery
Compatibility: All Major Browsers
Demo: http://tympanus.net/Tutorials/RelatedPostsSlideOuts/
Download: http://tympanus.net/Tutorials/RelatedPostsSlideOuts/RelatedPostsSlideOuts.zip
Enjoyed this post?
Please share and spread the love.
Author: Muhammad Faisal
Muhammad Faisal is the founder of GraphicDesignJunction, I m blogging since few year's, Love to wirting articles on photography, icons, showcase and specially typography. You can follow me on Twitter & checkout my Facebook Fan Page
Related Posts
11 Comments
- Tweets that mention Related Posts Slide Out Boxes Menu with jQuery and CSS3 | jQuery | Graphic Design Junction -- Topsy.com
- Related Posts Slide Out Boxes Menu with jQuery and CSS3 | jQuery … | Josh Graphic Designs
- Related Posts Slide Out Boxes Menu with jQuery and CSS3 | jQuery … | IT News
- C' is a man déjÅ. | Canine diabetes Blog
- RocketBar jQuery And CSS3 “Stay On Top” Navigation Menu – Free Download | jQuery | Graphic Design Junction
- jQuery examples
- Amazing Standalone Image Slider With Awesome Effects | jQuery | Graphic Design Junction
- 20 jQuery Plugins You Have To Know | jQuery | Graphic Design Junction
- 10 Useful jQuery Plugins For Designers | jQuery | Graphic Design Junction
- jQuery Content Slider: FlexSlider | U.Ground
404 Error Pages – 26 Awe-inspiring Designsin Inspiration
15 Unique Motivational Postersin Design
25 Amazing Illustration Of Comic Book Charactersin Design
25 Creative Corporate Logos Designin Logos
12 Latest Free Fontsin Fonts
750 UI Design Vector Icons Packin Icons
25 Awesome Catalog Designin Design
Classic Social Media Icons PSDin Icons
Typography Posters: 30 Creative Poster Designsin Typography
Logo Design: 50+ Fresh & Creative Logosin Logos
Free Weather Icons For Web & Mobile Apps In PSD & AI (EPS)in Icons
Free Fonts: 50 Professional Fonts For Designersin Fonts
50 Beautiful Coffee Mug Illustrationin Design
2:19 pm
One of the best CSS showcase site , What a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.