Slinky was formally developed by SeyDesign, under the old name of 'Slinkee'. This newest version has an improved user interface, bug fixes, more style settings and some new features. The old version is still obtainable here, if you need it.

Some possible uses of Slinky include a website menu, FAQ help pages, member directories, file repositories, product specifications, contact details and showcases. Slinky is fully mobile responsive and suitable for use in the main content area of a page, sidebars and ExtraContent regions. It's compatible with Appender and all your favourite themes and frameworks too.

Example

This is a working example of Slinky, with its default settings applied.

  • Link only Enter description here.
  • Link opens in a new tab Enter description here.
  • Link & content Enter description here.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in massa tempor nec feugiat nisl pretium. Id consectetur purus ut faucibus pulvinar. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Orci sagittis eu volutpat odio facilisis mauris sit amet. Penatibus et magnis dis parturient montes nascetur ridiculus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Molestie nunc non blandit massa. Lacus sed turpis tincidunt id aliquet. Ac tortor vitae purus faucibus ornare. Volutpat ac tincidunt vitae semper quis. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Turpis egestas maecenas pharetra convallis posuere morbi.
  • Link, description & content A description goes here in this space, like this.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in massa tempor nec feugiat nisl pretium. Id consectetur purus ut faucibus pulvinar. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Orci sagittis eu volutpat odio facilisis mauris sit amet. Penatibus et magnis dis parturient montes nascetur ridiculus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Molestie nunc non blandit massa. Lacus sed turpis tincidunt id aliquet. Ac tortor vitae purus faucibus ornare. Volutpat ac tincidunt vitae semper quis. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Turpis egestas maecenas pharetra convallis posuere morbi.
  • No link (toggle only) Enter description here.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in massa tempor nec feugiat nisl pretium. Id consectetur purus ut faucibus pulvinar. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Orci sagittis eu volutpat odio facilisis mauris sit amet. Penatibus et magnis dis parturient montes nascetur ridiculus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Molestie nunc non blandit massa. Lacus sed turpis tincidunt id aliquet. Ac tortor vitae purus faucibus ornare. Volutpat ac tincidunt vitae semper quis. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Turpis egestas maecenas pharetra convallis posuere morbi.
  • Lots of content! Enter description here.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in massa tempor nec feugiat nisl pretium. Id consectetur purus ut faucibus pulvinar. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Orci sagittis eu volutpat odio facilisis mauris sit amet. Penatibus et magnis dis parturient montes nascetur ridiculus. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Molestie nunc non blandit massa. Lacus sed turpis tincidunt id aliquet. Ac tortor vitae purus faucibus ornare. Volutpat ac tincidunt vitae semper quis. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Turpis egestas maecenas pharetra convallis posuere morbi.

    Lorem mollis aliquam ut porttitor. Cursus vitae congue mauris rhoncus aenean vel. Purus viverra accumsan in nisl nisi. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Faucibus a pellentesque sit amet porttitor. Ultricies mi quis hendrerit dolor. Blandit turpis cursus in hac habitasse platea. A lacus vestibulum sed arcu non odio euismod. Fermentum leo vel orci porta non pulvinar. At volutpat diam ut venenatis tellus. Egestas pretium aenean pharetra magna ac. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean.

    Tortor consequat id porta nibh venenatis cras sed felis. Libero nunc consequat interdum varius. Cursus mattis molestie a iaculis at erat pellentesque. Suspendisse interdum consectetur libero id faucibus nisl. Morbi non arcu risus quis varius quam. Ac orci phasellus egestas tellus rutrum. In nibh mauris cursus mattis molestie a. Morbi leo urna molestie at. Consectetur a erat nam at lectus urna. Fermentum iaculis eu non diam. Tristique nulla aliquet enim tortor. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Et netus et malesuada fames. Aliquam eleifend mi in nulla posuere sollicitudin. Justo laoreet sit amet cursus. A pellentesque sit amet porttitor eget dolor morbi non.

    Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Tortor posuere ac ut consequat semper viverra nam libero. Massa id neque aliquam vestibulum morbi blandit. Turpis egestas sed tempus urna. Magnis dis parturient montes nascetur. Volutpat ac tincidunt vitae semper quis lectus nulla at. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ornare arcu odio ut sem. Euismod elementum nisi quis eleifend quam. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Scelerisque felis imperdiet proin fermentum. Id venenatis a condimentum vitae sapien.

    Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Vitae proin sagittis nisl rhoncus mattis. Neque viverra justo nec ultrices dui sapien. Sed felis eget velit aliquet sagittis id consectetur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Mi tempus imperdiet nulla malesuada pellentesque. Mi tempus imperdiet nulla malesuada. Amet porttitor eget dolor morbi. Convallis aenean et tortor at risus viverra. Sodales neque sodales ut etiam sit amet nisl. Nibh venenatis cras sed felis eget velit. Mauris vitae ultricies leo integer. Posuere urna nec tincidunt praesent semper feugiat nibh. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales. Ut ornare lectus sit amet est.
 

Setup

Follow these instructions to setup a Slinky stack.
  1. Install Slinky within Stacks and RapidWeaver in the normal way. Like other stacks, open your Stacks library. Drag a copy of Slinky into your page.
  2. Click the blue button to add items to your Slinky stack.
  3. For each Slinky item, you can provide a link, page name, description and drop down content. Only the page name is mandatory (required).
  4. With Slinky still selected in 'edit' mode, you can access its style settings, from the Stacks side panel.
  5. Save changes when done. Preview the page to see what it looks like. Export or publish your page as normal.

An unlimited number of Slinky items can be added to a Slinky stack. Simple content types (like styled text, Markdown, tables, lists and images) are recommended for drop-down content. The use of more complicated content types (like other toggle or animation stacjs) is discouraged. Simple is best!

Optionally, links can be set to open in new tabs or have custom classes and other attributes applied. To achieve this, select an individual Slinky item in edit mode. Within the Stacks side panel, you should see alternative settings to customise the links.

Adding arrows to page names

Arrows are intended to signify to the end user that they can click and reveal content. Past versions of Slinkee only gave the choice of white or black 'triangle' GIF image arrows. As of Slinky v3, there is now a dedicated Add Arrows checkbox. Ticking this setting presents options for you to reference a suitable arrow (Font Awesome icons are recommended), with additional settings to precisely customise the icon size, colour, position and indentation. When a Slinky item is opened, icons are automatically rotated, 90 degrees, with a transition effect.

It is assumed that your theme already includes a suitable icon library. For example, most ThemeFlood themes already give you Font Awesome v5. If your theme is lacking a suitable icon library, you will either need to add the code for one yourself or buy an additional stack like Iconic.