jQuery Flyout Menu Plugin for Social Profiles

jQuery Flyout Menu Plugin
Code Snippet:jquery-flyout-menu
Author: Fabian Lins
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 2,800
License: MIT
Edit Code online: View on CodePen
Read More

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...