Visual Nav Demo

External Links in the menu

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, don't use "menu" class name -->
        <li><a href="http://www.google.com" target="_blank">Google</a></li>
    </ul>
</div>

<!-- main contents -->

<div id="home" class="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>
    
    <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>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum in diam metus. Morbi libero risus, adipiscing eu convallis quis, mattis in libero. Cras lobortis, sem sit amet aliquet hendrerit, nulla leo tempus urna, eu aliquam purus massa eget elit. Sed cursus tristique neque, ac commodo sapien imperdiet nec.</p><p>Fusce tincidunt, sapien in dignissim porta, leo velit egestas...

CSS

#sidemenu { left: 10px; width: 85px; }
#sidemenu li { width: 65px; }
.content { margin-left: 100px; margin-right:20px; min-width: 300px; }

JavaScript

$('#sidemenu').visualNav({
    // target the .menu class in the menu
    link : 'a.menu'
});