Spry Menu Bar

• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
  • Item 3.3
• Item 4

O spry menu bar faz parte de um conjunto de quatro spry widgets, visíveis à direita da tab spry do menu insert. São fáceis de implementar e possibilitam novas formas de organizar e manipular uma interface.

Para implementar o SpryMenuBarHorizontal precisamos de criar links na head do documento para o ficheiro SpryTabbedPanels.css e, também o ficheiro SpryMenuBar.js

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>

Qando inserimos um menu spry horizontal é definida, no corpo do documento, a estrutura do menu com vários níveis. Automaticamente são gerados os ficheiros de css, js e as imagens do menu.

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>

Definimos o construtor no fim do documento, assim como o url das imagens do menu.

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

A formatação dos painéis e das tabs pode ser alterada a partir do SpryMenuBarHorizontal.css

A inserção de um spry menu bar vertical segue os mesmos passos.