Dropdown menu with Bootstrap

Asked

Viewed 1,829 times

0

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

I have the website www.ktfdistribuidora.com.br, in the "products" tab is a dropdown. In mobile it does not dropdown, when clicked on products it redirects to the product page and does not open 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;
}

Rendered

<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>
html css twitter-bootstrap mobile dropdown

  • Can you post your dropdown code? Bootstrap dropdown menus work perfectly on mobile devices.

  • put the code

1 answer

2

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

Bootstrap’s Navbar was partially implemented on the site in a messy way. I detected some problems, I believe it will be necessary to touch several other things to work right:

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

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

More information and details on how to implement, as always, on Documentation of Bootstrap Navbar.

Browser other questions tagged html css twitter-bootstrap mobile dropdown

You are not signed in. Login or sign up in order to post.