Circle Menu can be configured to be open or closed when your page loads. If it is closed, it shows up as a circular button (default) with a hamburger icon. When clicked the circle (or square) expands to display up to eight further buttons with icons that are linked to URLs of your choice. The buttons are added as child stacks and each child is configured individually.
The buttons have a shadow when hovered and a tooltip appears to display the URLs target. Clicking at the centre of the menu will minimise it.
As we have come to expect from 1LD in the meantime, configuration possibilities are almost endless. For starters, the eight buttons can be positioned completely within the circle (square) or positioned around its perimeter.
Open on Start - Active by default
Offset Items – Move the items to the menu perimeter (as above)
# of Items – Up to eight menu items
Menu Type – Circular (default), Square
Font Family – 13 Web fonts, plus Custom
Toggle size and options for Colour, Shadow etc.
Menu size and options for Size, Padding and Colour
Round Items – Active by default
Icon Font – Three options
Use Custom Image Icon
Circle Menu is a compact menu that may be positioned anywhere on your page. Multiple menus can be added to the page making submenus for page sections easily possible. One can only wonder how many more menu stacks 1LD will offer us!
In the last twelve months a couple of anchor stacks were released to assist with in-page navigation; some more, some less complicated. Ascend is one of the less complicated, but more useful solutions. Not only does it automatically add page anchors to transport you to the top or bottom of the page, it can also add a sub menu that can whisk you away to any section within your page.
Ascend is a set of two stacks: Ascend and Ascend Marker. Add Ascend to your Stacks page and in preview mode, you will discover a button at the bottom right of your page which, when clicked, will open a menu. The menu options are Top and Item. Now it's time to add a Marker stack to your page. The Marker will need an ID, so let's go to the Marker stack settings and add an ID, let's say Article-1. Now go to the Ascend stack on your page and activate the default child stack. Add the same ID to the child stack and choose a suitable icon, change the text within the child stack to Article 1 and enter preview mode.
The Ascend button has now changed to reflect your new Icon and text and when the menu option is clicked, your page will scroll to display Article 1. The scroll action is a smooth scroll and not just a jump as with a standard anchor, however, I would like to see a scroll time added as an option to make the transition even smoother.
There are a few other things that are unique to Ascend. The button may be positioned at either the top or the bottom of the page and you have a choice of left, centre, or right and the menu that is displayed can either be a list, or a grid – especially useful if you have multiple anchors. The Icon for each anchor may, of course, be set individually. And, as we have come to expect from Weavium, each aspect of the menu is customisable.
Display – Always, On scroll to, Between Markers, AT bottom of page
Open Menu – On Click, On Hover
Z-Index – Default 1000
Vertical Position – Bottom, Top
Horizontal Position – Right, Centre, Left
Size – Button, Icon
Offset – Vertical, Horizontal
Padding – Button padding
Initial Opacity – % – 0–1
Width – px
Padding – Vertical, Horizontal
Radius – px
Inline Close Button
Hide default Top Item
Allow Scroll (for long menus)
List Type – List, Grid
Item Size – Text, Icon
Padding – Vertical, Horizontal
Header Font – 13 fonts plus Google font
Item Font – As above
Colours for each and every item, including the shadow.
The Ascend Child Stack has settings for your ID and for four Icon Sets plus Custom.
Ascend is a new take on the 'Scroll To…' button and well worth taking a look at.
When version 1.0.2 dropped into my mailbox, I took a look at it, but decided that it wasn't quite ready for a review. I wrote to Michael with a couple of suggestions, as did a couple of early adopters.
Michael took the suggestions seriously and, less than a week later Navigation jumped to version 1.1 with a dozen new options.
Navigation is now well worth taking a look at if you're looking for a new menu bar.
Navigation is a stack that targets frameworks such as Foundation and Bootstrap, but with a little CSS, the menu bar of most themes can be hidden and replaced, making Navigation the ideal menu bar for many standard themes too.
The stack can be set to fixed, or sticky and it can change colour when the page is scrolled. The mobile menu not only looks good, it is also practical.
The menu items can be configured to display on the left, or the right side of the bar and the dropdowns can also be set to left or right. There are also ten skins for the menu buttons.
Either a text, or an image may be displayed on the left side of the menu bar allowing you to name the page that is visible, or adding an appropriate icon. SVGs may be inserted.
Item Active [colour]
Font – Six options plus Custom
Enable Font Awesome
Scroll to Solid Colour
Solid Background [colour]
Click or Hover – Dropdown activation
Align Items – Left, Right
Align Dropdown – Left, Right
Dropdown Colours and Font Size
Effect – Animation effect for dropdowns – Eight animations
Dropdown Icon – Eight options
Responsive Menu Burger
Burger Text – Deactivated by default
Burger Starts – Default 768px
Styles – Ten skins for the buttons
Items Divider – Deactivated by default
Image or Text – Text, RapidWeaver Image, Stacks Image, Warehouse Image
When Image is chosen, formatting options are displayed for desktop and mobile formatting – plus an alternate image for mobile.
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 !
Snaps is a set of two stacks that will scroll their content (i.e. each section) to the top of the screen when the page is scrolled, swiped, the up down keys hit, or the scrollbar is clicked. The Snaps demo page also demonstrates that the stacks can be linked to via a menu, a text link, or with BWD's Mouser stack.
The two stacks are the Snaps Settings stack and a Snaps Div (scroll to) stack into which you can drop any content that you please. Only one Snaps Settings stack should be placed on your page, further sections are added with the Div stack.
Snaps is ideally combined with Stack Me which, as we recently saw, is great for positioning content. If Stack Me is set to 100% viewport height , you can build full-screen sections that snap to the top of the screen when the page is moved up, or down. And – if you're using Stack me, you can forget the Snaps Div stack and change the classname of the Snaps Settings stack to stackme. Your page will then scroll to the next Stack Me stack.
Height=100% – Yes, No
Timing – Scroll speed in ms
Offset – Px
Snaps is available free on the Stack Me page and I'm sure that many Weavers will find it useful.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
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?
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.
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—16