Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Circle Menu for RapidWeaver

One Little Designer has added a new menu stack to its growing assortment of menus. Circle Menu may be displayed anywhere on your stacks page and will display up to eight links arranged in a circle – or a square.

circle menu – 1LDCircle 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.

circle menu –1LD
Stack settings
General

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
Toggle size and options for Colour, Shadow etc.

Menu
Menu size and options for Size, Padding and Colour

Menu Items
Round Items – Active by default
Button Size
Icon Size
Label Size
Radius
Hover Border
Colours

Child Stacks
General
Link
Icon Font – Three options
Icon
Use Custom Image Icon
Custom Colours

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!

Comments

Ascend – Page Anchors for RapidWeaver

'Don't just scroll… Ascend' is the newest shibboleth from Weavium. However 'Ascend', the name of Weavium's latest stack, just doesn't do the stack justice. I would have chosen 'Traverse', or 'Locomote'. Ascend means to move up, which is not what Ascend does – it moves anywhere!

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 – WeaviumAscend 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.

Stack settings
Ascend General
Display – Always, On scroll to, Between Markers, AT bottom of page
Open Menu – On Click, On Hover
Z-Index – Default 1000
Toggle
Vertical Position – Bottom, Top
Horizontal Position – Right, Centre, Left
Size – Button, Icon
Offset – Vertical, Horizontal
Padding – Button padding
Radius
Initial Opacity – % – 0–1
Menu
Width – px
Padding – Vertical, Horizontal
Radius – px
Hide Header
Header Text
Header Size
Header Padding
Inline Close Button
Hide default Top Item
Allow Scroll (for long menus)
Menu Items
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.

Comments

Yuzool Navigation for RapidWeaver

You often hear complaints about the standard RapidWeaver navigation bars and a number of developers have recently provided solutions that try to combat the problems. Many of these solutions, however, mean adding menu items manually. Not really ideal if you have a site with 20 pages. Yuzool Themes just released Navigation, a stack that will solve problems such as the menubar being limited to two levels of dropdowns.

Navigation – YuzoolWhen 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.

Navigation – Yuzool

Stack settings

Menu General
Background [colour]
Items [colour]
Item Active [colour]
Font – Six options plus Custom
Font Size
Enable Font Awesome
Fixed menu
Scroll to Solid Colour
Solid Background [colour]
Click or Hover – Dropdown activation
Align Items – Left, Right
Align Dropdown – Left, Right
z-index

Dropdown
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 Colour
Burger Starts – Default 768px

Menu Styles
Styles – Ten skins for the buttons
Items Divider – Deactivated by default

Brand Settings
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.

Comments

1LD Mega Menu for RapidWeaver

Over the last twelve months, One Little Designer has produced a number of menu stacks for RapidWeaver. A continuation of the theme is the new Mega Menu which may be displayed inline, or fixed on your page.

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.

Mega Menu – 1LD
Stack settings
General
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
Icon Code

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 !

Comments

Snaps – Sections for RapidWeaver

Tommy, the speedy graphic designer also know as DeFliGra, just released a sister stack to Stack Me. Snaps is the Danish word for a liquor, but it also aptly describes what the stack does – it snaps to the top of your screen.

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.

Snaps – DeFliGra

Stack settings
ClassName
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.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.