Related Posts Slide Out Boxes Menu with jQuery and CSS3

Related Posts Slide Out Boxes Menu with jQuery and CSS3
in jQuery 12 comments
Advertisements
1 Share

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.

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
  • Save
follow us on Twitter
— for recent updates.

Related Posts Slide Out Boxes Menu Preview:

Related Posts Slide Out Boxes Menu with jQuery and CSS3
  • Save

Requirements: jQuery
Compatibility: All Major Browsers
Demo: https://tympanus.net/Tutorials/RelatedPostsSlideOuts/
Download: https://tympanus.net/Tutorials/RelatedPostsSlideOuts/RelatedPostsSlideOuts.zip

Author:
I'm Muhammad Faisal founder of GDJ and co-founder of FPD. I love all things having to do with WordPress, PHP, HTML5, CSS, or jQuery. And really enjoying to writing articles on web design and typography. You can catch me on Twitter, Facebook and Pinterest.

Comments to Related Posts Slide Out Boxes Menu with jQuery and CSS3

Aisha Jul 26, 2010

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.

Tmp-cEo Dec 10, 2013

AMAZiiiiNG!!!! 😉 css is kewl!! thx

Trackbacks to this post.
Leave a Reply

Previous Post
«
Next Post
»
© 2010 - 2023 Graphic Design Junction.
Powered by Wordpress.
1 Share
Share via
Copy link