SelectNav is a free stack that is very useful. It places a single button on your Stacks page that, when clicked, expands into a list of links. SelectNav is especially useful if you have a very long list of page links or downloadable resources that you need to present to your end users as an easily accessible menu which is compatible with all web browsers.
The button itself may be formatted to match the colours used on your page and the link list – which can contain groups of links – floats over the page content when opened.
SelectNav supports keyboard navigation, is ideal for positioning in your sidebar and even works when it is in a lightbox. The stack can be set to autofocus on page load so that hitting the spacebar, or the up/down keys will automatically open the menu.
Once on your page, you can add either an option group child to group your links, or a SelectNav Item. Adding child stacks to the option group automatically adds a selectable item.
Autofocus – Disabled by default
Disabled – Disables the menu
Link Behaviour – Links Open In The Current Window (default), Links Open In A New Window Or Tab
Icon – FontAwesome
Width – Button Width
Disabled Item – Disabled by default
Selected By Default – Disabled by default
As already mentioned SelectNav is a free stack that turns out to be very useful.
The Link Drawer toggle can be as wide as the container that it is enclosed in, or set to a fixed pixel width.
The drawer too! The drawer also allows you to set the number of columns it displays – for Desktop, Tablet and mobile devices. So if you set the drawer to 4 columns wide and then add 8 Drawer Items, you will have a grid with 4 x 2 link items on the desktop.
Each Drawer Item displays an Icon and a text. The Icon can be chosen from FontAwesome, Google Material Icons, or Ion Icons, but if you prefer, you can also add your own icons, i.e. a png, or a jpg image. Sadly SVG's are not (yet?) recognised.
Start Collapsed – Default
z-Index – Set by default to a pessimistic 1 quadrillion. I've recently seen this number before somewhere?? Today's developers seem to be obsessed by being top of the pile!
Max Width – in px
Breakpoints – Tablet, Mobile
Columns – Desktop, Tablet, Mobile
Font Family – 14 Options, including Custom.
Background – Off, Colour, Gradient, Image
Icon Size – Desktop, Tablet, Mobile
Text Size – Dito
Icon Colour – Initial, Hover
Text Colour – Dito
Background [Colour] – Dito
Border Colour – Dito
Content Spacing – Spacing between Icon and Text
Padding – Vertical Horizontal
Fill Mode – Full, Pixel
Width – px
Alignment –Left, Centre, Right
Height – px
Text – Open, Close
Background [Colour] – Initial, Hover
Icon [Colour] – Dito
Link Drawer Item
Use Custom Icon
As you can see by the list of settings, Link Drawer is highly configurable and I can see many uses for it.
My only 'criticism', if you'd like to call it that, is the lack of support for SVG icons and the inability to alter the toggle Icon.
Otherwise — a great stack!
DownloadLinkIcon will not only add the correct icon to a linked file, but it can also force the file to download instead of being displayed in the browser.
LinkPlus can add the appropriate link icon – Internal Link, External Link, or Email to any links contained within a text and format your links so that they are easily identifiable within your flow of text.
Let me begin with the older of the two stacks – LinkPlus – when you drag the stack onto your page, it displays a container into which you can add a text stack. The stack settings allow you to set the icons to be used i.e. internal and/or external and/or email icons which are then automatically added to any links within the text. You can also set the icon colour and the link colours individually – for Link, Hover, Active and Visited states in each case.
Quite recently Google decided that underlined links are 'Oh, so 90s' and removed all underlines from their search pages. This Blog also doesn't use underlined links. While it might be fashionable to indicate links by using colours alone, this can cause problems when your visitor has a sight impediment. (I hope that if you are visually impaired and regularly visit my page, that you are aware that 90% of the product names mentioned are linked to the appropriate page?)
LinkPlus has the additional options of not only adding underlines to linked text, but also also format the links as bold/italic and can add a background colour to aid your visitors in identifying links.
The only thing that you need to observe is that external links must begin with 'http://', or 'https://' for the appropriate icon to be added.
The external link icon may be solid, or open and can be applied to all links within the stack, or to all links that will open in a new window.
LinkPlus also has an option to target text stacks that have a custom selector. This makes it possible to target all text links on a page.
DownloadLinkIcon adds an icon before or after a text link to a downloadable file. The stack will automatically add the most appropriate icon based on the file extension, but you can also override its choice.
As with many recent stacks an instruction sheet is added to your page along with the stack. DownloadLinkIcon has a neat addition – a cheatsheet may be loaded in addition to the user instructions!
The icons used by both stacks are loaded from Font Awesome. Instead of having to go to the Font Awesome site to search for an appropriate icon (who knows all 675 FA Icons? I certainly don't), the cheatsheet displays all file-related icons from A - Archive to V - Video, plus generic icons such as Download and Dropbox.
First off: Paperless from Stacks4Stacks. A question that is regularly asked on the forums: "How can I put files online so that they can be downloaded?" The question arises most often because text links to file types that a browser can display natively, e.g. .jpg, or .pdf won't download the file, but display the file in question in the browser window.
But what if you want to share images with colleagues so that they can be used in a publication. Or what if you want to share an e-book? In such cases, it's impractical to first load the file in question to the browser and then save it to the computer.
Paperless solves the problem by searching an online directory for files and then displaying them for download. Each file that Paperless finds can then be downloaded with the click of a button.
Paperless' setup is extremely simple. You have two options to add your files.
Option One: Create a "downloads" folder on your desktop. Drop the files into the folder that you wish to place online. Drag the "downloads" folder to your project's resources. Publish your project. Paperless is already configured for this workflow, you don't need to alter anything. Your files are now ready for download.
Option Two: Create a folder on your server via FTP. E.G. "documents". In the stacks setup change the Paperless General Settings/Relative Path to ../documents. Publish your project. If your both your new "documents" folder and your "paperless" folder are at the top level of your site's directory, any files dropped into the documents folder will automatically appear on your Paperless page.
If you have placed the "documents" folder in a subdirectory, the Relative Path would be ../[subdirectory]/documents. If you have placed both the "paperless" and the documents folders within subdirectories, the path would be ../../[subdirectory]/documents.
../ informs the server-side php code that it is required to move up one directory-level each time it is encountered.
You may place multiple Paperless stacks on a page, if you wish to list more than one directory for downloads.
Paperless is highly configurable, so each aspect of the UI can be matched exactly to your site's design. You can also configure the way that files are ordered on your page and any changes within the downloads folder are reflected on your Paperless page immediately.
If you have set up Google Analytics for your website, Paperless has a Google Analytics option, and is able to communicate useful preview and download statistics back to Google Analytics, for display in your reporting data.
A list of your download files will be shown by their name. Next to each file name, the number of times that the preview button or download button was clicked is shown. From this information you can determine how many times a file has been downloaded and other information like the most popular times of day for downloads.
Paperless easily solves the problem of downloading files with RapidWeaver, it supports all common file types and will automatically display the correct document icons for common image formats, PDFs, Word, Powerpoint, Excel, OpenOffice, Pages, rich text, markdown, audio, video, zip, tar, and various code files so that these file types may be readily identified.
TIP: Check out the Stacks4Stacks website for Black Friday promotions beginning around 09:00/10:00 UST.
Also – Will has been hard at work updating seyDesign and Henk Vrieselaar themes. So don't forget to check out the seyDesign and Themeflood sites for promotions too – some of the themes come with complementary stacks!
Quick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.
Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.
A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…
A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.
Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.
Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox
Default BG (colour)
Default Content (colour)
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Text Weight – Normal, Bold
Font – Selection of 15 web fonts
Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Quick Menu Marker Stack
Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.