Fixed Sliding Side Panel Plugin For jQuery - flyout_menu.js

File Size: 53.7 KB
Views Total: 2470
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fixed Sliding Side Panel Plugin For jQuery - flyout_menu.js

flyout_menu.js is a jQuery plugin to create a floating side tab that reveals a side panel sliding from the right or left of the screen when toggled.

Fully responsive and mobile-friendly. Ideal for side navigation social share links.

How to use it:

1. To get started, include the jQuery flyout_menu.js script and other required resources on the webpage.

<link rel="stylesheet" href="css/flyout_menu_style.css" />
<script src="" 
<script src="js/flyout_menu_code.js"></script>

2. The required HTML structure for the side panel. In this example, we're going to create a side panel containing several social share links.

<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 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="" 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="" 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 class="flyout_menu_row">
      <a href="" 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="" 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 class="flyout_menu_row">
      <p class="text_flyout opacity_transition"><a class="flyout_text_a" href="#legal_disclosure">Legal Disclosure</a></p>
      <!--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>

3. Enable/disable the mobile view. Change the following variable to true or false (no quotation marks) to scale the icons with the --image_flyout_scaling_mobile variable in the flyout_menu_style.css file. Using false works pretty well. Only change it if you would like to have a different scaling for the mobile icons.


4. Change the following variable to adjust the width for the mobile view. Make sure you keep the qutation marks and px - for example: "1023px". You need to set the use_flyout_menu_to_mobile_view variablecode> to true to make use of this variable.


5. Set the position of the side panel. Change the following variable to either "right" or "left".


6. Customize the animation speed.

// Change this variable to adjust the speed of the expanding or shrinking of the panel.

// Change this variable to adjust the speed when you scroll to the same page.



This awesome jQuery plugin is developed by FabianLins. For more Advanced Usages, please check the demo page or visit the official website.