Mega Menu can contain just about anything you want it to. If you choose the right stack, it will display your main page navigation or, as 1LD's demo shows, Mega Menu can even contain Google Maps.
The fact that it may either be fixed to float at the top or bottom of your page, or displayed inline makes it especially interesting.
The Mega Menu stack can display as many dropdown menus as you wish and the menus can display as many columns as you can fit onto your page – it's all a matter of your column width.
Mega Menu is, of course, fully responsive and on mobile devices it morphs into a practical dropdown that only displays the submenus when they are clicked [tapped].
As with all recent 1LD stacks, you have a wide choice of fonts and icons and, as usual, the stack is highly configurable; once again, with so many options that I shan't be listing them all individually.
Position – Fixed, Inline
Orientation – Top, Bottom
Z-index – Someone went wild here and entered a number that begins with nine sextillion and continues with 21 nines!
Max Width – px
Margin – Vertical, Horizontal
Breakpoint – Point at which the menu collapses as mentioned above
Main Menu – Settings for Font and Icon sizes, Spacing, Padding and Font
Mega Dropdown – Content Alignment, Min Height, Column Padding, Item Padding, Link Size, Title Size, and lots more…
Header – Logo & Title, Toggle Size
Colours – Colour Settings for every aspect of the stack
Mega Dropdown Menu (Child Stack)
Column Size – Equal, Auto
Icon – Google Material Icons, Fontawesome, Ion Icons
Mega Menu Column (Child Stack)
Column Max Width – px
Custom Alignment – [Content] Left Centre, Right
Custom Colours – Colour Override for – Links, Text, Titles, Border, Background
NOTE: Mega Menu uses content overflow. In case you haven't set stacks to overflow before – When you set Mega Menu to 'Inline' your content will only become visible when there is content below the menu – i.e. something for it to overflow!
You can place as many Mega Menu stacks on your page as you wish, without having to bother about stack IDs.
Oh, and the pessimistic Z-index setting of nine sextillion, nine quintillion, nine quadrillion etc. etc. is totally unnecessary and will be ignored by all browsers* – nine will suffice in 99% of the cases. If your page contains that many layers it needs to be seriously examined!
Mega Menu is a great alternative to your default menu and well worth taking a look at.
*The maximum observed Z-index setting is 2147483647 for most modern browsers, and 16777271 for Safari 3 and below. Older Firefox browsers will not display elements with a higher Z-index than the max at all !
The idea of letting text flow into newspaper-like columns of equal height isn't a new one, I have three or four stacks in my arsenal that will do just that, some older, some newer. Define the number of columns (with more recent stacks for multiple devices), drop in your text and watch it reflow.
Tabloid is a completely new approach to the idea.
When you drag a Tabloid stack onto your page, you'll see an empty stack with a reminder that you are working with columns, simply drop your preferred text stacks, drop in any other stacks and watch everything reflow into columns of equal height and a predetermined width when you hit preview.
The predetermined width is the key to the stack's responsiveness, if you set a column width of, say 250px, an average-width website can display three columns in desktop view, but a tablet in landscape mode can not. In such a case, Tabloid expands the column width to fit the viewport and will display two columns. This relieves you of the necessity of setting the number of columns for each device.
Column Width – px
Spacing – Gutter Width in px
Dividers – Colour
And that's all there is to the setup.
As simple as the setup is, Tabloid is a very effective stack that effortllessly reflows your content into equal width / equal height columns – any content.
At the end of December RWExtras released Showcase Ultra, a stack that takes the idea to the next level and adds a versatile slideshow to a choice of (if I counted correctly) fifty-two (52) different background images ranging from popular devices to office background settings. And I'm not just referring to the versatility of the backdrop images – there is a choice of nine different transition effects. The aforementioned stacks (which shall remain nameless) offered just a simple fade transition.
So how does it work? Drag Showcase Ultra onto a Stacks page, add child stacks with your local, or warehoused images, choose a backdrop and publish!
If you're not happy with the provided backdrops, you can add your own (warehoused) frame. You then get optional settings for the size and positioning.
Hide Images In Edit Mode
Transition Effect – Nine ttransitions
Slide Order – Normal, Random, Reverse
Interval – set in ms
Transition Speed – in ms
Tile Count – Number of tiles, if 'tiles' has been set as transition
Frame – Choose from 52 backdrops
Image Scale – Scale your images to fit the backdrop
Maximun Width – Width of the backdrop
Float Alignment – Left, Centre, Right
Showcase Ultra is a cool stack that takes the graft (hard work – for those of you across the pond) out of presenting a responsive portfolio within a homogenous background.
Simple Tabs, as the name implies, is a stack that will simply add tabbed (the tabs may also be buttons) content to your page. The tabs change to buttons on mobile, but can be neatly arranged into columns.
The setup is – simple – and the results are attractive.
When you drag Simple Tabs onto a Stacks page, you get a container with two child stacks into which you can drop your content. Each of the child stacks has a tab at its upper edge that contains an Ion Icon and a text area for your title.
All you need to do, is add some content, change the icons and decide on a colour scheme. As usual with 1LD, you get a wide choice of both icons and of fonts. The tab sizes can be easily adjusted to suit and there are a couple of neat features that I don't recall seeing elsewhere – the already mentioned 'stacked' buttons, for instance…
All in all, I find Simple Tabs to be quite impressive and I'm sure that it will find a home I'm many Weavers' libraries.
Floating Pill – A setting that allows the active button to slide across the tabbed panel when the next tab is clicked
Connect Tabs – When active, the tabs are connected to the content window. Otherwise the tabs appear as buttons
Max Width – The max width of the tabbed and the content area
Active Tab – The tab that is automatically displayed when the page is loaded
Font Family – The standard 1LD choice of 13 web fonts, plus Custom
Vertical Position – Top/Bottom. When 'Bottom' is set, the tabs appear as buttons
Alignment – Left, Centre, Right
Spacing – Vertical, Horizontal
Padding – Vertical, Horizontal
Radius – The bottom radius is deactivated when 'Connect Tabs' is active
Background – Off, Colour, Gradient, Image
Border – The tab/button border
Active Text Colour
Active Background – as above
Border – as above
Tabs > Responsive
Breakpoints – Tablet, Mobile
Columns – Tablet, Mobile
Padding – Vertical, Horizontal
Background – As above
Experimental – Match content bg to tab colour
Simple Tabs Tab Child
Icon Font – Standard 1LD choice of 3 – Oops! – 4 Icon Sets – FontAwesome5 is included!
The next time that I need tabbed content, I shall seriously consider using Simple Tabs. I especially like the fact that the tab borders allow you add a neat contrasting border at the top (or bottom) of the button; I also like the slide effect when a new tab is clicked.
Check out the 1LD product page to find out more.
Section is a free stack that allows me to switch off for a while. Full width sections with header and caption text and a bare minimum of design possibilities. All I need to do is decide on a colour for the background and contrasting colours for the Header and caption. Once I've done so, I can drop in my content and move on to the next section.
I recently built a site that contained just such sections containing price information for various services. Had I had Weavium's Section, I'd have had the page finished in half the time (and could still have charged the same price!).
Padding T,B,L,R. Default 100,100, 20, 20px
Background [colour] None, Solid, Gradient, Image.
Size – Desk, Mobile, Tablet
Space Below – Desk, Mobile, Tablet
Font – 15 popular web fonts plus custom
Font Weight – Bold (default), Normal
Same options as above.
Section is a soft release, so you can expect a few changes to appear in the very near future e.g. customisation of the color and sizing of header tags, text, and links within the content.
This is a neat little stack, made all the more interesting by the fact that is's free.
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.