Features

  • Style smart links to match your content
  • Add an unlimited number of smart navigation items
  • Add icons to your smart navigation
  • Control scrolling animation style
  • Insert dividers between navigation items
  • Configure smart link text alignment
  • Control offset for navigation items and content
  • Set navigation item widths based on breakpoints
  • Add content below navigation items
  • Include links to external pages
  • Adjust scroll threshold
  • Ability to display navigation items as plain links
  • Smart links hide automatically at the Mobile breakpoint

Example

Image
Label

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
  • Bulleted List Item
Image
Label

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image
Label

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.

Steve Jobs (from the New York Times)

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Sapien platea morbi dolor lacus nunc, nunc ullamcorper

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.


This is a short little note.


Using Glide

General

Offset
Determine the distance from the top of the browser window that the navigation items should appear. When a navigation item is clicked the content will also scroll to this same position. You can set them to be exactly the same, or you can set them independent of one another.

Scroll Effect

Animation Type
Set the style of the animation. This style is applied to the content as it scrolls into place. You can choose from the following animation types:

  • Standard
  • Ease Out
  • Explosive
  • Out and Back
  • Elastic
  • Bounce

Scroll Speed
Allows you to adjust the speed of the content as it scrolls into position when navigation items are clicked on.

Navigation Items

Nav Items
Define the colors for the navigation items. Glide provides color pickers for the Normal, Hover, and Current colors for both the background and text for the navigation items. You can also define the color of the dividers as well.

Tablet & Desktop Width
Define the width of the navigation items to work best with your layout. You can adjust them, setting different widths for the Tablet and Desktop breakpoints.

Text Alignment
Allows you to set the justification of the Glide stacks navigation text. You can set the alignment to Left, Center or Right.

Bold Current Item
Enable to have the text of the current navigation item appear bolded.

Separate Items
By default the navigation items are grouped together in a nice looking block of items. Using the Separate Items feature breaks them apart into individual items.

Border Radius
Lets you define the radius for the rounded corners on the navigation items.

Nav Items as Plain Text
Remove all the frills and styling from the navigation items and display them as plain, everyday normal links.

  • Please Note: Glide Navigation Items are always hidden at the Mobile breakpoint to ensure that your content fits properly.

Navigation Content

Nav Content
Enabling this feature opens up a drop zone underneath the navigation items allowing you to insert additional content in that area.

Advanced

Scroll Threshold
Adjusting this slider determines how close to the top of the page a navigation content area has to get before it marks the related navigation item as being the current item.


Adding Navigation & Content Sections

Navigation items and content sections are added by clicking the small blue plus sign at the bottom of the stack. One column has a blue plus sign for the navigation items and another for the content sections.

  • Please Note: You always need the same number of navigation items in your Glide stack as you have content sections. We’ve built the Glide stack to number each of the navigation items and content sections in Edit Mode for you so that you can easily keep track of this.

Navigation Items (Child Stack)

Navigation Items
In addition to navigation items, in the navigation column, you can also add dividers to breakup the layout of the navigation items.

Each navigation item child stack has options of its own:

Label
Set the navigation item’s text label.

Icon
Include an icon alongside the text label in your navigation item. You have over 300 different icons to choose from.

Advanced: External Link
You can choose to assign a link to a navigation items instead of having it relate to a specific section in the Glide stack. This can be used to link to pages within your site or elsewhere on the web.

Content Section (Child Stack)

There are no additional features found in the Content Section child stack.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us