1

Preciso tornar esse menu responsivo, usando dropdown.

A cada categoria adicionada ele gera um item no menu:

<div class="nav-collapse">
    <ul class="nav">
        <?php if($secoes) {
              while ($linha=mysql_fetch_array($secoes)) { ?>
                <li><a href="produtos.php?cat=<?=$linha["id"]?>"><?=utf8_encode($linha["nome"])?></a></li>
        <?php }
        } ?>
    </ul>
</div>

1 Resposta 1

1

Podes fazer isso utilizando o componente dropdown do Bootstrap para adicionar menus dropdown, que são accionados por um toggle (ou seja, abrem e fecham a partir um clique) sem ser preciso escrever uma única linha de JavaScript.

Como no exemplo do código abaixo:
(Tens aqui também um Exemplo Online no jsFiddle com vários itens na lista)

<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        <!-- Logotipo/Marca e o botão "toggle" ficam agrupados para melhor visualização em telomóveis -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Marca</a>
            </div>
            <!-- Junta os links de navegação, formulários e outros conteúdos para serem abertos no dropdown -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <?php if($secoes) {
                          while ($linha=mysql_fetch_array($secoes)) { ?>
                            <li><a href="produtos.php?cat=<?=$linha["id"]?>"><?=utf8_encode($linha["nome"])?></a></li>
                    <?php }
                    } ?>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
</div>
2
  • Tentei implementar este código, porém, ele aparece o botão toggle, mas quando clico no botão não aparecem os menus que deveriam aparecer
    – gberto
    12/07/2015 às 17:08
  • @gberto Isso é porque deve ter faltado implementar a Biblioteca jQuery no <head> do teu documento. Exemplo: jsfiddle.net/uy7y0thL
    – Chun
    12/07/2015 às 17:29

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 .