Menu com sub-memu dinamico na horizontal

João F. Melo · Novembro 26, 2008

Bom dia amigos, estou fazendo um menu dinamico onde os dados vem do bd (mysql) e este monta o menu com sub-menu. Quando este esta na vertical "pega" todos os dados da sub-categoria do menu, mas na horizontal so retorna o 1º item (sub-categoria) para cada categoria.

Aqui tem o exemplo funcionando na horizontal e vertical

Menu Horizontal

<ul class="menu" id="menu">
<li><a href="./" class="menulink">Home</a></li>
<?
$consulta = mysql_query("SELECT * FROM categorias ORDER BY categoria ASC");

while($verifica = mysql_fetch_array($consulta)){
$id = $verifica["id_cat"];
$nome = $verifica["categoria"];

#Faz uma query e seleciona todoas as categorias referentes ao menu
$c2 = mysql_query("SELECT * FROM subcategorias WHERE categoria = '$nome'");
   if (mysql_num_rows($c2) > 0){
    echo "<li><a href='#' class='menulink'>".$nome."</a>"; //Exibe a categoria
#Retorna as sub-categorias
while($v2 = mysql_fetch_array($c2)){ //Aki usando while ou if faz a mesma coisa
   echo "<ul>";
   echo "<li>";
   echo "<a class='sub' title='$nome >> $v2[nome]' href='?p=".$nome."&amp;sub=".$v2['id']."'>".$v2['nome']."</a>";
   echo "</li>";
   echo "</ul>";
    }
}
}
?>
</ul>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>

as tabelas

CREATE TABLE `categorias` (
`id_cat` int(11) NOT NULL auto_increment,
`categoria` varchar(75) NOT NULL,
PRIMARY KEY (`id_cat`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

CREATE TABLE `subcategorias` (
`id` int(11) NOT NULL auto_increment,
`id_cat` int(11) NOT NULL,
`categoria` varchar(75) NOT NULL,
`nome` varchar(60) NOT NULL,
`descricao` longtext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;

Menu vertical

<div id="menu">
<div id="categoria">Principal</div>
       <div id="subcateg"><a href="./">Home</a></div>
       <div id="subcateg"><a href="?p=portifolio">Portif&oacute;lio</a></div>
       <div id="subcateg"><a href="?p=servicos">Servi&ccedil;os</a></div>
       <div id="subcateg"><a href="?p=sobre">Sobre</a></div>
       <div id="subcateg"><a href="?p=contato">Contato</a></div>
<?
    $consulta = mysql_query("SELECT * FROM categorias ORDER BY categoria ASC");

        while($verifica = mysql_fetch_array($consulta)){
        $id = $verifica["id_cat"];
        $nome = $verifica["categoria"];

        #Faz uma query e seleciona todoas as categorias referentes ao menu
        $c2 = mysql_query("SELECT * FROM subcategorias WHERE categoria = '$nome'");
           if (mysql_num_rows($c2) > 0){
         #Mostra o Nome do Menu
          print "<div id=categoria>".$nome."</div>";
         #Faz um While e mostra todas as Sub-categorias do menu
           while($v2 = mysql_fetch_array($c2)){
           print "<div id=subcateg><a title='$nome >> $v2[nome]' href='?p=".strtolower($nome)."&amp;sub=".$v2['id']."'>".$v2['nome']."</a></div>";
                }
            }
        }
?>
</div>

O que preciso mesmo e resolver a parte horizontal que é o menu que estou querendo.

Fiquem com Deus.

Prototype · Novembro 26, 2008

O problema está no html, teu código final precisa ser assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TESTE MENU HORINZONTAL</title>
<link rel="stylesheet" href="TESTE%20MENU%20HORINZONTAL_arquivos/style.css" type="text/css">
<script type="text/javascript" src="TESTE%20MENU%20HORINZONTAL_arquivos/script.js"></script>
</head><body>

<ul class="menu" id="menu">
    <li><a href="http://multiartsinformatica.com/teste/" class="menulink">Home</a></li> <!-- item de menu 1 -->
    
    <li><a href="#" class="menulink">Desenho</a><!-- item de menu 2 | inicio -->
        <ul style="overflow: hidden; display: block; height: 0px; z-index: 128; opacity: 0.0454545;">
            <li><a class="sub" title="Desenho &gt;&gt; Pica pau" href="http://multiartsinformatica.com/teste/?p=Desenho&amp;sub=2">Pica pau</a></li>
            <li><a class="sub" title="Desenho &gt;&gt; Scooby Doo" href="http://multiartsinformatica.com/teste/?p=Desenho&amp;sub=6">Scooby Doo</a></li>
        </ul>
    </li><!-- item de menu 2 | final -->
    
    <li><a href="#" class="menulink">JavaScript</a><!-- item de menu 3 | inicio -->
        <ul style="overflow: hidden; display: block; height: 0px; z-index: 129; opacity: 0.0454545;">
            <li><a class="sub" title="JavaScript &gt;&gt; Mostra/esconde DIV" href="http://multiartsinformatica.com/teste/?p=JavaScript&amp;sub=8">Mostra/esconde DIV</a></li>
        </ul>
    </li><!-- item de menu 3 | final -->
    
    <li><a href="#" class="menulink">Photoshop</a><!-- item de menu 4 | inicio -->
        <ul style="overflow: hidden; display: block; height: 0px; z-index: 130; opacity: 0.0454545;">
            <li><a class="sub" title="Photoshop &gt;&gt; Background SE-FULL" href="http://multiartsinformatica.com/teste/?p=Photoshop&amp;sub=7">Background SE-FULL</a></li>
        </ul>
    </li><!-- item de menu 4 | final -->
    
    <li><a href="#" class="menulink">PHP</a><!-- item de menu 5 | inicio -->
        <ul style="overflow: hidden; display: block; height: 0px; z-index: 131; opacity: 0.0454545;">
            <li><a class="sub" title="PHP &gt;&gt; Calendario" href="http://multiartsinformatica.com/teste/?p=PHP&amp;sub=4">Calendario</a></li>
            <li><a class="sub" title="PHP &gt;&gt; Galeria de imagens" href="http://multiartsinformatica.com/teste/?p=PHP&amp;sub=5">Galeria de imagens</a></li>
        </ul>
    </li><!-- item de menu 5 | final -->
    
    <li><a href="#" class="menulink">Sexo</a><!-- item de menu 6 | inicio -->
        <ul style="overflow: hidden; display: block; height: 0px; z-index: 132; opacity: 0.0454545;">
            <li><a class="sub" title="Sexo &gt;&gt; Uso do preservativo" href="http://multiartsinformatica.com/teste/?p=Sexo&amp;sub=1">Uso do preservativo</a></li>
            <li><a class="sub" title="Sexo &gt;&gt; Gravidez" href="http://multiartsinformatica.com/teste/?p=Sexo&amp;sub=3">Gravidez</a></li>
        </ul>
    </li><!-- item de menu 6 | final -->
</ul>



<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>
</body></html>

João F. Melo · Novembro 26, 2008

Com o html não tem nada errado, a unica diferença foi que você add style="overflow: hidden; display: block; height: 0px; z-index: 128; opacity: 0.0454545;"

Este menu e montado como descrito acima, o unico problema é q estando na horinzontal só pega o ultimo dado da tabela para cada categoria.

Prototype · Novembro 27, 2008

Brother, o dado do menu que você deseja exibir está presente no html, você pode conferir olhando o código fonte ou desativando a folha de estilo.

Tenta organizar a lista dessa maneira que vai ficar bom.

<ul>
    <li>titulo 1
        <ul>
            <li>item 1</li>
            <li>item 2</li>
                     .
                     .
                     .
            <li>item n</li>
        </ul>
    </li>
    <li>titulo 2
        <ul>
            <li>item 1</li>
            <li>item 2</li>
                     .
                     .
                     .
            <li>item n</li>
        </ul>
    </li>
</ul>

Prototype · Novembro 27, 2008

tenta assim

echo "<ul>";

while($v2 = mysql_fetch_array($c2)){ //Aki usando while ou if faz a mesma coisa
   echo "<li>";
   echo "<a class='sub' title='$nome >> $v2[nome]' href='?p=".$nome."&amp;sub=".$v2['id']."'>".$v2['nome']."</a>";
   echo "</li>";
    }

echo "</ul>";
echo "</li>";

João F. Melo · Novembro 27, 2008

com o css funciona perfeito (na vertical) so n sei porque na horizontal n acontece o mesmo, o unico problema é esse e ainda n comsegui resolver. :wacko: :( :o

Entrar

Menu com sub-memu dinamico na horizontal

Pergunta

João F. Melo

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Prototype

Link para o comentário

Compartilhar em outros sites

João F. Melo

Link para o comentário

Compartilhar em outros sites

Prototype

Link para o comentário

Compartilhar em outros sites

Prototype

Link para o comentário

Compartilhar em outros sites

João F. Melo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades