Skip to content

Setup

Jump to bottom Edit New page
Mottie edited this page Apr 5, 2015 · 7 revisions

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

Sections: Default | Alternate | Bootstrap

Default setup

CSS (minimal setup; updated in v2.3)

/* side menu with visualNav */
#sidemenu             { text-align: center; position: fixed; top: 20px; left: 20px; background: #444; width: 120px; z-index: 10; padding: 1px 1px 5px 1px; }
#sidemenu ul          { list-style-type: none; margin: 0; padding: 0; }
#sidemenu li          { margin: 5px; padding: 5px; width: 100px; text-align: center; border: transparent 1px solid; }
#sidemenu a           { text-decoration: none; color: #bbbbff; }
#sidemenu a:hover     { color: #fff; }
#sidemenu .selected   { background: #555; }
#sidemenu .inView     { border-color: #111; }

/* main content header & wrapper */
.content {
  min-width: 500px;
  margin: 10px 75px 10px 175px;
  padding: 10px;
}
.inner-content {
  background: #363636;
  border: #555 1px solid;
  padding: 10px 20px;
}

HTML (updated in v2.3)

<!-- visualNav default menu -->
<div id="sidemenu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

<!-- main contents -->
<div>

  <div id="home" class="content">
    <div class="inner-content">
      <h2>Home</h2>
      Home Content Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

  <div id="work" class="content">
    <div class="inner-content">
      <h2>Work</h2>
      Work Content Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

  <div id="contact" class="content">
    <div class="inner-content">
      <h2>Contact</h2>
      Contact Info Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

</div>

Script (all default settings shown)

$(function(){
  $('#sidemenu').visualNav({
    link              : 'a',         // add a link class, as necessary (e.g. 'a.menu')
    targetAttr        : 'href',      // added in case you have link = "div" and attribute something like
    selectedAppliedTo : 'li',        // where to add the selected class name; to only apply to the link, use the same value as is in the link option
    contentClass      : 'content',   // content class to get height of the section
    contentLinks      : 'visualNav', // class name of links inside the content that act like the visualNav menu (smooth scroll)
    externalLinks     : 'external',  // class name of links that link to external content.
    useHash           : true,        // if true, the location hash will be updated

    // Classes added to items
    inViewClass       : 'inView',    // css class added to items in the viewport
    selectedClass     : 'selected',  // css class applied to menu when a link is selected (highlighted)
    currentContent    : 'current',   // css class applied to the content block when it is currently selected in the menu.

    // Appearance
    bottomMargin      : 100,         // margin from the end of the page where the last menu item is used (in case the target is short)
    fitContent        : false,       // If true, the contentClass width will be adjusted to fit the browser window (for horizontal pages).
    offsetTop         : 0,           // add a top offset value (pixels) or jQuery element (height is measured), of any top menu or gap.
    scrollOnInit      : false,       // scroll to first item automatically on initialization

    // Animation
    animationTime     : 1200,        // page scrolling time in milliseconds or function( distance ) { return milliseconds; }
    stopOnInteraction : true,        // if the user presses any key or scrolls the mouse, the animation will cancel
    easing            : [ 'swing', 'swing' ], // horizontal, vertical easing; it might be best to leave one axis as swing [ 'swing', 'easeInCirc' ]

    // Callbacks
    // visNav is visualNavigation object (see the callbacks page)
    // $selected is a jQuery object of the currently selected content (class name from "contentClass")
    initialized       : function(visNav, $selected){ }, // Callback executed when the visualNav plugin has finished initializing
    beforeAnimation   : function(visNav, $selected){ }, // Callback executed before the animation begins moving to the targetted element
    complete          : function(visNav, $selected){ }, // Callback executed when the targetted element is in view and scrolling animation has completed
    changed           : function(visNav, $selected){ }  // Callback executed every time the current menu item changes

  });
});

Alternate setup

  • This side menu uses divs with a title attribute. The value in this attribute can be used to target an Id or a class (which should be unique).
  • It is important to note, that this menu will NOT work with javascript disabled, whereas the default one will work.
  • Also take note that the links in the content target the class <a href=".contact" class="visualNav">Contact</a>. The browser location will not update and bookmarks attempting to target this block will not work.

CSS (minimal setup)

/* side menu with visualNav */
#menu              { position: fixed; top: 20px; left: 20px; background: #444; width: 120px; z-index: 10; padding: 1px 1px 5px 1px; }
#menu div.link     { margin: 5px; padding: 5px; width: 100px; text-align: center; }
#menu div.selected { background: #555; }
#menu div:hover    { color: #fff; }

/* main content header & wrapper */
.content {
  min-width: 500px;
  margin: 10px 75px 10px 175px;
  padding: 10px;
}
.inner-content {
  background: #363636;
  border: #555 1px solid;
  padding: 10px 20px;
}

HTML

<!-- visualNav menu using divs -->
<div id="menu">
  <div class="link" title="#Home">Home</div>
  <div class="link" title="#work">Work</div>
  <!-- using a class name here will not work if javascript is disabled -->
  <div class="link" title=".contact">Contact</div>
</div>

<!-- main contents -->
<div>

  <div id="home" class="content">
    <div class="inner-content">
      <h2>Home</h2>
      Home Content Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

  <div id="work" class="content">
    <div class="inner-content">
      <h2>Work</h2>
      Work Content Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

  <div class="contact content">
    <div class="inner-content">
      <h2>Contact</h2>
      Contact Info Here...
      <!-- optional control links -->
      <div class="visualNav">
        Go to: <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#contact">Contact</a>
      </div>
    </div>
  </div>

</div>

Script

$(function(){
  $('#menu').visualNav({
    link              : 'div.link', // Add a link class, as necessary
    targetAttr        : 'title',    // added in case you have link = "div" and attribute something like
    selectedAppliedTo : 'div.link'  // to only apply to the link, use the same value as is in the link option
  });
});

Bootstrap (HTML5) setup

  • This example using HTML5 tags.
  • It is important to note, that this layout will not work in older versions of IE unless a HTML5shiv is included (as it is with Modernizr).
  • Bootstrap is actually set up not using HTML5, but this example combines them.
  • See the bootstrap demo.

CSS (minimal setup)

/* main content header & wrapper */
.content {
  min-width: 500px;
  margin: 10px 75px 10px 175px;
  padding: 10px;
}
.inner-content {
  background: #363636;
  border: #555 1px solid;
  padding: 10px 20px;
}

HTML

<!-- Bootstrap menu with visualNav applied -->
<nav class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#blog">Blog</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>

      <li class="divider-vertical"></li>

      <li><a class="external" href="http://google.com">Google</a></li>

    </ul>
  </div>
</nav>

<!-- main contents -->
<section>

  <article id="home" class="content">
    <div class="inner-content">
      <header>
        <h2>Home</h2>
      </header>
      Home Content Here...
      <!-- optional control links -->
      <nav class="visualNav">
        <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#blog">Blog</a>
      </nav>
    </div>
  </article>

  <article id="work" class="content">
    <div class="inner-content">
      <header>
        <h2>Work</h2>
      </header>
      Work Content Here...
      <!-- optional control links -->
      <nav class="visualNav">
        <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#blog">Blog</a>
      </nav>
    </div>
  </article>

  <article id="contact" class="content">
    <div class="inner-content">
      <header>
        <h2>Contact</h2>
      </header>
      Contact Content Here...
      <!-- optional control links -->
      <nav class="visualNav">
        <a href="#home">Home</a> | <a href="#work">Work</a> | <a href="#blog">Blog</a>
      </nav>
    </div>
  </article>

</section>

Script

$(function(){
  $('.navbar').visualNav({
    selectedClass : 'active'
  });
});
Add a custom footer
Add a custom sidebar
Clone this wiki locally