Hi Max

Could you post your current XSLT code for making the menu? And how hve you tried to apply the styles?

This should be a matter of using an .active class on the <li> element...

/Jan

<?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:umbraco.library="urn:umbraco.library"  exclude-result-prefixes="msxml umbraco.library">
  <xsl:output method="xml" omit-xml-declaration="yes"/>
  <xsl:param name="currentPage"/>
  <!-- start writing XSLT -->
  <xsl:template match="/">
    <!-- The fun starts here -->
    <xsl:call-template name="menu">
      <xsl:with-param name="level" select="1"/>
    </xsl:call-template>
  </xsl:template>
  <xsl:template name="menu">
    <xsl:param name="level"/>
    <xsl:if test="count($currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'] ) &gt; '0'">
      <ul id="level{$level}">
       
        <xsl:for-each select="$currentPage/ancestor-or-self::*  [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'] ">
         
            <li> <xsl:if test="$currentPage/@id = current()/@id">
              <xsl:attribute name="class">hasselected</xsl:attribute>
            </xsl:if>
            <a  href="{umbraco.library:NiceUrl(@id)}" >
                <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                <xsl:attribute name="class">selected</xsl:attribute>
              </xsl:if>
              <xsl:if test="$level = 1">
                <!--<xsl:attribute name="id">
                  nav-<xsl:value-of select="./umbracoUrlName"/>
                </xsl:attribute>-->
                <xsl:attribute name="class">show-children</xsl:attribute>
              </xsl:if>
              <xsl:value-of select="@nodeName"/>
            </a>
            <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
              <xsl:choose>
                  <xsl:when test="@id = 1101">
                    <xsl:call-template name="office">
                    </xsl:call-template>
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:call-template name="menu">
                      <xsl:with-param name="level" select="$level+1"/>
                    </xsl:call-template>
                  </xsl:otherwise>
                </xsl:choose> 
            </xsl:if>
            </li>     
          
        </xsl:for-each>
      </ul>
    </xsl:if>
  </xsl:template>
  
  <xsl:template name="office">
    <div id="menuSubHeader" style="height:160px;">
      <ul>
    <xsl:for-each select="$currentPage/ancestor-or-self::*/* [@isDoc and string(umbracoNaviHide) != '1'] ">
      <xsl:if test="@parentID = 1101">

        <div id="menuSubheaderOffice"> 
          <li>
          <xsl:if test="$currentPage/@id = current()/@id">
            <xsl:attribute name="class">liSelected</xsl:attribute>
          </xsl:if>
            <a href="{umbraco.library:NiceUrl(@id)}">
          
                <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                <xsl:attribute name="class">liSelected</xsl:attribute>
              </xsl:if>
                <xsl:attribute name="id">
                  nav-<xsl:value-of select="./umbracoUrlName"/>
                </xsl:attribute>
              
              <xsl:value-of select="@nodeName"/>
            </a>
        </li>
        </div>     
      </xsl:if>
    </xsl:for-each>
    </ul>
        </div>
    </xsl:template>

</xsl:stylesheet>

here is the styles related to this menu:

#menu a {
  font-size : 11px;
  font-weight : bold;
  color : white;
  display : block;
  height : 20px;
  background : transparent;
  text-decoration : none;
  
  vertical-align:middle;
}
#menu ul
{
  list-style: none;
  margin:0;
  padding:0;
}
#menu ul li {
  list-style: none;
  text-align : left;
  background-image : url(/media/45/btn_blue_arrow.jpg);
  background-repeat : no-repeat;
  margin: 2px;

  font-size : 10px;
  vertical-align:middle;
}
#menu ul li a{
  margin-left:10px;
  margin-top:0px;

}
#menu ul li a:hover {
text-decoration : underline;


}

#menu ul li.selected {
 background-image : url(/media/4376/btn_red_arrowdown.jpg);
  background-repeat : no-repeat;
  

}



#menu ul#level2 li.selected
{
 background-image :none; 
 
}



#menu ul#level2 li.hasselected a:visited 
{ 
  color:#bc2723;
}




#menu ul li ul {
margin-left : 10px;
}
#menu ul {
list-style : none;
margin : 0;
text-align : left;
}
#menu ul ul {
margin-top : 5px;
}
#menu ul li a:hover {
text-decoration : underline;

}
#menu ul li ul {
margin-left : 10px;
}
#menu ul li ul li {
background : none;

font-size : 10px;
text-align : left;
}
#menu ul li ul li a {
font-size : 10px;
text-align : left;
color : #0b67b1;
text-align : left;

}
#menu ul li ul li a:active {
text-decoration : underline;
color : red;

}

#menu ul li ul li a:hover {
text-decoration : underline;
color : red;
}

any ideas anyone??

Max,

I can not directly translate this directly into umbraco-speak, but here's how I would do it, basically using a 2-tiered unordered list + jquery accordion:

1. Build a two-tiered unordered list of the site structure I wish to have available as a navigational item. Note: It doesn't matter if the first tier has children. I believe there's at least one pre-made xslt for this.
2. I'd use jquery's accordion for the effect you've shown, against that unordered list. You'll find better performance doing that than what I'm seeing at the scan-trans site.
3. The accordion parent div will also be the first tier list item, so that's what we'll style to suit our needs. I don't know it off the top of my head, but the jquery accordion library has the selectors for every styling instance you've specified, such as li.active (meaning you've selected it and it now shows its children)
4. The jquery accordion only allows for a single parent to be expaned, which they explain is a better UI. I agree.

is working on a reply...