Take a look here http://our.umbraco.org/projects/cogworks---flexible-navigation

Its a project which is easy installed into umbraco and works a treat and is fully customisable for levels etc. I Have used it on a few projects and works everytime.

Tom

Is there a reason why you are wanting to change the vertical nav manually instead of having it generated automatically? 

To make it dynamic:
You can save a lot of time and trouble buy using "List Sub Pages From Current Page."  It one of the provided XSLT templates.  A little bit of tweaking and you have a nav that is similar to the site you provided. 

To change it manually:
You should be able to get away with using the Related Links datatype that is provided with Umbraco.

Hope this helps.

--
Donald

Donald,

Can you point me to a tutorial on List Sup Pages from Current Page, or an example. Thanks.

Isaac,

Just go to the Developer, right click on " XSLT Files" and click "Create," name it SubNav (or something similar), under "Choose a template" select "List Sub Pages From Current Page" and then click create.  This will give you all of the code to make it work.  Just drop the macro (that it created automatically for you) into your template.

--
Donald

Here's another one,which open's and close the sub-levels without postback

It can be seen here www.vgc.dk

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:myFuncs="urn:my-scripts"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>
  <xsl:param name="startLevel" select="2"/>

<msxml:script implements-prefix="myFuncs" language="JavaScript">
<![CDATA[
var myArray = new Array();

function GetCount(){    
    return myArray.length-1;
}
function Incr(){
    myArray.push(0);
}

]]>
</msxml:script>

  <xsl:variable name="openPosition">
    <xsl:for-each select="$currentPage/ancestor-or-self::node[@level = 2]/node[string(./data [@alias='umbracoNaviHide']) != '1']">
      <xsl:if test="count(current()/node[string(./data [@alias='umbracoNaviHide']) != '1']) &gt; 0">
        <xsl:value-of select="myFuncs:Incr()"/>
        <xsl:for-each select="current()/node[string(./data [@alias='umbracoNaviHide']) != '1']">
          <xsl:if test="$currentPage/@id = @id">
            <xsl:value-of select="myFuncs:GetCount()"/>
          </xsl:if>
        </xsl:for-each>
      </xsl:if>
    </xsl:for-each>
  </xsl:variable>

<xsl:template match="/">
    <xsl:if test="count($currentPage/ancestor-or-self::node [@level = 2]/node[string(./data [@alias='umbracoNaviHide']) != '1']) &gt; 0">
      <ul id="SubNavi" class="SubNavi">
        <xsl:for-each select="$currentPage/ancestor-or-self::node[@level = 2]/node[string(./data [@alias='umbracoNaviHide']) != '1']">
          <li>
            <a>
              <xsl:attribute name="href">
                <xsl:choose>
                  <xsl:when test="@nodeTypeAlias='PlaceHolder'">
                    <xsl:value-of select="'#'"/>
                  </xsl:when>
                  <xsl:when test="@nodeTypeAlias='URL'">
                    <xsl:value-of select="./data [@alias='url']"/>
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:value-of select="umbraco.library:NiceUrl(@id)"/>
                  </xsl:otherwise>
                </xsl:choose>
             </xsl:attribute>
             <xsl:if test="@nodeTypeAlias='URL' and string(data [@alias='target']) !=''">
                <xsl:attribute name="target">
                   <xsl:value-of select="./data [@alias='target']"/>
                </xsl:attribute>
              </xsl:if>
              <xsl:value-of select="@nodeName"/>
            </a>
             <xsl:if test="count(current()/node[string(./data [@alias='umbracoNaviHide']) != '1']) &gt; 0">
              <ul>
                <xsl:for-each select="current()/node[string(./data [@alias='umbracoNaviHide']) != '1']">
                  <li>
                    <a href="{umbraco.library:NiceUrl(@id)}">
                      <xsl:value-of select="@nodeName"/>
                    </a>
                  </li>
                </xsl:for-each>
              </ul>
             </xsl:if>
          </li>
        </xsl:for-each>
      </ul>
    </xsl:if>
    <script type="text/javascript">
      function initMenu() {
        $('#SubNavi ul').hide();
        <xsl:if test="string($openPosition) != ''">
     $('#SubNavi ul:nth(<xsl:value-of select="$openPosition"/>)').show();
    </xsl:if>
        $('#SubNavi li a').click(
        function() {
        var checkElement = $(this).next();
        if((checkElement.is('ul')) <xsl:text disable-output-escaping="yes">&amp;&amp;</xsl:text> (checkElement.is(':visible'))) {
          return false;
        }
        if((checkElement.is('ul')) <xsl:text disable-output-escaping="yes">&amp;&amp;</xsl:text> (!checkElement.is(':visible'))) {
        $('#SubNavi ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
        }
        );
      }
      $(document).ready(function() {initMenu();});
    </script>

  </xsl:template>

</xsl:stylesheet>

/Paul S

Tom,

I have a question about about the flexible navigation. How do you set up CSS for it? I am having the darndest of times. Thanks.

is working on a reply...