Visual Nav Playground

https://github.com/Mottie/visualNav

by Mottie

HTML

<script src="http://mottie.github.com/visualNav/js/jquery.easing.1.2.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/visualNav/css/demo.css">
<script src="http://mottie.github.com/visualNav/js/jquery.visualNav.js"></script>
<!-- menu with visualNav applied -->
<div id="sidemenu">
    <ul>
        <li><a class="menu" href="#home">Home</a></li>
        <li><a class="menu" href="#work">Work</a></li>
        <li><a class="menu" href="#blog">Blog</a></li>
        <li><a class="menu" href="#projects">Projects</a></li>
        <li><a class="menu" href="#about">About</a></li>
        <li><a class="menu" href="#contact">Contact</a></li>
        <!-- External Link -->
        <li><a class="external" href="http://www.google.com" target="_blank">Google</a></li>
    </ul>
</div>
<!-- main contents -->
<div id="home" class="content">
    <div class="inner-content">
         <h2>Home</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae sem nec urna interdum tempor vitae quis dolor. Nulla congue, turpis vitae dapibus gravida, purus turpis ornare nibh, sed ornare augue nulla ut mi. Maecenas ligula ante, fermentum ut imperdiet viverra, tristique in risus. Fusce interdum magna et felis aliquam pulvinar.
        <br/> <span class="right">
            <img src="http://mottie.github.com/visualNav/images/home.jpg" height="300" alt="scenery"/>
            <br/>
            <a class="test-link" href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=732">Image: prozac1 / FreeDigitalPhotos.net</a>
        </span>

        <p>Suspendisse nec dui quam. Donec in nibh urna. Donec blandit consequat augue vitae sollicitudin. Nunc ultrices, urna sed cursus adipiscing, dolor elit blandit metus, at lacinia velit ante et nibh. Etiam eget erat felis. Sed ornare, tellus a aliquet dapibus, ante risus suscipit velit, et faucibus purus sem ut leo.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;...

CSS

#sidemenu {
    left: 10px;
    top: 10px;
    width: 85px;
}
#sidemenu li {
    width: 65px;
}
.content {
    min-width: 300px;
    margin: 10px 20px 10px 105px;
    padding: 10px;
}
.inner-content {
    background: #363636;
    border: #555 1px solid;
    padding: 10px 20px;
}

JavaScript

$(function () {
    $('#sidemenu').visualNav({

        // *** Menu ***
        // add a link class, as necessary (e.g. 'a.menu')
        link: 'a',
        // added in case you have link = "div" and attribute something like
        targetAttr: 'href',
        // where to add the selected class name; to only apply to the link,
        // use the same value as is in the link option ('a')
        selectedAppliedTo: 'li',

        // *** Content ***
        // content class to get height of the section
        contentClass: 'content',
        // class name of links inside the content that act like the
        // visualNav menu (smooth scroll)
        contentLinks: 'visualNav',
        // class name of links that link to external content.
        externalLinks: 'external',
        // if true, the location hash will be updated
        useHash: true,

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

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

        // *** Animation ***
        // page scrolling time in milliseconds, or
        // function( distance ) { return milliseconds; }
        animationTime: 1200,
        // if the user presses...