Menu dinâmico com PHP - ajuda no workflow

[mem]

Olá a todos,

Estou a tentar criar o meu primeiro menu dinâmico em PHP.

Mas, como gosto de complicar, estou a tentar criá-lo dentro de uma estrutura em MVC, usando uma framework para o efeito (CodeIgniter).

Não me querendo por em js, razões:

ainda não domino;

o menu não precisa de efeitos;

a página pode muito bem carregar totalmente que não é assim tão pesada;

não quero ter grandes trabalhos para permitir o uso do botão back do browser e a possibilidade de adicionar uma página específica aos favoritos;

tem de mudar o URI;

Eu sei que tudo isto é possível com js mas, o facto de ainda não dominar js leva-me a querer evitar isto. Por isso pergunto:

Existe uma maneira de conseguir isto, utilizando apenas PHP e CSS  ?

foreach ($menucategorias as $subcategorias)
{
echo "\n";

	echo anchor( base_url() . 'c_categoria/seccao/' . $subcategorias['parent_id_cat'] . '/' . $subcategorias['id_cat'] . '/',$subcategorias['nome_cat']);

echo "\n";

	foreach ($subcategorias['children'] as $subcatfilha)
	{

		echo $subcatfilha['nome_cat'];

	}
}

Vários problemas aqui:

1)

Isto funciona para dois níveis (neste projecto até nem preciso de mais mas, e se for necessário apresentar n níveis?) A recursividade responde a esta questão? Se sim, como a poderei aplicar?

2)

Como isto está, se eu carregar em QUALQUER UM dos elementos pai, os filhos vão aparecer. Contudo, gostava de saber como fazer isto de modo a que, quando se clique APENAS NO PAI QUE TEM FILHOS, e apenas nesse, então os elementos filhos aparecam. Deverei criar uma condicional antes do segundo foreach ?

3)

Deverei criar uma classe em CSS com display:none; e quando fizer a geração do menu com PHP, deverei aplicar ao elemento <li> ou <ul> uma classe css que tenha display:block?

Agradecia a vossa ajuda se possível,

Abraço,

mem

ps- aqui no forum, quais as tags para permitir a visualização de código em php? Eu tentei ['php']['/php'] (sem plicas) mas, na pré-visualização, parece não surtir efeito.

[Guest id194]

Desculpa mas não estou a perceber bem o que queres fazer...

Um menu não é nada mais nada menos que código HTML formatado com CSS para o efeito. Não é nada mais que isso... Se geras esse código com PHP ou JS, não interessa para nada. Mas para apresentares os menus e os sub-menos, tens de fazer com JS ou deixa de ser dinâmico. Ou vais estar a fazer refresh a página toda sempre que queres apresentar um menu novo? Isso não faz grande sentido...

[mem]

Obrigado pela resposta. 🙂

Desculpa mas não estou a perceber bem o que queres fazer...

Um menu não é nada mais nada menos que código HTML formatado com CSS para o efeito. Não é nada mais que isso...

Ok. Vou tentar explicar o melhor que conseguir. O objectivo é criar um menu com vários subníveis. Quando o utilizador clica num nível, duas coisas terão de acontecer:

a) Se tiver subitem: mostra os subitems.

👍 O URI terá de mudar para permitir que os controladores agarrem num determinado segmento do URI mudado com o click, e mostram informações relativas a esse click.

Se geras esse código com PHP ou JS, não interessa para nada.

Eu pensava que sim. Se os items do menu viessem da base de dados, eu geraria os respectivos ul e li com PHP, caso contrário, poderia usar javascript. (?)

Mas para apresentares os menus e os sub-menos, tens de fazer com JS ou deixa de ser dinâmico.

Ok... o que estava a pensar quando escrevi dinâmico não que fosse animado, mas que os seus elementos fossem preenchidos por valores guardados na base de dados.

Já percebi que, uma vez que quero mostrar subitems de um menu quando se clica num item principal, este "quando se clica" só uma linguagem client side me poderá dar. Portanto, não haverá maneira (neste caso) de fazer um menu usando apenas php e css correcto?

Portanto, a minha dúvida é no fundo, tentar perceber quais os passos envolvidos para a criação de um menu deste género.

Não estou pedindo o código, apenas uma ajuda para tentar perceber os processos envolvidos num menu assim.

Obrigado uma vez mais,

Márcio

[Guest id194]

Portanto, não haverá maneira (neste caso) de fazer um menu usando apenas php e css correcto?

Que eu saiba, não...

http://tinyurl.com/yh9duuw

[mem]

Obrigado.

Claro que, antes de vir aqui, fui ao google. O problema não está em encontrar menus, está em perceber como tudo se poderá relacionar neste caso específico.

Por exemplo,  não consegui encontrar nenhum que me permitisse cumprir o ponto 👍 .

Obrigado na mesma.

Abraço,

Márcio

[yoda]

Mas para apresentares os menus e os sub-menos, tens de fazer com JS ou deixa de ser dinâmico.

Ser dinâmico não tem a ver com isso, tem a ver com a alteração dos conteúdos sem ser preciso mudar o html à mão, recorrendo ao uso de php / asp por exemplo.

[mem]

Ok. Já descobri que, de facto, uma vez que queremos mudar o URL de cada vez que clicamos num menu, uma linguagem server-side chega para isto.

Já consegui mostrar os elementos parent e child, agora... a dificuldade está na recursividade. 👍

Consigo criar uma navegação com 2 níveis. Mas a ideia, seria a de criar uma navegação com n níveis...

Colocarei as minhas dúvidas, quando conseguir, pelo menos, tentar criar um bloco de código minimamente aproximado.

Um abraço,

Márcio

[Guest id194]

Ser dinâmico não tem a ver com isso, tem a ver com a alteração dos conteúdos sem ser preciso mudar o html à mão, recorrendo ao uso de php / asp por exemplo.

Quem disse? É alguma regra/lei do web-development que especifique que "algo" dinâmico tenha obrigatoriamente de usar uma linguagem server-side. Não me parece... Lá porque é mais comum essa designação, não significa que seja a única.

Lá por usares php ou asp para gerir o conteúdo "sem ser preciso mudar o html à mão" não faz de um menu dinâmico quando tens de fazer "refresh" a página só para apresentar uma subsecçao da respectiva opção seleccionada no menu. A alteração do conteúdo (construção do menu) pode ter sido dinâmica, mas o menu não é dinâmico pois ele está estático na página e tiveste de fazer "refresh" para veres a sub-secção. No meu conceito de menu, não considero isso dinâmico.

[yoda]

Quem disse? É alguma regra/lei do web-development que especifique que "algo" dinâmico tenha obrigatoriamente de usar uma linguagem server-side. Não me parece... Lá porque é mais comum essa designação, não significa que seja a única.

Lá por usares php ou asp para gerir o conteúdo "sem ser preciso mudar o html à mão" não faz de um menu dinâmico quando tens de fazer "refresh" a página só para apresentar uma subsecçao da respectiva opção seleccionada no menu. A alteração do conteúdo (construção do menu) pode ter sido dinâmica, mas o menu não é dinâmico pois ele está estático na página e tiveste de fazer "refresh" para veres a sub-secção. No meu conceito de menu, não considero isso dinâmico.

Então se tens consciência que essa é a tua definição de dinâmico, não podes impingir essa ideia às pessoas 😉

A ideia que tenho de dinâmico é a aceite pela maioria da comunidade.

[Guest id194]

E tu tens consciência do que o que está em discussão é um menu dinâmico e não uma página dinâmica não tens? É que parece que não...

Uma "coisa" dinâmica é uma coisa que não é estática e uma coisa estática é uma coisa parada. Se tu tens de carregar a página para mostrar cada subsecção de um menu, isso é um menu parado, só lá apareceu porque tu carregaste uma nova página com essa parte do menu.

Achas mesmo que isto é um menu dinâmico? Eu não acho... É uma página dinâmica, assim como descreveste mais lá para cima, mas não é um menu dinâmico. E tanto quanto eu saiba, é isso que está em discussão, até está no titulo deste tópico... Que mania que vocês têm de se armar em sabichões!

A ideia que tenho de dinâmico é a aceite pela maioria da comunidade.

Hás de me mostrar o inquérito que andaste a fazer, estou curioso com os resultados 😉

[mem]

Não se chateiem lá com isso. 😉

O menu não é dinâmico no sentido de ANIMADO. É dinâmico (aqui) no sentido de ser alimentado por base de dados.

A ideia é criar um sistema de navegação onde, à medida que o URL vai mudando, assim vão aparecendo opções na página.

Exemplo:

www.site.com/1/

Menu Item 1

Menu Item 2

www.site.com/1/3/

Menu Item 1  >  Submenu1.1

                          Submenu 1.2

Menu Item 2   

O que acontece para além disto? Vão aparecendo produtos na página, com base no ID passado no URL. Uma espécie de navegação em filtros.

Respondendo às perguntas do post inicial:

1)

Isto funciona para dois níveis (neste projecto até nem preciso de mais mas, e se for necessário apresentar n níveis?) A recursividade responde a esta questão? Se sim, como a poderei aplicar?

Sim. Deverei usar recursividade, e uma coisa chamada "stack" também poderá ajudar. E por aí vou....

2)

Como isto está, se eu carregar em QUALQUER UM dos elementos pai, os filhos vão aparecer. Contudo, gostava de saber como fazer isto de modo a que, quando se clique APENAS NO PAI QUE TEM FILHOS, e apenas nesse, então os elementos filhos aparecam. Deverei criar uma condicional antes do segundo foreach ?

Algo assim:

foreach ($arrMenu as $subcategorias)
{
        echo anchor( base_url() . 'c_categoria/seccao/' . $subcategorias[$strParentIdKey] . '/' . $subcategorias[$strIdKey] . '/',$subcategorias[$strNameKey]),$strNL;
        
	if(!empty($subcategorias[$strChildKey])) 
        {
        	if ($subcategorias[$strIdKey] === $strLastSegment)
		{
               		parse_into_menu($subcategorias[$strChildKey],$strParentIdKey,$strChildKey,$strNameKey,$strIdKey,$intRunner+1);
            }			
	}
         
}

3)

Deverei criar uma classe em CSS com display:none; e quando fizer a geração do menu com PHP, deverei aplicar ao elemento <li> ou <ul> uma classe css que tenha display:block?

Não. Não precisa CSS para display:none; e block;

As condicionais no PHP tratam do assunto.

Ainda não consegui por a recursividade a funcionar.

Ainda não sei qual a melhor maneira de formatar os URIs.

Mas isto são outros tópicos... 😄

Abraço,

Márcio

[yoda]

E tu tens consciência do que o que está em discussão é um menu dinâmico e não uma página dinâmica não tens? É que parece que não...

Uma "coisa" dinâmica é uma coisa que não é estática e uma coisa estática é uma coisa parada. Se tu tens de carregar a página para mostrar cada subsecção de um menu, isso é um menu parado, só lá apareceu porque tu carregaste uma nova página com essa parte do menu.

Achas mesmo que isto é um menu dinâmico? Eu não acho... É uma página dinâmica, assim como descreveste mais lá para cima, mas não é um menu dinâmico. E tanto quanto eu saiba, é isso que está em discussão, até está no titulo deste tópico... Que mania que vocês têm de se armar em sabichões!

Hás de me mostrar o inquérito que andaste a fazer, estou curioso com os resultados 😉

Os conteúdos do menu são dinâmicos, logo a informação apresentada no browser também o é. Só isto faz do menu dinâmico. Se  o próprio menu tem efeitos em CSS ou JS é outra coisa, mas quando me referi ao dinâmico era em relação aos conteúdos. E nesse ponto penso estar certo ao dizer que é senso comum que não é estático.

Quanto ao sabichão, guarda isso para ti 😄

[scorch]

O mem já explicou ao que se referia quando disse menu dinâmico. Se o poderem ajudar, respondam ao tópico. para continuar a discutir isto, se quiserem, abram um tópico próprio. 😉

[xploit]

mem não queres mesmo ponderar e utilizar javascript para fazeres o menu? digo te isto porque para além de ficar muito mais user friendly, vais poupar muito mais trabalho.... porque imagina assim, fazes fetch_array do mysql, pões tudo numa lista (<ul><li></li></ul>) e depois o javascript fácilmente esconde os submenus todos.. eu acho que devias ir por ai para além de que é a forma mais correcta de se fazer esse tipo de menus multiníveis na minha opinião...

obs: eu sei que não te ajudei, foi mais um concelho . lol

[mem]

Obrigado.

Bem, não sou anti-javascript ou, anti-client-side. 👍

Faz sentido usar-se o javascript quando se tem que usar. No entanto, não concordo que, neste caso, usar javascript seja a solução mais correcta. Aliás, nem sei se é possível obter esta funcionalidade usando javascript. Pelo menos, ainda não vi como.

A ideia NÃO É, simplesmente, criar um menu que, quando fazes onhover ou onclick, ele muda os menus. A ideia é criar um sistema de navegação que, quando clicas, novamente, o URL mude e, claro, os segmentos URI fiquem com IDs que, serão passados para uma QUERY no Model. Este, por sua vez, será responsável por nos dar, todos os parentes e todos os descendentes para construir o menu mas, também, uma lista de produtos relacionada com o ID passado no URI.

Só depois disto feito e a funcionar, é que estava a pensar adicionar algum javascript. Contudo, primeiro, terá de funcionar puramente em server-side.

Tentei explicar o funcionamento deste sistema de navegação. Se acharem que ele pode ser feito usando outro sistema, mais simples, ou mais correcto, por favor, digam-me como. Não é preciso código. Bastará apenas descreverem o workflow.

Obrigado,

Márcio

[yoda]

@mem,

Não percebi a parte do URL mudar. Se puderes ser mais esplícito. 👍

[Guest id194]

Os conteúdos do menu são dinâmicos, logo a informação apresentada no browser também o é. Só isto faz do menu dinâmico. Se  o próprio menu tem efeitos em CSS ou JS é outra coisa, mas quando me referi ao dinâmico era em relação aos conteúdos. E nesse ponto penso estar certo ao dizer que é senso comum que não é estático.

Conteúdos dinâmicos e menus dinâmicos são coisas distintas... Repara que eu disse "para apresentares os menus e os sub-menos", notas ali o "apresentar" que muito pouco ta relacionado com "conteúdo"? Porque se te faz mais feliz, dou-te toda a razão quando dizes que conteúdo dinâmico é gerir conteúdo com o uso de PHP em vez de o escrever directamente à mão no HTML. Não te dou é razão quando dizes que estou a tentar impingir o que quer que seja quando tu é que colocaste as coisas fora do contexto e continuas-te a afirmar algo que eu nunca disse em contrário.

Quanto ao sabichão, guarda isso para ti 🙂

A diferença é que eu não faço afirmações daquelas, principalmente com alguém que eu sei que não começou a desenvolver/programar sites ontem, para me armar em inteligente. Eu quando não entendo o que as pessoas dizem, questiono-as primeiro e só depois é que "abro a boca", não mando postadas de pescada só para mostrar que sei...

De volta ao tópico...

@mem

Ainda não percebi exactamente o que queres e acho que talvez estejas a complicar o descomplicado...

Pessoalmente, se o menu não for muito complexo/grande, construía-o directamente no HTML conforme fosse necessário. Depois, ou usava JS ou CSS para apresentar os menus conforme a posição do rato no respectivo menu obviamente. Mas claro, menus é uma coisa tão comum hoje em dia que eu nem dava ao trabalho, usava o melhor (= mais indicado para mim/trabalho) plugin para o jQuery e pronto. Se o menu for complexo, ai talvez usasse PHP para gerir o conteúdo do menu e as suas subsecções dependendo de algum critério para não estar sempre a gerar tudo desnecessariamente.

Mas ainda há algo que eu não percebi onde queres chegar... O que é um menu mesmo? O que é que as pessoas esperam de um menu? Independentemente da forma como é desenvolvido, esperam que seja um conjunto de opções onde cada uma delas apresenta um outro conjunto de opções e cada uma dessas um outro conjunto e assim sucessivamente conforme o que é necessário para a nossa aplicação. É isto não é? E eu estou a ver isto como o típico menu das aplicações (File Edit View Etc...), se o que queres é algo diferente, explica. Ora, eu sinceramente não vejo a necessidade de gerares este conteúdo do menu e de todas as sub-opções dinamicamente com PHP ou whatever. Não vejo mesmo o que é que ganhas com isso, até acho que fica demasiado complexo para o que é. Pessoalmente, construía o menu e colocava num template HTML e estava feito.

Se queres mesmo fazê-lo dinamicamente, penso que a ideia é mais ou menos isto:

Tens um menu com uma lista de opções, esse menu é representado por um ID único. Cada uma dessas opções apontam para um ID de menu ou não aponta pa nada (nulo por exemplo) caso seja um link directo para alguma coisa. Para cada menu podes ainda guardar um outro ID diferente que representa a opção que abre esse menu.

Depois no URI tens várias hipóteses. Guardas só um ID que representa o menu mais expandido que queres mostrar e depois com os dados guardados consegues chegar ao menu da raíz e quais as opções que chegam a esse dito menu mais expandido, ou gravas uma sequência de IDs de menus e de opções que de certa forma representem os menus que serão expandidos.

Há várias formas e isto é só um exemplo, pode nem ser a melhor mas foi o que me lembrei neste momento... Mas como disse, considero isto um trabalho completamente desnecessário.

Se não é nada disto que queres, ignora o que eu disse e explica-te melhor 👍

[yoda]

@Nazgulled

Apenas tentei mostrar a diferença entre animado e dinâmico. É sempre bom usar as palavras certas para as coisas. Se estou enganado, hei-de aprender com isso, se te ofendi de algum modo, peço desculpa 🙂

[infopc]

pergunta?

Queres apresentar novos links à medida que vais navegando de página em pagina ou somente quando clickas num dos links

É que se a ideia é ter por cada pagina de navegação um menu diferente usa php se não faz tudo de uma vez em html e depois anima com js.

já agora se queres fazer isso multinivel usa recursividade

imagina o seguinte array com os teus menus e respectivos filhos (2 niveis só neste caso)

$menu = array(0=>array(
    'nome'=>'google',
    'href' => '#',
    'childs' => array(
      0 => array(
        'name'=>'google main',
        'href'=>'http://www.google.com',
      ),
      1 => array(
        'name'=>'google translate',
        'href'=>'http://translate.google.com',
      ),
    )
  )
); 


function array_to_menu($arr=array(), $key = 0){
echo '<ul>';
foreach ($arr as $item){
    echo '<li class="li_level_'.$key.'"><a href="'.$item['href'].'">'.$item['name'].'</a>';
    if (isset($item['childs']) && count($item['childs'])>0){
       $key++; array_to_menu($item['childs'], $key);
    }
    echo '</li>';
}
echo '</ul>';
}

array_to_menu($menu);

isto deve imprimir

<ul>
   <li class="li_level_0"><a href="#">google</a>
       <ul>
           <li class="li_level_1"><a href="http://www.google.com">Google Main</a></li>
           <li class="li_level_1"><a href="http://translate.google.com">Google Translate</a></li>
       </ul> 
   </li>
</ul>