Animated Hidden Sidebar
This is a simple and minimal hidden sidebar with animation when opened. Also this sidebar is fully responsive and looks good on mobile devices. The sidebar is great for displaying menus, widgets, or other additional content on your site. A live preview demo of the sidebar is available here: Animated Hidden Sidebar - Demo. Demonstration in Cyrillic (Russian language): Cyrillic Demo.
The project uses the following colors:
- Body bg: #ffffff
- Content 1: #2a2b35
- Content 2: #474856
- Hover color: #757bda
- Gray colors: #f5f5f9 / #f3f3f6
Image sizes:
- Original: 750x500px
- Recommended size: 1500x1000px
Google fonts:
- Merriweather: serif; Weights: 400, 400 italic, 700, 700 italic. Link: Merriweather
- Montserrat: sans-serif; Weights: 600, 600 italic, 700, 700 italic. Link: Montserrat
I also use the "mw-" prefix for CSS classes and IDs. This should make it easier to add this sidebar to your project, as using the extra prefix reduces the chance of conflicts with your project's code.
- jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
- normalize.css: A modern alternative to CSS resets.
- Font Awesome Free: Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
- Google Fonts: Merriweather, Montserrat.
- Unsplash.com: The internet's source of freely-usable images. Powered by creators everywhere.
Thank you for your interest!