Pushy Panes is a highly versatile tool which allows users to add slide-in panels to any website. The pane content is completely customizable, allowing for supreme versatility - create panes for nav, menus, tooltips, contact areas, hidden footers/headers and more.
Support for multiple instances means you can utilize panes for several unique purposes on the same page. A full compliment of options allow for custom control of pane size (any size you like - all the way up to full screen), blur/color overlay, transition speed, and cover/push content settings.
Widget Compatibility: Limited (known to cause issues when combined with some widgets)
Current Version: 2.1
Supported Devices: Desktop, Tablet, Phone
Release Log
2.1: Fixed bug causing widget to break when images were placed into the pane (03/21/2018)
2.0 Beta: Complete ground-up rebuild of the widget to improve performance and stability
1.2: Added pixel-based width setting in addition to percentage-based width, improving performance on mobile (12/09/2016)
1.1: Fixed button and elements disappearing when crossing breakpoints, fixed pages going blank when crossing breakpoints (03/11/2016)
1.0: Adds collapsible panel functionality and support for responsive Muse
L11.3: Improved widget performance when used with forms (11/13/2015)
Setup
Drag the widget from the library and drop into your project in Design mode. You can preview immediately to see basic functionality since we packaged the widget with graphic styles already applied.
The widget contains 3 components: The content pane (the largest component), a custom open button, and the widget itself. The content pane may be placed out of the way off canvas since it won't be seen until the pane is triggered.
We'll discuss the open button in greater detail later, but make note that the included custom open button may be deleted if you wish to use the default animated open button instead.
CONTENT PANE
The content pane is the "content" area of your Pushy Pane. Update this area with your content, such as site navigation. The content pane included in the widget may be updated as needed, with your own content. You may also delete the included content pane and create your own from scratch.
One thing to note... The state button was intentionally built to trigger the hover state of all elements within the state button container at the same time. So for example, if text based navigation links are placed in the state button, they will all show the hover state when hovering over any part of the state button. This behavior can be avoided by using individual state buttons within the main state button. This way, individual text elements retain hover and mouse down states.
Add the content to the content pane as you would like, including text boxes, images, etc. Remember to place elements inside individual state buttons to retain individual hover states.
When you're done editing the content pane, apply a graphic style to it.
Define the graphic style name in the Pane Content Graphic Style field in the widget option panel.
Pane Transition Style: This setting allows for push and cover transition styles.
Pane Transition Direction: Determines the direction from whic the pane will open
Pane Transition Easing: Offers many easing options for the opening and closing of the pane.
Pane Width Unit: Provides the option of percentage or pixel based width and height settings. This setting applies to the setting below.
Pane Width (and Height): These settings determine the width [and height when using 'Pane Height'] of the pane. In most cases, we would suggest using percentage based settings. These settings work as you would expect, with 100% width being a full screen pane.
To create full screen panes as seen in our Versa Slide widget, use the 100% pane width setting
Pane Background Color: This setting sets the background color of the pane. Keep in mind that this setting applies to the entire pane background. The content pane (state button described above) may have it's own background fill color or image, separate from the pane background color set here.
Pane Content Position (Within Pane): This setting determines where the content pane will sit within the pane. If you imagine a large display screen showing a 75% width pane, there will be a lot of space for content. This setting anchors your content box to a specified area. For example, if you had a narrow sidebar navigation pane opening from the left, you might want to place your content position Middle Right so that the text is shown on the leading edge of the pane.
Something to keep in mind when it comes to content positioning is that there is a lot of variability here. The size of your content box, the content within, and it's position setting can all be adjusted to achive very finely tuned results. You may need to expirement with these things to get the look and placement you're after.
Overlay Settings: The Overlay Type, Color, Opacity, Blur Opacity, and Overlay Initialization Duration settings all apply to the overlay that appears behind the pane. You may use a color overlay or a blur, and adjust as needed using these.
Enter Full Width Mobile Mode: This setting provides a great solution for mobile panes. Panes below the pixel width entered here will be displayed at full width, regardless of the setting used on desktop and tablet sizes.
Display External Page In Pane: This is a new feature to Pushy Panes, and is pretty cool. Enabling this option allows you to display a separate web page within the pane. While external pages may be used in this circumstance, we suggest using internal pages. Internal Pane URL links should look something like "about.html".
You may notice that links within your content pane do not make the "hand" icon when hovering over link text. This is normal when text links are not yet linked. Linking these text elements will properly enable hand icons.
OPEN BUTTON
Open Button Type: offers the option of default and custom open buttons:
Default: An animated button that automatically acts as a close button when the pane is opened.
Custom: Allows you to use a custom created open button. Note that when using a custom open button, you will also need a close button.
Custom Open Button:If you would like to use a custom button, simply update the existing custom open button styling as you would like. Once done styling, be sure to update the graphic style via the graphic panel.
Default Open Button: The default button option will place an open button when the site is previewed or published. Style the default button using the styling options.
Default Open Button Position Type: This option allows you to place the open button using several preset positions, using the Default Open Button Preset Position setting below.
Manual positioning is set using the last two settings in this section. Use percentage based settings to determine location from the top of the browser and from the left. So for example, if you wished to manually place the default button in the top right of a page, you would use settings like 5% from top and 95% from left.
CLOSE BUTTON
Close Button Type: This setting, like the open button, allows you to use either a default or custom close button.
Default Close Button: The default close button is a standard "X". When the default option is selected, use the style controls just below the close button type dropdown. The positioning is controlled using the bottom two positioning options in this setting.
Custom Close Button: You may create your own close button using the custom option. To use a custom close button, create it in Muse and apply a graphic style to it. Then define the graphic style name in the Custom Close Button Graphic Style field. Similarly to the text based navigation links discussed above, it is best to place the close button inside of a state button. Once your close button is ready, place it within the content pane state button.
Finally, use the positioning settings in the bottom of this section to set the positioning for the custom close button.
Regardless of whether you use a custom or default close button, you will use the Close Button Positioning settings to position its location
Multitple Pushy Panes may be used on the same page, and set to open in different directions
Commonly Asked Questions
Why does every line of text in my Pushy Pane menu transition to the text rollover state color at the same time when I'm just hovering over one line of text?
State buttons are purposefully designed to trigger everything placed inside of them at the same time. This means that any time you hover over a state button, you will transition every element within into its rollover state. An easy way to avoid this is to use state buttons for your individual lines of text, linked buttons, or menu items. When a state button is placed inside of a state button, the inner button is not triggered by the state button in which it is placed. So put simply, if you are going to create for example, "home", "about", and "contact" buttons in your child pane, create the buttons using separate state buttons instead of text boxes.
Known Issues/Conflicts
This is a powerful widget that takes control of page positioning, and may conflict with other fullscreen or location-specific elements. We do not recommend combining it with Versa Slide, Presentation Panels, Fullscreen Thumbnail Gallery, Media Pro, Fullscreen Video Backgrounds, SHOW Video Backgrounds and scroll effects.