Magic Gellan 2

In Page and External Navigation

Magic Gellan is the single most powerful and flexible in page navigation stack available. Powerful, adaptable and flexible navigation, only for Foundation.

Get the stack

Totally Automatic Menu Generation

The menu is generated automatically from the markers on the page. The order that you put the markers in edit mode is the order that the links in the menu will appear.

If you need to re-arange the contents of the page then the menu will be updated automatically.

You don't need to enter a single line of HTML to generate your menu - EVER!

The Stacks

MagicGellan 2

MagicGellan 2 is a complete re-write of the original stack. Producing 60% less code yet with almost twice the features. MagicGellan 2 is completely responsive with its own custom animated mobile menu.

Magic Dots

New to the suite is the Magic Dots stack. No longer integrated into MagicGellan you can now have nav dots on any site. As a standalone stack we have now been able to add a lot more styling and layout options.

Magic Marker 2

Magic Markers define the scroll-to points on your page but also automatically create the menu. Now including support for FontAwesome icons in your menus and a huge amount of styling options for individual menu items. Responsively hide or show any menu item at any screen size.

Magic Zone 2

Magic Zones have had the same total re-make as Markers. With lots of styling and responsive controls they allow you to add external links, light boxes and dropdown mega menus to a MagicGellan bar. Magic Zones can be used to insert buttons into your menu or even create a responsive icon bar menu.

Magic Link

The Magic Link stack can be used without the main MagicGellan stack to make a smooth scrolling link to anywhere you put a marker on your page. Use it to scroll down a hero header or to provide section by section up and down scroll links from any content such as a button or image stack.

ont Vault Support100%

Features

Fully responsive mobile menu

This is a live MagicGellan set to show the mobile menu at 800px browser width. Resize your browser to try it out.

Mobile animated hamburger menu

Styling Options for desktop and mobile menus

Page Wide Marker Offsets

Control of Scroll Speed and Easing

Integration of Foundation Dropdowns to make Mega Menus.

Total code re-write from better performance and less size.

Nav Dots Stack

Works with or without MagicGellan

Smart size for smaller screens

Options to show or hide for any breakpoint range.

Dot Backgrounds for improved legibilityn

Multiple shapes and transitions

Font Vault support for tip text.

General

The site menu on these pages is proprietary although the one on this page contains a MagicGellan in is bar. The example in the features section above is a standard MagicGellan as are the ones on the examples pages and all demonstrate the mobile menu feature.

Mobile Menu

With an animated burger and drop down menu for mobile, you can now use Magic Gellan on any device without the fuss.

The previous option of only having dots for small screens is now history, in fact the Nav Dots are now in their own stack completely and can be used whenever you like with their own custom responsive controls.

The Magic Dot stack also brings tons of new features and style options to the dots and can be used totally independently of the main Magic Gellan menu. Want a page with just sections and Nav Dots? - no problem.

Using Magic Markers

This is probably the biggest standout feature of Magic Gellan.

The menu is generated automatically from the markers on the page. The order that you put the markers in edit mode is the order that the links in the menu will appear.

If you need to re-arange the contents of the page then the menu will be updated automatically.

You can even enable the "add content feature" in the marker stack which will allow you to drop all content associated with that marker in to the stack itself. This makes it super easy to rearrange your page content and ensure that the marker always stays with its associated content.

If you need to set specific marker stacks to over-ride the page wide setting you can simply enable the "Override Page" setting in the marker stack offset controls.

Icons

Both Magic Markers and Magic Zones now support font-awesome icons.

You can choose to have an icon with text, just an icon or just text. What is more, you can do this responsively and hide icons for different screen sizes for example.

Responsive Controls

Any individual menu item can be set to display for only a certain breakpoint range. This means that you can hide some items for smaller screens if required.

Showcase

A collection of sites made by the original version 1 MagicGellan Beta Testers. All are based on MagicGellan and Sections.

These are tests only and not production sites. Not all are finished but do give an idea of use cases.