ZipBar was originally developed by SeyDesign. This stack is now supported and maintained by Stacks4Stacks. The newest version is denoted with an orange and white icon. Legacy versions of ZipBar are listed for download from the archive page if you are a previous user needing an older version.

Example

This is a working example of ZipBar with the default style and behavioural settings applied. The shadow box effect surrounding the stack is accomplished using the free Shady stack.
 
  • Standard Text
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Columns of Text

    About Us

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Leading The Way

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • AdaptiveGrid
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
     
    The free AdaptiveGrid stack is the go-to stack for thousands of RapidWeaver users. Sadly equal-height columns don't tend to work too well when they are toggled between hidden and shown (it messes-up the calculations somewhat). Fortunately the ZipBar stack allows you to attach an optional 'custom callback' to each individual tab. So if you want something to happen when a tab is clicked, callbacks might be the answer. In this example, entering equalheight('.ZipBarCatcher .adaptiveGrid .gridCellInner'); in the custom callback box reinitiates the column height calculations when a tab is clicked. Therefore the columns retain equal heights, even after they are toggled opened and closed.
  • ImageCompare
    Before After
    My Image My Image
     
    This ZipBar example makes use of powerful custom callbacks to initiate the free ImageCompare stack, when the tab is opened. Simply select the tab in Stacks edit mode and enter the following for the On Click callback;

    $(".ZipBarCatcher .imageCompare").twentytwenty({default_offset_pct: 0.80});

    And in the Off Click callback, enter this:

    $(".ZipBarCatcher .twentytwenty-overlay, .ZipBarCatcher .twentytwenty-handle").remove();

    The first callback tells the ImageCompare stack to initiate (run), as soon as the tab panel is opened, with the drag handle set at 80%. The second callback destroys (removes) the shade and drag handle from the current ImageCompare stack, to stop these dynamically 'stacking up' if you keep returning to this tab. 'ZipBarCatcher' restricts the callback to only working on ZipBar stacks.
  • HTML5 Video
     
    If you are using HTML5 video in tab panels, you definitely need a way to stop the video when a user navigates onto a different tab. Otherwise the video will just keep playing in the background; which can be a point of much confusion! Again, custom callbacks in ZipBar can really help us to fix common problems like this. The example video above was embedded using the free Embed stack, and the following Off Click Callback was added to this tab, to stop the video when another tab is clicked:

    $(".ZipBarCatcher video").trigger('pause');

    A nice feature of this technique is that the video remembers where it was played to; so if the user comes back to the tab again, they can resume the playback from where they paused it.
  • Web Link
 

Setup

This stack element requires RapidWeaver and the Stacks plugin. It is not compatible with other publishing platforms like Wordpress. Configure ZipBar in just a couple of easy steps.

  1. Download ZipBar. Unzip the package. Drag-and-drop the ZipBar stack onto your RapidWeaver dock icon to install.
  2. Follow the onscreen instructions to install ZipBar. Restart RapidWeaver if prompted.
  3. Open your Stacks Library. Search for ZipBar. The latest version has an orange and white icon.
  4. Drag a ZipBar stack element from your Stacks Library onto your Stacks page.
  5. Double-click on each "Button Title" to give each button name.
  6. Drag other stacks into each available content space and propagate each item with text and media as needed.
  7. Add more tabs by clicking the blue button in edit mode.
  8. Make other adjustments like animation effect, gradient, shadow, radius and colours.
  9. Preview your page when done. Save changes. Export or publish your website in the normal way when done.

Browser compatibility

ZipBar is compatible will all major web browsers. On narrower screens (like smartphones and smaller tablet devices) the tab buttons are stacked vertically. You can control the point at which the tabs revert from horizontal to vertical positioning through use of the breakpoint setting in the ZipBar settings.

Setting a tab as a web link

You don't have to have a tab configured to reveal a panel of content underneath. You can instead configure the tab to open a resource or another webpage when clicked. The trick is to markup your tab title as an HTML link:

<a href="https://example.com">My Link</a>

Now when the user clicks on the text 'My Link', they will be navigated to a web address like https://example.com. You can change the web address to be anything you prefer.