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>