Adicionando atributos às páginas com Zend Navigation

Fala galera

Hoje vamos para o segundo artigo da série sobre o Zend Navigation. Vamos aprender a adicionar atributos às páginas. Antes de ler este artigo, sugiro que leia o primeiro da série, porque usaremos como base os códigos postados lá.

Então, para este artigo, vamos adicionar alguns atributos HTML ao menu, como class e title.

Vamos relembrar como estava nosso navigation.ini?

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"

Agora, para adicionarmos uma class a um item do menu (tag a), apenas adicionamos o atributo class à página que queremos. Vamos adicionar a classe home para a página home.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"

Simples assim. Teremos assim um html do menu como abaixo:

<ul class="navigation">
    <li class="active">
        <a class="home" href="/navigation/public/">Início</a>
    </li>
    <li>
        <a href="/navigation/public/empresa">A empresa</a>
    </li>
    <li>
        <a href="/navigation/public/noticias">Notícias</a>
    </li>
    <li>
        <a href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Certo, mas pra que serve isto? Imagina que o seu menu tem ícones diferentes para cada página… Pronto!!! Só formatar o CSS, como abaixo:

                        div#top ul.navigation li a.home {
                                background: url(../img/icons/house.png) no-repeat 10px center ;
                                padding-left: 35px;
                        }

                        div#top ul.navigation li a:hover, div#top ul.navigation li.active {
                                background-color: gray;
                        }

Usando esta imagem como ícone.

Agora, vamos adicionar um title para cada página. Alguém arrisca como fazemos isto? Se você disse para fazer igual fizemos com a class, ACERTOU!!! Então, vamos ao código.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"

Isto gera um HTML assim:

<ul class="navigation">
    <li>
        <a title="Página Inicial" class="home" href="/navigation/public/">Início</a>
    </li>
    <li class="active">
        <a title="Informações sobre a empresa" href="/navigation/public/empresa">A empresa</a>
    </li>
    <li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
    </li>
    <li>
        <a title="Entre em contato conosco" href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Com isto, temos um menu um pouco mais flexível em termos de HTML/CSS, permitindo formatações diferentes para cada item do menu, além de poder adicionar o title, importante para acessibilidade e SEO.

Por hoje é só. No próximo artigo vamos adicionar páginas às páginas já existentes e configurar a exibição do menu, mostrando em locais separados o menu e o sub-menu. Aguardem e comentem!!!

Carlos Eduardo

Postado também no Fórum iMasters