Branding SharePoint 2013: Navegação Vertical à Esquerda Colapsável

Vamos ver como podemos tornar a navegação standard à esquerda colapsável.

Versão simples: Escondemos todos os elementos ul de segundo nível. Depois mostramos apenas o ul que for filho do li que estiver marcado com a classe .selected.

#sideNavBox .ms-core-listMenu-verticalBox ul ul {
 display: none;
}

#sideNavBox .ms-core-listMenu-verticalBox ul li.selected ul {
 display: block;
}

O problema. O SharePoint apenas marca o elemento actual como selecionado. Se estivermos num elemento do segundo nível, a navegação nesse ramo vai colapsar porque o elemento pai não vai estar marcado como seleccionado.

Podemos usar jQuery para corrigir este problema.

// closest() vai olhar para o próprio elemento em que está a ser aplicado, por isso temos de excluí-lo
jQuery("#sideNavBox li.selected").closest("#sideNavBox ul.root li.static:not(.selected)").addClass("selected");

Pode-se usar uma classe diferente, mas ai teremos que actualizar também o CSS.

Vejamos isto em acção:

"News" não tem filhos e está selecionado. "Organization" tem filhos e está colapsado
"News" não tem filhos e está selecionado. "Organization" tem filhos e está colapsado
O nível de topo de "Organization" está selecionado
O nível de topo de "Organization" está selecionado
Um filho de "Organization" está selecionado
Um filho de "Organization" está selecionado

Artigos relacionados