The Responsive jQuery Fixed Flyout Menu

January 07, 2020 No comments jQuery Plugin Social Menu Profiles

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.

Jquery flyout menu for social profiles

2. Plugin Overview

Library jquery-flyout-menu
Author Fabian Lins
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version

Demo

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.

{{ message }}

{{ 'Comments are closed.' | trans }}