Criando um Menu para Aplicações Web com o controle skMenu.
Para fazer um menu, muito desenvolvedores utilizam das mais diversas técnicas, seja ela utilizando um TreeView ou um LinkButton.
Neste artigo vou mostrar como desenvolver um menu rápido e muito fácil de adaptar ao seu gosto.
Para começar, iniciaremos um projeto Web Application chamado skMenu.
Referenciando o Objeto skMenu
Adicione a referência skMenu (skMenu.dll). Para baixar a DLL diretamente do site dos desenvolvedores, acesse http://skmmenu.com/menu/. Este componente é FREE!!!!
Criando o Objeto skMenu
Existem duas formas de fazer isto:
1) Adicione na ToolBox o controle, (Add/Remove Items) e direcione para a DLL do skMenu.
2) No form Webform1.aspx adicionado automaticamente quando criamos o projeto, vá no HTML e adicione a seguinte directiva:
<%@ Register TagPrefix="cc1" Namespace="skmMenu" Assembly="skmMenu" %>
Agora vamos colocar o controle Menu dentro de uma tabela. Adicione uma tabela com uma linha e uma coluna.
Dentro da célula, coloque o seguinte código:
<cc1:menu id="Menu" runat="server" BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px"
Opacity="100" Opacity-Length="3" GridLines="Both" Font-Bold="True" ForeColor="DimGray" Font-Size="Smaller" Layout="Horizontal"
Cursor="Pointer" ItemSpacing="0" Font-Names="Verdana" BackColor="Transparent" Width="800px" MenuFadeDelay="5" HighlightTopMenu="False">
<UnselectedMenuItemStyle Font-Size="Smaller"></UnselectedMenuItemStyle>
<SelectedMenuItemStyle Font-Size="Smaller" BackColor="Silver"></SelectedMenuItemStyle>
</cc1:menu>
Volte no Design da página e você verá que o controle foi adicionado. Você poderá configurá-lo em modo Design, alterando cor de fundo, fonte, cor da fonte, espaçamento entre os menus, etc.
Alimentando o Menu
O skMenu trabalha com arquivos XML. Vou utilizar o exemplo abaixo para alimentar meu Menu, mas ele pode ser alterado facilmente. Veja a estrutura do arquivo XML.
<menu> – Inicia o menu
<menuItem> – Inicia um item para o menu.
<text> - Texto que aparecerá no menu.
<url> - URL
Existe um documento dizendo quais sao os nodes possiveis para serem utilizados na pagina: http://skmmenu.com/menu/Download/XMLStructure.html
Bom, então se eu quiser adicionar um menu com as opções Home e Sair, vejam como ficará meu arquivo XML:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<menu>
<menuItem>
<text>HOME</text>
<url>frmDefault.aspx</url>
</menuItem>
<menuItem>
<text>SAIR</text>
<url>frmSair.aspx</url>
</menuItem>
</menu>
Salve com o nome de menu.xml.
OBS.: Cuidado ao criar o arquivo XML, pois os nomes das TAGS são CASE SENSITIVE.
Agora abra o Code Behind e no evento Page_Load coloque o código:
'Seto o meu XML como datasource do Menu.
Menu.DataSource = "c:\inetpub\wwwroot\skMenu\menu.xml"
'DataBind
Menu.DataBind()
Até agora o menu ficou muito básico, vamos adicionar um SubMenu para ficar um pouco mais profissional.
Alteramos nosso XML já criado adicionando um subMenu chamado Webmail logo abaixo do menu HOME:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<menu>
<menuItem>
<text>HOME</text>
<url>frmMenu.aspx</url>
<subMenu>
<menuItem>
<text>WEBMAIL</text>
<url>http://webmail.uol.com.br</url>
</menuItem>
</subMenu>
</menuItem>
<menuItem>
<text>SAIR</text>
<url>frmSair.aspx</url>
</menuItem>
</menu>
Agora execute o projeto e veja que o menu foi alterado. Isso significa que eu posso criar meus menus somente alterando o arquivo XML, em seguida faço o upload do arquivo e pronto, meu menu está com novas opções!!!
Você pode alterar várias propriedades do menu pelo Design, como por exemplo o tempo de Fade (efeito do botão quando passo o mouse em cima), BorderWidth (tamanho da borda do menu), etc, basta você gastar 5 minutos de seu tempo.
Qualquer dúvida, mande um e-mail.
Abraço!
David Pomarico
Analista de Sistemas - São Paulo - Brasil
http://br.thespoke.net/MyBlog/dpomarico/MyBlog.aspx
email: dcpomarico@uol.com.br