Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

Menupilator Stack

manipulate menu items on the page

The Menupilator Stack is like a Swiss army knife when it comes to changing menu items on a page. You can change or disable the link, hide it, change its text and appearance…

This is extremely handy when you want to
put extra emphasis on one ore more menu items (by changing their style and/or color)
disable a menu item (e.g. to turn it into a placeholder for the submenu items)
make a menu item do something that cannot be defined by RapidWeaver (trigger a lightbox, a shopping cart etc.)
link a menu item to the corresponding page in another language
make a menu item behave differently on one (or some) page(s) only
remove a menu item on one (or some) page(s) only
make a colourful menu (see above)
This stack not only combines functionality of the NoLink Stack, the NoCurrent Stack and the Lang­Menu Stack, it also adds a shipload of possibilities not present in any of those three!
Demo
On this page, the text and border colors of the menu are changed with Menupilator Stack. Besides that, the menu item add to cart (created by adding an offsite page) is changed to open the shopping cart (fig. 1).
More demos of the many possibilities of this stack can be found on the demo site.

Usage
For every menu item you want to change on the page, use a separate Menupilator Stack.
Set the menu item you want to menupilate.
Choose an action for that menu item:
change link
also useful to make a menu item trigger a lightbox, a shopping cart, etc.
disable link
for disabling the link to the current page in the menu, turning a toplevel menu item into a placeholder, a ‘coming soon’ menu item…
leave as is
when you want to change the appearance of the menu item only (or the link’s attributes, see below)
Optionally, you can change the text of the menu item.
Simple inline HTML like <b></b> or the code for a FontAwesome icon can also be used.
If desired, set the appearance of the menu item (font style, text, background and border color)
If necessary, hide the menu item above or below a certain screen width.
This is useful when you want to show a menu item only when it’s immediately visible, but not when it’s hidden inside a menu for a small screen. In those cases, you can show an alternative link on small screens only using my MediaQueries Stack.
Optionally, apply the settings to the breadcrumb trail as well.
Pro tip: if you need to disable a link, but still want to use a title, a data-* attribute etc., do not use the option disable link, but set the URL of the new link to javascript:void(0).

See demo page 3a for an example where titles are added to the menu items to show tooltips created with TippyTitle Stacks.

NB
The options to change the background and border color work with some themes only (actually: those themes that have background and/or border defined for the menu items).
When the menu item in this stack is set to open in a new page, it will not work in Preview mode. Preview the page in a browser to see it in action.
When the menu item set in this stack links to an offsite page, the current settings info below only works properly when the option Use Redirect Page is checked on that page.
In the rare occasion you have a link in the body text that also links to a page targeted by this stack, and this link is inside an unordered list (with bullets etc.), that link will also be targeted by this stack. In this case, add a class noMP to this link to prevent this (fig. 2).
More on this and an example on demo page 3b.

Limitations
When the visitor has JavaScript disabled in his browser, the stack will not work and the link to the page in the menu will stay as is.
PlusKit’s @​import((pagename)) feature may not work with every plugin (FormLoom, maybe others).
In a handful of themes, complicated manipulations (like opening a LightboxMe lightbox) may not work with the menu shown on a small screen. Most often, putting the Menupilator Stack at the top of the page solves this. If that does not work, you can hide the menu items affected on small screens as described above (under Usage).
ASAIK, this concerns some themes by Henk Vrieselaar (now sold by ThemeFlood): ABC, Banx, Cefalus, Elite, Fuld and Foton, but there may be more.
Oh, and before you ask: yes, the stack does work with Foundation, see
demo page 3d for an example.
Do not use single straight quotes (  ' ) in the new text of the menu item. They break the script. If you have to, use double quotes (  "  ) or curly quotes (      ).
Single straight quotes (  ' ) in the new text of the menu item break the script. If you have to use them, precede them with a backslash: don\'t click.
Alternatively, consider using double straight quotes (  "  ) or curly quotes (      ).

Support
Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).
a link with a class noMP

fig. 2: Adding a class ‘noMP’ to a link in an unordered list prevents the Menupilator Stack from manipulating it.

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…