jQuery Flyout Menu Plugin for Social Profiles

A respnsive jQuery flyout menu plugin best for displaying social media profile links with icons. The plugin creates fixed drawer on the left / right of the page and fly out (open & close) on click event.


Plugin Overview

Plugin: jquery-flyout-menu
Author: Fabian Lins
Licence: MIT Licence
Published: April 23, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 55 KB

How to Use Flyout Menu Plugin :

1. Load the jQuery and flyout menu JavaScript and CSS files into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- 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">

2. After that, copy the following HTML structure for flyout menu and add your social media’s profiles links into it.

    <!--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/fabianlinscom" 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/channel/UC06Q1IAfyER87DSXKMv6cvw" 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/u/fabianlins" 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>
    </div>
     <!--END!!! This is the END of the menu, do not copy anything which is below this comment.-->

3. To change the position of menu, open the flyout_menu_code.js file in any text editor (code editor) and update the following variable value. Default: “right”, Type: String

flyout_menu_side = "left"; //Possible values are left and right

4. To customize the animation speed, update the following variable. Default: 100, Type: Number

flyout_animation_speed = 100;

5. Update the following variable to adjust the width of flyout menu for the mobile view. Default: “1023px”, Type: String

change_flyout_menu_to_mobile_view = "1023px";

Be the first to comment

Leave a Reply

Your email address will not be published.


*