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: 1.2
- Supported Devices: Desktop, Tablet, Phone
- 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)
- 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 2 state buttons, labeled "parent" and "child" will be hidden until triggered when previewed in browser. These can be placed out of the way in Design Mode. The open button is the only element that will be seen and should be placed where you would like it.
- You can use either a custom open button, or a default option. When the widget is first dropped into your project, you will notice that there is a custom open button already set up.
- 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: Once you select the default open button, you will see the button appear within the main Pushy Panes widget container. As you update the style settings, this button will render the changes. Use this widget component for placement of the default open button. You can delete the included custom open button if you're using the default option.
- Note that the close button is a custom button option only. The close button in our widget uses a text box within a state button. You may notice that the close state button is within the parent panel state button. This is the best setup.
- Parent Panel: The parent panel also uses a state button. This state button represents the background of the Pushy Pane. Minimal customization is needed for this component. You may change the fill color if you wish, or fill with an image. You will notice that the size of the parent panel state button is not important, since the background fill settings will fill the entire area of the browser height or width within the parent pane, regardless of it's size in Design Mode.
- Child Panel: This panel represents the "content" area of your Pushy Pane. Update this area with your content, such as site navigation. Note that the child panel in our widget uses individual state buttons within the main state button. This way, individual text elements can retain states such as rollover and mouse down. Otherwise, the main state button would trigger the states of all elements within at the same time. Use the Child Pane Position setting within the Child Panel options to control where the child panel content appears within the parent pane. You can experiment with this setting along with your placement of content within the child pane to fine tune where it appears when the widget is previewed.
- Pane Open Style: This setting offers the option of covering page content with the pane, or pushing content.
- The Pane Setup & Transition Settings section offers several options including transition direction, easing, and overlay options.
Pane width and height is set to open as a percentage of page area. If set to 100%, Pushy Panes functions like our Versa Slide widget. We suggest using Pushy Panes in place of Versa Slide for increased stability
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.
Pushy Panes isn't working with the Fullscreen Video Backgrounds widget!
Our Pushy Panes widget offers two pane open style options: cover content and push content. The push content setting is not compatible with fullscreen elements. This includes widgets like Fullscreen Video Backgrounds, Fullscreen Thumbnail Gallery, and Fullscreen Fruit. While the push setting is not compatible, the cover setting will work great with all fullscreen elements.
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.
Additional Info Links