1. Introduction
jquery-flyout-menu is a responsive jQuery flyout menu plugin for displaying social media icons with links to your account. The plugin creates the right/left side panel that can be opened and closed on click.
2. Plugin Overview
Library | jquery-flyout-menu |
Author | Fabian Lins |
Licence | MIT Licence |
Repository | GitHub |
Dependencies | jQuery 1.3.1 or Latest version |
3. How to install and use jquery-flyout-menu jQuery plugin
Follow the below steps to install jquery-flyout-menu jQuery plugin on your website.
3.1. Include the latest version of jQuery library:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
3.2. Add jquery-flyout-menu assets:
<!-- Flyout Menu Js -->
<script type="text/javascript" src="js/flyout_menu_code.js"></script>
<!-- Flyout Menu CSS -->
<link rel="stylesheet" href="css/flyout_menu_style.css">
3.3. Create social menu structure:
<!--START!!! This is START of the menu, you need to copy this part into the body tag of your html document.-->
<div id="flyout_menu" class="social_media_margin_pseudo hide_flyout_menu_onload">
<div class="arrow_menu pointer arrow_menu_right">
<div tabindex="0" class="arrow_menu_triangle triangle_left"></div>
</div>
<div id="social_media_icon_flyout_parent">
<!--IMPORTANT! Don't change anything above this comment.-->
<!--You need to change the HTML here. But keep the structure as it is.-->
<div class="flyout_menu_row">
<a href="https://www.instagram.com" class="social_media_icon_flyout pointer"><img src="img/social_media_icons/instagram_logo.png" class="social_media_icon_flyout_img" alt="Instagram"></a>
<a href="https://www.facebook.com" class="social_media_icon_flyout pointer"><img src="img/social_media_icons/facebook_logo.png" class="social_media_icon_flyout_img" alt="Facebook"></a>
</div>
<div class="flyout_menu_row">
<a href="https://www.youtube.com" class="social_media_icon_flyout pointer"><img src="img/social_media_icons/youtube_logo.png" class="social_media_icon_flyout_img" alt="YouTube"></a>
<a href="https://www.reddit.com" class="social_media_icon_flyout pointer"><img src="img/social_media_icons/reddit_logo.png" class="social_media_icon_flyout_img" alt="Reddit"></a>
</div>
<div class="flyout_menu_row">
<p class="text_flyout opacity_transition"><a class="flyout_text_a" href="#legal_disclosure">Legal Disclosure</a></p>
</div>
</div>
<!--IMPORTANT! Don't change anything below this comment.-->
<div class="arrow_menu pointer arrow_menu_left">
<div tabindex="0" class="arrow_menu_triangle triangle_right"></div>
</div>
</div>
4. Conclusion
In this article, we presented jquery-flyout-menu jQuery plugin that allows you to create animated panels with your social profiles. The plugin is easy to customize and comes with a lot of features.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}