Dynamic menu with dropdown

Question

I need to make this menu responsive by using dropdown.

For each category added it generates an item in the 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>

Answer 1

You can do this using the component dropdown Bootstrap to add menus dropdown, which are operated by a toggle (that is, open and close from a click) without having to write a single line of Javascript.

As in the code example below:
(You got a Online example in jsFiddle with multiple items in the list)

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