jQuery Flyout Menu Plugin for Social Profiles

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

How to Create Flyout Menu

1. Load the jQuery and flyout menu JavaScript and CSS files into an 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 the flyout menu and add your social media profile links to 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 the 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 the flyout menu for the mobile view. Default: “1023px”, Type: String

change_flyout_menu_to_mobile_view = "1023px";

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.