Menus
07/05/2010 00:00
0
Olá,
Gostaria de saber se tem como fazer menus nesse estilo:
http://weblog.dangertree.net/2009/01/29/upcoming-grails-ui-11-new-features-menus/
Tentei aqui, mas só aparece no formato "árvore".
Gostaria de saber se tem como fazer menus nesse estilo:
http://weblog.dangertree.net/2009/01/29/upcoming-grails-ui-11-new-features-menus/
Tentei aqui, mas só aparece no formato "árvore".
0
Você consegue o mesmo efeito e ainda independente de framework usando CSS.
Da uma lida nestes dois artigos da List Apart:
Menus horizontais: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
Menus hibridos (muito bacana): <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
E finalmente, este outro: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
A leitura destes artigos é, na minha opinião, fundamental para que você compreenda como DE FATO este efeito é construido.
Da uma lida nestes dois artigos da List Apart:
Menus horizontais: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
Menus hibridos (muito bacana): <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
E finalmente, este outro: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
A leitura destes artigos é, na minha opinião, fundamental para que você compreenda como DE FATO este efeito é construido.
07/05/2010 00:00
0
O q eu n entendi é q os testes que fiz, eles só aparecem em modelo Tree.
Zerei.. recomeçando...
Zerei.. recomeçando...
10/05/2010 00:00
0
Pelo que entendi o modelo puro sem CSS realmente deveria parecer uma arvore. Voce muda isso com css, se precisar, pra ficar bacana, um javascript pra fazer aqueles efeitos ao selecionar um menu (trocar de classe css) ou temporizar pra fazer aquelas cortininhas...
11/05/2010 00:00
0
Isso que tá osso, tenho um menu (teste), executo ele (em modo html) e tudo vai muito lindo,
daí resolvi fazer um teste (talvez de forma errada, mas vamo lá) levei ele pro meu projeto grails,
alterei a extensão html -> gsp, e nenhuma novidade, o meu tb veio como Tree.
daí resolvi fazer um teste (talvez de forma errada, mas vamo lá) levei ele pro meu projeto grails,
alterei a extensão html -> gsp, e nenhuma novidade, o meu tb veio como Tree.
13/05/2010 00:00
0
Pode nos disponibilizar este menu teste? pelo que deu para entender é que realmente funciona da mesma maneira que o MayogaX disse, ele da uma estrutura para você criar o menu, mas não cria o css para ela! vou tentar criar o menu aqui e retorno o resultado.
13/05/2010 00:00
0
Perdi umas 3 horas mas consegui fazer funcionar igual o exemplo do site =D.
Realmente ele usa um arquivo css para estilizar o menu, é um arquivo chamado menu.css que está na pasta "PROJETO_HOME\web-app\js\yui\2.7.0\menu\assets".
A "Unica" modificação que você teria que fazer seria adicionar a class de estilo "yui-skin-sam", a utilização desta classe está descrito no site do plugin e é esta a mesma que estiliza todo o container com os estilos do YUI. O Problema, que se você adicionar este componente em uma página que esteja utilizando um layout qualquer deve dar algum conflito entre os css da aplicação e do YUI, porém se você adicionar no proprio layout funcionando perfeitamente. Abaixo tem o layout padrão de uma aplicação main.gsp que eu utilizei.
PS1: Não se esqueça de adicionar as tags
Realmente ele usa um arquivo css para estilizar o menu, é um arquivo chamado menu.css que está na pasta "PROJETO_HOME\web-app\js\yui\2.7.0\menu\assets".
A "Unica" modificação que você teria que fazer seria adicionar a class de estilo "yui-skin-sam", a utilização desta classe está descrito no site do plugin e é esta a mesma que estiliza todo o container com os estilos do YUI. O Problema, que se você adicionar este componente em uma página que esteja utilizando um layout qualquer deve dar algum conflito entre os css da aplicação e do YUI, porém se você adicionar no proprio layout funcionando perfeitamente. Abaixo tem o layout padrão de uma aplicação main.gsp que eu utilizei.
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="yui"/>
<gui:resources components="['menu']"/>
</head>
<body class="yui-skin-sam">
<gui:menubar>
<gui:menuitem url='http://example.com'>Example</gui:menuitem>
<gui:submenu label='Foodstuffs'>
<gui:menuitem url='http://campbells.com'>Campbell's Soup</gui:menuitem>
<gui:menuitem url='http://cheetos.com'>Cheetos</gui:menuitem>
<gui:menuitem url='http://guiness.com'>Guiness</gui:menuitem>
</gui:submenu>
<gui:submenu label='Shoes'>
<gui:menuitem url='http://nike.com'>Nike</gui:menuitem>
<gui:menuitem url='http://reebok.com'>Reebok</gui:menuitem>
<gui:menuitem url='http://adidas.com'>Adidas</gui:menuitem>
</gui:submenu>
<gui:submenu id="outerSubmenu2" label="Search Engines">
<gui:menuitem url='http://yahoo.com'>Yahoo</gui:menuitem>
<gui:submenu id="innerSubmenu2" label='Google Search Results'>
<gui:menuitem url='http://google.com/search?q=yahoo'>Google on Yahoo</gui:menuitem>
<gui:menuitem url='http://google.com/search?q=msn'>Google on MSN</gui:menuitem>
<gui:menuitem url='http://google.com/search?q=google'>Google on Google</gui:menuitem>
</gui:submenu>
<gui:menuitem url='http://msn.com'>MSN</gui:menuitem>
</gui:submenu>
</gui:menubar>
<div id="spinner" class="spinner" style="display:none;">
<img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>
<div id="grailsLogo" class="logo"><a href="http://grails.org"><img src="${resource(dir:'images',file:'grails_logo.png')}" alt="Grails" border="0" /></a></div>
<g:layoutBody />
</body>
</html>
PS1: Não se esqueça de adicionar as tags
<g:javascript library="yui"/> <gui:resources components="['menu']"/>no layout também.
14/05/2010 00:00
0
Ah cara, legal.. vou testar.
Eu consegui com um outro exemplo aqui, mas vou v esse, pq eu tinha gostado do modelo
Eu consegui com um outro exemplo aqui, mas vou v esse, pq eu tinha gostado do modelo
14/05/2010 00:00
0
Só uma questã, do jeito q vc fez aí, ele continua usando o css do template do Grails, ou não?
14/05/2010 00:00
0
Desta maneira sim, pq não tem nenhum atributo do css do YUI que sobrescreve o do template grails, no site do YUI tem como ele é renderizado e as classes css de cada campo do menu :http://developer.yahoo.com/yui/menu/#skinref.
Eu só realmente não entendi pq não da para colocar o styleClass="yui-skin-sam" em uma div, só funcionou no styleClass do body mesmo!
Eu só realmente não entendi pq não da para colocar o styleClass="yui-skin-sam" em uma div, só funcionou no styleClass do body mesmo!
14/05/2010 00:00
Ainda não faz parte da comunidade???
Para se registrar, clique aqui.
Aprenda Groovy e Grails com a Formação itexto!
Newsletter Semana Groovy
Os melhores blogs de TI (e em português) em um único lugar!
