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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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>
  <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>

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.

use_flyout_menu_to_mobile_view=false;

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.

change_flyout_menu_to_mobile_view="1023px";

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

flyout_menu_side="right";

6. Customize the animation speed.

// Change this variable to adjust the speed of the expanding or shrinking of the panel.
flyout_animation_speed=100;

// Change this variable to adjust the speed when you scroll to the same page.
flyout_menu_scroll_speed=500;

Changelog:

2019-04-21

• JS update

---

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