Options

Wiki Pages: Home | Setup | Options | Methods | Callbacks | Log

Options

Plugin function options

• link

  • The script will target this element in the visualNav menu.
  • Default is 'a', but if you have submenus you can target the main menu link with a specific class 'a.menu'.
  • Here is a demo on how to use this option to include external links in the menu.

• targetAttr

  • The link option (above) attribute will contain the main content ID (or class for non-link HTML).
  • Default is 'href' for the 'a' which should only contain a content ID (e.g. "#Home"), because using a non-hash (#) will break the browser targeting from the location bar.
  • For non 'a' links, you can use content ID or content class (which should still be unique).. e.g. "#Home" or ".contact".

• selectedAppliedTo

  • The inViewClass and selectedClass classes are applied to this element. The script uses this option to target, because you cannot target a parent class with CSS (the 'li' contains the 'a').
  • Default value is 'li' which is the HTML element that contains the link 'a'.
  • If you want to target the link only, then use the same value as is in the link option (e.g. 'a').

• contentClass

  • Each block of main content (not the visualNav menu) should be wrapped. This option targets the class of the wrapper because the script needs to determine the height of the content to best update the menu.
  • Default value is 'content'.

• contentLinks

  • The plugin will find Links anywhere on the page with this class. These links will act like the menu and smooth scroll to the matching section.
  • Default value is 'visualNav'.

• externalLinks

  • Add this class to any external links that visualNav should ignore.
  • Default value is external

• useHash

  • If true, the hash of the currently displayed content block will be added to the page url (e.g. #home will be added to the url if the Home content block is currently displayed).
  • This only works when interacting with the menu or links tied to the menu. Manually scrolling the page will no update the hash.
  • Default value is 'true'.

Menu classes

• inViewClass

  • This class is applied to the visualNav menu to all "in viewport" elements (margin adjusted, see bottomMargin below for details).
  • Default value is 'inView'.

• selectedClass

  • This class is applied to the visualNav menu to the current content.
  • Default value is 'selected'.

• currentContent

  • This class is applied to the content block when it is currently selected in the menu.
  • See this working in the section stepper demo.
  • Default value is 'current'

Appearance

• bottomMargin

  

  • This value is the height in pixels measured from the bottom of each main content block (see image above).
  • When the bottomMargin of a block hits the top of the viewport, that block is then considered out of the view port. Then the next content block is set as "selected" and the visualNav menu updates to show that one as current.
  • In the last block (contacts in this demo), when the top edge of the bottomMargin hits the bottom of the viewport, the visualNav menu switches to the last item. To state this another way, when the bottomMargin of the last block comes into view, the menu selects it.
  • In the image above, you can see the bottomMargin of the "Projects" block is just above the viewport. The visualNav menu updated to show that the "About" block is now the current block. If you continue scrolling and the bottomMargin of the "Contacts" block gets to the same point as the "Contacts" title (seen in the image), then the menu will update to show "Contacts" as selected.
  • Default value is 100 (pixels).

• fitContent

  • If true, the contentClass width will be adjusted to fit inside the viewable browser window (for horizontal pages).
  • To change the left and right margin, adjust the contentClass css left and right margin (e.g. the demo ".content" css margin is set as follows: "margin: 10px 75px 50px 175px;")
  • Default value is false.

• offsetTop

  • Include a top offset (in pixels), or a jQuery element (height will be measured), of any top menu or gap you need at the top of the page.
  • Default value is 0 (zero)

• scrollOnInit

  • When true, and no hash is set, the first item on the menu will be scrolled to automatically on initialization.
  • If false, and no hash is set, the page will not scroll; positioned at the top.
  • Default is false; the previous behavior was as if this option were set as true.

Animation

• animationTime

  • The animation time is the time in milliseconds that the menu will scroll to the selected section.

  • Set this option to a numerical value (time in milliseconds)

  • As of v2.5.0, a function can be used. The travel distance in pixels (absolute value) is provided as a parameter; the function must return a time in milliseconds.

    // this is just an example
    animationTime: function( distance ) {
      // distance in pixels; return time in milliseconds
      // 1000 pixels => 500ms; 10000 pixels => 5000ms
      return distance / 2;
    }

  • Default value is 1200 (milliseconds).

• easing

  • You can set both the horizontal and vertical easing in this option (jQuery version 1.4+).
  • The first part of the array is applied to the horizontal movement and the second variable is applied to the vertical movement.
  • Include the easing plugin or jQuery UI if you plan to use anything other than 'swing' or 'linear'.
  • Default value is "[ 'swing', 'swing' ]".

• stopOnInteraction (New in version 2.4)

  • If the user presses any key or scrolls the mouse, the animation will cancel
  • Set this option value to false to allow scrolling to continue, as is needed in the section stepper demo.
  • Default value is true.