0

Queria saber como fazer um menu que é dropdown, quando for acessível em mobile continuar dropdown.

Eu tenho o site www.ktfdistribuidora.com.br, na aba "produtos" é um dropdown. No mobile ele não fica dropdown, quando clicado em produtos ele redireciona para a página de produtos e não abre o menu dropdown.

header.php

<nav role="navigation" class="navbar">
    <div class="navbar-header navbar-default">
        <button type="button" class="navbar-toggle btn-navbar" data-toggle="collapse" data-target="#menu-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div id="menu-collapse" class="collapse navbar-collapse menu">
        <ul>
            <li>
                <a href="<?php echo base_url();?>">Home</a>
            </li>
            <li>
                <a href="<?php echo base_url('sobre');?>">Sobre nós</a>
            </li>
            <li>
                <a href="javascript:void(0);">Produtos</a>
                <ul>
                    <?php echo dropdown();?>
                </ul>
            </li>
            <li>
                <a href="<?php echo base_url('contato');?>">Localização & Contato</a>
            </li>
            <li>
                <a href="<?php echo base_url('orcamento');?>">
                    <i class="fa fa-pencil-square-o"></i> Orçamento
                </a>
            </li>
            <li class="hidden-md hidden-lg">
                <br />

                <form action="<?php echo base_url('buscar');?>" method="post">
                    <input type="text" class="form-control search"name="buscar" placeholder="Buscar...">
                </form>

            </li>
        </ul>
    </div>
</nav>

dropdown_helper.php

function dropdown($pai = 0) {

    $CI = &get_instance();

    $CI->db->order_by('categoria', 'ASC');
    $CI->db->where('categoria_pai', $pai);
    $categorias = $CI->db->get('categorias');

    $html = '';

    $html .= ($pai != '0' && $categorias->num_rows() > 0) ? '<ul>' : '';

    foreach($categorias->result() as $categoria){
        $html .= '<li><a href="'.base_url('produtos/categoria/'.$categoria->id).'">'.$categoria->categoria.'</a>';
        $html .= dropdown($categoria->id);
        $html .= '</li>';
    }

    $html .= ($pai != '0' && $categorias->num_rows() > 0) ? '</ul>' : '';

    return $html;
}

Renderizado

<nav role="navigation" class="navbar">
    <div class="navbar-header navbar-default">
        <button type="button" class="navbar-toggle btn-navbar" data-toggle="collapse" data-target="#menu-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div id="menu-collapse" class="collapse navbar-collapse menu">
        <ul>
            <li><a href="http://www.ktfdistribuidora.com.br/">Home</a></li>
            <li><a href="http://www.ktfdistribuidora.com.br/sobre">Sobre nós</a></li>
            <li><a href="javascript:void(0);">Produtos</a>
                <ul>
                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/45">Acessórios e Equipamentos</a>
                        <ul>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/67">Baldes</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/63">Bralimpia</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/64">Dispenseres</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/68">Pás</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/66">Rodos</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/65">Vassouras</a></li>
                        </ul>
                    </li>

                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/43">Copa e Cozinha</a>
                        <ul>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/57">Açúcares</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/58">Adoçantes</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/59">Cafés</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/60">Chás</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/62">Garrafas térmicas</a></li>
                            <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/61">Palhetas plásticas</a></li>
                        </ul></li>

                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/55">Descartáveis e Embalagens</a></li>
                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/54">Higiene e Limpeza</a></li>
                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/51">Higiene Pessoal</a></li>
                    <li><a href="http://www.ktfdistribuidora.com.br/produtos/categoria/56">Materiais para escritório</a></li>

                </ul>
            </li>
            <li><a href="http://www.ktfdistribuidora.com.br/contato">Localização & Contato</a></li>
            <li><a href="http://www.ktfdistribuidora.com.br/orcamento"><i class="fa fa-pencil-square-o"></i> Orçamento</a></li>
            <li class="hidden-md hidden-lg">

                <br />

                <form action="http://www.ktfdistribuidora.com.br/buscar" method="post">
                    <input type="text" class="form-control search"name="buscar" placeholder="Buscar...">
                </form>

            </li>
        </ul>
    </div>

</nav>
2
  • Pode postar o código do seu dropdown? Menus dropdown do bootstrap funcionam perfeitamente em dispositivos móveis. 10/06/2015 às 21:50
  • coloquei o código 10/06/2015 às 22:06

1 Resposta 1

2

Seu site não está usando a Navbar do Bootstrap, parece depender de uma solução externa (verifiquei isso no arquivo custom.css).

A Navbar do Bootstrap foi parcialmente implementada no site de uma maneira bagunçada. Detectei alguns problemas, acredito que será necessário mexer em várias outras coisas pra funcionar direito:

  • as tags <ul> do menu precisam das classes nav navbar-nav;
  • a tag <nav> precisa da classe navbar-default;
  • a tag <li> do menu dropdown precisa da classe dropdown.

Há também incompatibilidades entre o seu layout e o que o Bootstrap oferece:

  • os links do seu site estão justificados. Não é possível fazer isso com Bootstrap;
  • você possui um sub-submenu (nested menu), que é incompatível com o Bootstrap 3.

Mais informações e detalhes de como implementar, como sempre, na documentação da Navbar do Bootstrap.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .