Menu de itens ocupando 100% da tela

Menu / Menu Árvore
#1

Boa tarde!

Acredito que a solução seja simples, porém não consegui resolver. Nos menus que criei, todos tem apenas o tamanho tal qual a quantidade de itens deste, porém gostaria que este ocupe 100% da tela (na horizontal), assim como nos menus de exemplo do ScriptCase.

Uma solução alternativa que encontrei é alterar (acrescentar o código) diretamente no fonte no seguinte ponto:

Mas fica a pergunta: É possível fazer esta alteração diretamente no ScriptCase, pois deste modo toda vez que o código for gerado, tem-se a necessidade de se fazer esta alteração (na unha…)?

Grato pela atenção de todos!

Leandro José Hermann

#2

Também estou precisando desta solução.

#3

leandher,

Utilizo o menu com o tema Modern/Blue, apliquei a alteração sugerida mas não teve o efeito esperado, deve ser por vc utilizar outro tema.

Da para testar com o Modern/Blue?

Obrigado

#4

George, utilizo também o mesmo tema de menu.

No arquivo menu.php, pesquise por “topmenu”, deve estar lá pela linha “2377” no meu caso. deve ter algo parecido com isto:

/* Controle de Target */
function menu_escreveMenu($arr_menu)
{
$last = ‘’;
$itemClass = ’ topfirst’;
$subSize = 2;
$subCount = array();
$tabSpace = 1;
$intMult = 2;
$aMenuItemList = array();
foreach ($arr_menu as $ind => $resto)
{
$aMenuItemList[] = $resto;
}
?>
[size=12pt]

    [/size]

    <?php for ($i = 0; $i < sizeof($aMenuItemList); $i++) { if (0 == $aMenuItemList[$i]['level']) { $last = $aMenuItemList[$i]['id']; } } for ($i = 0; $i < sizeof($aMenuItemList); $i++) { if ($last == $aMenuItemList[$i]['id']) { $itemClass = ' toplast'; } $htmlClass = ''; if (0 == $aMenuItemList[$i]['level']) { $htmlClass = ' class="topmenu' . $itemClass; if ($aMenuItemList[$i + 1] && $aMenuItemList[$i]['level'] < $aMenuItemList[$i + 1]['level']) { $htmlClass .= ' toproot'; } $htmlClass .= '"'; } ?>

    altere a linha marcada para:

      O texto que apresentei anteriormente é somente a saía em html, apresentada no browser.

      Leandro José Hermann

    #5

    Obrigado Leandro, vou testar.

    #6

    Após vários testes, cheguei a uma solução, digamos “definitiva”, então ai vai:
    No evento onApplicationInit do menu adicione o seguinte código:

    echo "<style type=“text/css”>
    ul#css3menu1.topmenu
    {
    width: 99.5%;
    }
    ";

    Deste modo não necessitando mais a alteração a cada vez que o código é gerado. Não sei dizer ao certo se todo o menu gerado pelo scriptcase tenha o ‘id’ “css3menu1” e/ou o ‘class’ “topmenu”, assim havendo, a necessidade de se verificar este ponto.

    Grato pela atenção de todos!

    Leandro José Hermann

    #7

    Leandro,

    Valeu a dica… muito bom, parabéns!!!

    Abraço.

    #8

    Leandro,

    Ficou perfeito, parabéns e obrigado.

    #9

    Leandro,

    No Chrome funciona perfeito, no IE9 os sub-menus deixam de ser exibidos.

    #10

    Qual tema vocês usaram para funcionar 100%, o meu aqui não deu certo, to usando o Android/Blue

    #11

    Boa Leandro.

    #12

    Pessoal,

    Também acabei de fazer testes com o IE9 e os sub-itens dos menus não aparecem… mas não deixou de ser interessante.

    Abraço.

    #13

    Boa Noite!

    Demorei um pouco para responder, mas…, por não ter me dado por satisfeito fiz diversas tentativas, todas sem sucesso. Mesmo assim não desistindo, busquei outros caminhos, haja vista que em determinado ponto resolvi utilizar um --echo “<style type=“text/css”>”;-- sem conteúdo, apenas as tag’s e para meu espanto não funcionou, o menu continuou não sendo exibido corretamente no IE9. Pois bem, pus-me a pensar… o problema não estava nos comando em si, mas, talvez, na posição ou forma em que estes eram inseridos na página pelo ScriptCase, bom, no Firefox eu utilizo o “Firebug” para vascular o código HTML gerado, bem como, o CSS, Script, etc… no IE9 tem uma ferramenta que pode ser iniciada pelo F12, ou no menu ferramentas chamada “developer tools” ferramentas para desenvolvedores, que me provê funcionalidades semelhantes. A partir desta ferramenta é que percebi aonde estava acontecento o problema…

    Encurtando um pouco as coisas, quando utilizamos este pequeno script (anteriormente citado), o IE9 abre a página no modo “Quirks” e não no modo “Standards”, ou seja, ele abre a página no modo de retro-compatibilidade (para que seja compatível com versões antigas do IE, basicamente diferenças de rederização), pois a princípio, o código é inserido antes da declaração “<!Doctype” (acredito que esta seja a causa), quando a ferramenta para desenvolvedores está aberta na aba Script o “script” utilizado aparece antes do Doctype, mas na aba HTML o “script” inserido aparece dentro da tag e o Doctype aparece “<-- Doctype” comentado. Por isso acredito que ele esteja entrando no modo Quirks.

    Para testarem o menu no IE9 abram a “ferramenta para desenvolvedores” e em: Modo do documento deve estar Quirks, mudem para IE9 Standards (a página sera recarregada novamente) e vejam que o menu estará funcional de novo, e ocupando 100% da tela… Agora ainda não sei como contornar os porques, como por exemplo fazer com que ele entre mesmo assim no modo Standards, mas estamos ai…

    Grato pela atenção de todos…

    Leandro José Hermann

    #14

    Boa tarde!

    Seguindo a partir da ideia de que, o código inserido no evento onApplicationInit do menu, causa o erro no IE9 por este fazer com que a declaração do “Doctype” seja comentada e por isso abrir a página no modo “Quirks” e, em resumo, os sub-menus não funcionarem.

    Para fazer funcionar, em teoria, deveria o código ser inserido após o inicio do carregamento da página. Deste modo, busquei um outro ponto para inserir o código, bom, ai vai…

    Na guia Layout do menu, na opção cabeçalho e rodapé, habilitei a exibição do rodapé e, por exemplo na variável “NM_FOOTER_TITLE” ou outra qualquer, defini o tipo para “valor” e inseri o seguinte código:

    ul#css3menu1.topmenu{width: 99.5%;}

    Bom, para mim funcionou no IE9, porém no “ambiente de desenvolvimento” na variável que eu utilizei o campo apresenta um texto diferente após a geração e execução do menu, mas mesmo após outras alterações no menu, a princípio continua funcionando.

    O tema do menu utilizado foi o "Modern/Blue’, testei com o Android/Blue, funciona mas, será necessário mais testes, pois este somente a borda e o background se extendem, a cor de fundo dos itens não se expande. Provavelmente é necessário definir mais alguma propriedade CSS.

    Grato pela atenção!

    Leandro José Hermann

    #15

    Testei no ambiente de desenvolvimento e funcionou perfeito no IE9 e Chrome.

    Parabéns

    #16

    Pessoal,

    Deixando de lado os entretanto, indo direto aos finalmente… como é o código completo?

    Abraço

    #17

    Risos,

    "Na guia Layout do menu, na opção cabeçalho e rodapé, habilitei a exibição do rodapé e, por exemplo na variável “NM_FOOTER_TITLE” ou outra qualquer, defini o tipo para “valor” e inseri o seguinte código:

    ul#css3menu1.topmenu{width: 99.5%;}"

    É um quebra-galho que funciona graças ao colega Leandro.

    #18

    Estou testando da seguinte forma:

    No evento onLoad da aplicação Menu criei a variavel: $expandir_menu = “<style type=“text/css”>ul#css3menu1.topmenu{width: 99.5%;}”;

    Marquei Exibir rodapé e em NM_FOOTER_TITLE, selecionei Valor e coloquei a variavel $expandir_menu

    Está funcionando com o IE9 e Chrome, não testei com outros navegadores.

    #19

    Show de bola George! Assim fica mais bem organizado. Valeu!

    Testei no Firefox, e também no evento onApplicationInit. Funcionando.

    Leandro José Hermann

    #20

    Pessoal
    Valeu pela dica… Show de bola!!!

    Abraço

    Érico Oliveira