Dropdown Menu with Bootstrap

0

I wanted to know how to make a menu that is dropdown, when it is accessible in mobile continue dropdown.

I have the site www.ktfdistribuidora.com.br , in the "products" tab it's a dropdown. In mobile it is not dropdown, when clicked on products it redirects to the products page and does not open the dropdown menu.

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;
}

Render

<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>
    
asked by anonymous 10.06.2015 / 23:36

1 answer

2

Your site is not using Bootstrap Navbar, it seems to depend on an external solution (I checked this in the custom.css file).

Bootstrap Navbar was partially implemented on the site in a messy way. I have detected some problems, I believe that it will be necessary to deal with several other things to work well:

  • the <ul> tags in the menu need the nav navbar-nav classes;
  • tag <nav> needs class navbar-default ;
  • the <li> tag in the dropdown menu needs the dropdown class.

There are also incompatibilities between your layout and what Bootstrap offers:

  • The links on your site are justified. Can not do this with Bootstrap;
  • You have a sub-sub menu ( nested menu), which is incompatible with Bootstrap 3 a>.

More information and details on how to implement, as always, the Bootstrap Navbar documentation .

    
11.06.2015 / 01:54