Ir para conteúdo
Fórum Script Brasil
  • 0

Menu drop down seguindo o site do Maujor

marcosfj1

Perguntado por marcosfj1,

 Share

Pergunta

marcosfj1

marcosfj1

Postado
Postado

Galera seguinte to tentando seguir o codigo do site: http://maujor.com/tutorial/ddownmenu.php

Mas não estou conseguindo implantar no meu sistema, talvez seja ate um problema da geração do menu qu é dinamica com PHP mas queria que o pessoa desse uma olhada, porque de css não sei nada, vou colocar como eu gero e menu pelo php e como fiz css

Geracao do menu:

$sql = "BUSCA DOS DEPARTAMENTOS CADASTRADOS";
    $req = mysql_query($sql);

    //
    if (mysql_num_rows($req)) {

?>
    <ul class="semMargem" id="nav">
      <?
    
    //
    while ($cp = mysql_fetch_array($req)) {
    
        //
        $nome = $cp['nome'];
        if ($cp['id_produto_categoria'] == $_GET['categoria'])
            $nome = '<b>'.$cp['nome'].'</b>';
                    
?>
     //MOSTRO TODOS OS DEPARTAMENTOS ENCONTRADOS
      <li><a class="categoria" href="?l=produto&amp;categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li>
     
<?

    //AO PASSAR O MOUSE O MENU DEVE APARECER
    if ($cp['id_produto_categoria']) {
    
        //
        echo '<li><ul style="margin-bottom:5px;">';
        
        //
        $sql = "BUSCO TODAS AS MARCAS DOS PRODUTOS REFERENTES A AQUELE DEPARTAMENTO ";
        $req2 = mysql_query($sql);
        
        //
        while ($cp2 = mysql_fetch_array($req2)) {
            
            //
            $nome = $cp2['nome'];
            if ($cp2['id_produto_marca'] == $_GET['marca'])
                $nome = '<b>'.$cp2['nome'].'</b>';

?>
         //MOSTRO TODAS AS MARCAS ENCONTRADAS REFERENTES AQUELE DEPARTAMENTO
          <li><a class="marca" style="color:#06C;" href="?l=produto&amp;categoria=<?=$_GET['categoria'] ?>&amp;marca=<?=$cp2['id_produto_marca'] ?>" title="<?=$cp2['nome'] ?>" ><?=$nome ?></a></li>
<? 
    
        }
        
        echo '</ul></li>';
        
    }
Bom este é a geração do menu, e sim esta funcionando, aparece la o q eu quero, e quando eu passo o mouse sobre o submenu aparece, mas não fica fixo quando eu mexo para chegar ate a marca ele sai...deem uma olhada no css que eu fiz para ver onde pode ser o erro, q esta causando isso 
#menu_categoria ul {
    margin: 0;
    list-style: none;
}
#menu_categoria li {
    font-size:11px;
    display: block;
    padding:2px;
}

#menu_categoria ul li {    
    position: relative;     
}
#menu_categoria li ul {     
    position: absolute;    
    left: 149px;    
    top: 0; 
    display: none; 
}
#menu_categoria ul li a { 
    display: block; 
    text-decoration: none; 
    color: #777; 
    background: #fff; 
    padding: 5px;  
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

#menu_categoria ul {     
    margin: 0;    
    padding: 0;   
    list-style: none;    
    width: 180px;   
        
}

#menu_categoria li:hover ul, li.over ul {      
    display: block;     
}

#menu_categoria .categoria {
    display: block;
    padding: 0 0 0 10px;
    background: url(../../imagem/marca_menu.gif) no-repeat left center;
    text-decoration: none;
    color:#333333;
    font-size:11px;
}
#menu_categoria .ativo .categoria {
    color:#000;
}
#menu_categoria .marca {
    font-size:11px;
    color:#666;
    text-decoration:none;
    padding-left:10px;
}
#menu_categoria a:hover {
    font-size:11px;
    color:#666;
    text-decoration:underline;
    padding-left:14px;
}

Valeu galera agradeco qualquer ajuda

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
marcosfj1

marcosfj1

Postado
  • Autor
Postado
Tenta fazer primeiro em HTML e CSS, depois se conseguir fazer funcionar, você implementa em PHP.

Cara mas ta funcionando, o problema esta sendo que o submenu ao posicionar o mouse não esta ficando fixo, por isso eu acho q é algum problema do css

Eu paro o mouse no menu gerado de departamentos, e ele mostra o submenu das marcas, mas quando eu mexo o mouse novamente ele se perde...acho q o problma ta só no css mesmo

valeu

Link para o comentário
Compartilhar em outros sites
  • 0
marcosfj1

marcosfj1

Postado
  • Autor
Postado (editado)

=========================================================================

Seguinte galera fiz alteraçoes aqui e ainda não consegui chegar no 100% diria q to a uns 95% hehe...bom pra comecar eu mudei e agora o menu ao passar o mouse em cima do departamente ele mostra as marcas em baixo, e esta mostrando perfeitamente, qual o problema ta faltando um detalhe que vou mostrar com imagens

Reparem que tive q colocar o mouse um pouquinho abaixo do nome do departamento e isso não ta certo tem q aparecer quando estou com o mouse sobre ele

certof.jpg

Uploaded with ImageShack.us

Mas se eu coloco o mouse certinho em cima do nome do departamento ele fica negrito, mas não mostra as marcas

errado.jpg

Uploaded with ImageShack.us

Isso q ta sendo o problema, por isso q acho q falta pouco para resolver....vou postar novamente meu codigo CSS para vocês analisarem se deixei passar algo:

#menu_categoria ul {
    margin: 0;
    padding: 0;  
    list-style: none;    
    width: 185px;    
}

#menu_categoria li { 
    font-size:11px; 
    display: block; 
    padding:2px;
    
} 

#menu_categoria ul li {    
    position: relative;     
}
#menu_categoria li ul {     
    position: relative;    
    left: 10px;    
    top: 0; 
    display: none; 
}
#menu_categoria ul li a { 
    display: block; 
    text-decoration: none; 
    color: #777; 
    background: #fff; 
    padding: 2px;  
}

#menu_categoria ul {     
    margin: 0;    
    padding: 0;   
    list-style: none;    
    width: 170px;   
        
}

#menu_categoria li:hover ul, li.over ul {      
    display: block;     
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

#menu_categoria .categoria {
    display: block;
    padding: 0 0 0 9px;
    background: url(../../imagem/marca_menu.gif) no-repeat left center;
    text-decoration: none;
    color:#333333;
    font-size:11px;
}
#menu_categoria .ativo .categoria {
    color:#000;
}
#menu_categoria .marca {
    font-size:11px;
    color:#666;
    text-decoration:none;
    padding-left:7px;
    width: 105px; 
}
#menu_categoria a:hover { 
        font-size:11px; 
        color:#666; 
        text-decoration:underline; 
        font-weight: bold;
        
}

Editado por marcosfj1
Link para o comentário
Compartilhar em outros sites
  • 0
marcosfj1

marcosfj1

Postado
  • Autor
Postado
Esse menu esta hospedado? Poderia disponibilizar o link?

Se não, insira o seu código completo aqui novamente.

Cara vou colocar todo o codigo porque não esta hospedado ainda....mas seguinte fiz um progresso grande já, fiz com que aparecesse da forma que eu queria no IE, mas não consegui no FireFox e no Chrome...hehe o q é estranho porque sempre todo mundo reclama que o IE é o mais complicado hehe

Mas vamos la vou explicar certinho:

Bom apesar de não ter tido la mta ajuda aqui no forum, acabei conseguindo

Era no PHP havia um <li> a mais ai o CSS se confundia

Agora o problema para fechar o 100% esta que o menu de marcas q deveria ficar escondido e só aparecer quando colocasse o mouse em cima do departamento, já vem aberto no chrome e no firefox, enquanto q no IE ele vem certinho fechado, e quando coloco o mouse em cima dele aparece

alguém sabe me dizer como posso adptar este CSS para funcionar em todos:

#menu_categoria li {  
    font-size:12px;  
    display: block;  
    padding: 0px; 
        
} 
#menu_categoria ul li {  
        position: relative;    
} 

#menu_categoria li ul  {      
        position: relative;     
        left: 5px;     
        display: none;  
        padding:1px;  
} 
#menu_categoria ul li{  
        display: block;  
        text-decoration: none;  
        color: #777;  
        background: #fff;  
        padding:4px;      
} 

/* Fix IE. Hide from IE Mac \*/ 
* html ul li { float: left; }  
* html ul li a { height: 1%; }  
/* End */ 

#menu_categoria ul {      
        margin: 0;     
        padding: 0;    
        list-style: none;     
        width: 185px;  
        border-bottom: 1px solid #ccc;   
             
} 


#menu_categoria li:hover ul, li.over ul {  
        display: block;  
        } 

#menu_categoria .categoria { 
        display: block; 
        padding: 0 0 0 9px; 
        background: url(../../imagem/marca_menu.gif) no-repeat left center; 
        text-decoration: none; 
        color:#333333; 
        font-size:12px; 
} 
#menu_categoria .ativo .categoria { 
        color:#000; 
} 
#menu_categoria .marca { 
        font-size:11px; 
        color:#666; 
        text-decoration:none; 
        padding-left:7px; 
        width: 143px;  
} 

#menu_categoria a:hover {  
        font-size:12px;  
        color:#666;  
        text-decoration:underline;  
        font-weight: bold; 
         
}
================================ Este é o JavaScript que o Maujor recomendou no site 
<script> 
startList = function() { 
        if (document.all&&document.getElementById) { 
        navRoot = document.getElementById("nav"); 
        for (i=0; i<navRoot.childNodes.length; i++) { 
        node = navRoot.childNodes[i]; 
        if (node.nodeName=="LI") { 
        node.onmouseover=function() { 
        this.className+=" over"; 
          } 
          node.onmouseout=function() { 
          this.className=this.className.replace 
                (" over", ""); 
           } 
           } 
          } 
         } 
        } 
        window.onload=startList;         
</script>
Bom por ultimo a parte responsavel pela criação do Menu, que é feito dinamicamente, pois eu busco no banco e faço virar um menu: 
$sql = "BUSCA DOS DEPARTAMENTOS CADASTRADOS"; 
        $req = mysql_query($sql); 

        // 
        if (mysql_num_rows($req)) { 

?> 
    <ul class="semMargem" id="nav"> 
      <? 
         
        // 
        while ($cp = mysql_fetch_array($req)) { 
         
                // 
                $nome = $cp['nome']; 
                if ($cp['id_produto_categoria'] == $_GET['categoria']) 
                        $nome = '<b>'.$cp['nome'].'</b>'; 
                                         
?> 
     //MOSTRO TODOS OS DEPARTAMENTOS ENCONTRADOS 
      <li><a class="categoria" href="?l=produto&amp;categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li> 
      
<? 

        //AO PASSAR O MOUSE O MENU DEVE APARECER 
        if ($cp['id_produto_categoria']) { 
         
                // 
                echo '<ul style="margin-bottom:5px;">'; 
                 
                // 
                $sql = "BUSCO TODAS AS MARCAS DOS PRODUTOS REFERENTES A AQUELE DEPARTAMENTO "; 
                $req2 = mysql_query($sql); 
                 
                // 
                while ($cp2 = mysql_fetch_array($req2)) { 
                         
                        // 
                        $nome = $cp2['nome']; 
                        if ($cp2['id_produto_marca'] == $_GET['marca']) 
                                $nome = '<b>'.$cp2['nome'].'</b>'; 

?> 
         //MOSTRO TODAS AS MARCAS ENCONTRADAS REFERENTES AQUELE DEPARTAMENTO 
        <li><a class="marca" style="color:#06C;" href="?l=produto&amp;categoria=<?=$_GET['categoria'] ?>&amp;marca=<?=$cp2['id_produto_marca'] ?>" title="<?=$cp2['nome'] ?>" ><?=$nome ?></a></li> 
<?  
         
                } 
                 
                echo '</ul>'; 
                 
        }

Agradeco desde já

Pior que todas as pesquisas que eu faço é sempre o contrario....todo mundo querendo fazer funcionar no IE e esta funcionando nos outros hehe...mas comigo claro tem q ser ao contrario....não consigo nem material de pesquisa para saber onde esta meu erro

Se não é o povo do forum eu to perdido

valeu

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...