Stacks4Stacks

Option lists have long been a feature in web design, as a method of providing a user with a list of items to choose from. They are useful components for a wide range of different tasks, including contact forms and website navigation (the latter of which this stack is ideal for).

However because HTML option boxes are a core component of a web browser graphical user interface, the ability to customise their appearance is very difficult. So although HTML option lists are mighty useful, the inability to change their appearance limits their use in certain projects.

The Options stack works rather different. It is basically a drop-down menu comprising of clickable links. In some respects it behaves like a conventional HTML option list, but by building our own, we can retain the ability to style it. This Options stack is ideal for creating a menu of clickable items, and can serve to provide an alternative method for users to navigate a website.

Examples

Here are some working examples of the Options stack. Click the headings to reveal the lists of items. Like a standard HTML option list, click anywhere off the option list to close it again:

In the first example, static text was used to form ten list items. The centre and right-most examples use links in their option lists, and demonstrate some different styling which can be applied using the Options stack settings. Multiple Options stacks can be used on the same page, and you can have more than one open at the same time.

Setup

Using the Options stack is simple and straightforward. Follow these setup instructions:

• Once installed, drag and drop an Options stack into your page
• Replace the 'Master Title Goes Here' text, with a title for your option box (this is the title people click to reveal the list of options)
• In the stack settings, customise how many list options to display. Each time the number is incremented, a new option item is displayed
• Replace the 'Option Item Title' with the text you want shown
• Change any of the other style settings provided, in the Options stack settings

If you want an option item to be a link, use HTML anchor tags or highlight the text (in Stacks edit mode) and click the green chain '+' button to apply a link. You can link to page anchors, pages within your website, website resources, external websites and other things like email addresses and telephone numbers.

Icons

The option is provided to display icons alongside master titles. You can either use graphical icons (GIF, PNG or JPG images at 72 dpi) dragged and dropped into the stack settings. Alternatively you can use Font Awesome icons. In the above examples, the centre Options stack is using an image icon, and the right-most example is using a Font Awesome icon, via the following code in the Icon Code box:

<i style="font-size:40px;" class="fa fa-chevron-circle-down"></i>

Some settings are provided so that you can adjust the position of the icons, relevant to the height and position of the master title.

Theme compatibility

The Options stack works with all ThemeFlood RapidWeaver themes and the Blueball FreeStack system. It may work with themes from other companies, but exact compatibility will vary. If you want to use retina-enabled Font Awesome icons against the master titles, you need a RapidWeaver theme advertised as having support for Font Awesome icons.

Print output

Option stacks are automatically removed from displaying on printouts or PDF's.

The 'Embed' option

When enabled in the stack settings, your Options stack will be embedded wherever you enter <div id="optionList"></div> on a page, such as in a sidebar, a banner or a footer region. This option should only be used once-per-page.

A note about overflows

Normally in Stacks, all stack elements have overflow:hidden applied to them, to prevent problems arising in Internet Explorer. However in the instance of the Options stack, this would unfortunately result in the overflowing option list from getting cropped and not displaying. To overcome this issue, we have carefully included the following CSS code in the Options stack:

.stacks_out,
.stacks_in,
.stacks_top {
	overflow: visible !important;
}

Please bare this in mind when building very complicated page layouts, because the normal Internet Explorer safe-guards may not work after you add one or more Options stacks to a page. Although some stack developers have already been using this code for many years in menu stacks, it is an unofficial hack, and therefore we have been transparent about it here.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.