Menu creation witn Twitter Bootstrap

After several entrances dedicated to one of the topic I hate the most, the front-end part, a new entrance related to Twitter Bootstrap framework, a handy tool if you prefer the back-end part, my case!

Today’s entrance is related to how to create menus using Bootstrap 3. It’s not complicated, once you learn the base. I spent a few hourse studying how to do it, and this entrance also include the template I use. To be concrete, the example is dedicated to the footer menu you can find under the examples of Bootstrap.

The base

I spent some time trying to understand how to build a menu, and the trick is to use a template, that you can modify to fit your needs.

The assigment is to create a menu where you have access to all examples related to Twiiter Bootstrap code, that you can find here.

The base HTML code for creating the menu, with all classes and lists, is this:

    <div class="container">
    <nav role="navigation" class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Manejando Datos</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Manejando datos</a>
        </div>

        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="bootstrap_plantilla.html">Plantilla</a></li>
                <li><a href="bootstrap_botones.html">Botones</a></li>
                <li class="active"><a href="bootstrap_tabs.html">Tabs</a></li>
                <li><a href="twitterbootstrap_table.html">Tablas</a></li>
            </ul>
        </div>
    </nav>
    </div>

And the results:

If you analize the code, you can find two different blocks: one is for the header, and the second is for the rest of the options. This way make the menu fit on any device. It’s the recommended way and it should be the base for creating menus!

If you modify the resolution of the browser, you can see how the menu change:

Including sub menus

Although the previos HTML code is the base, you can modify to include submenus. Here you hace the code:

<div class="container">
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Manejando Datos</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Manejando datos</a>
</div>

<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="bootstrap_plantilla.html">Plantilla</a></li>
<li><a href="bootstrap_botones.html">Botones</a></li>
<li class="active"><a href="bootstrap_tabs.html">Tabs</a></li>
<li><a href="twitterbootstrap_table.html">Tablas</a></li>
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">Formularios <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="twitterbootstrap_formulario0.html">Formulario inicial</a></li>
<li><a href="twitterbootstrap_formulario.html">Otro formulario</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

The classes dropdown, dropdown-toggle and dropdown-menu are responsible for this behaviour.

Creating dropdown menus in a button

Using the dropdown class can be also useful and applied to a button, with several options.

<section class="container">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
Boton con dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Cabecera inicial</li>
<li><a href="">Link uno</a></li>
<li><a href="">Link 2</a></li>
<li class="divider"></li>
<li><a href="">Link 3</a></li>
<li class="disable"><a href="">Link no disponible</a></li>
</ul>
</div>
</section>

and you’ll get this:

Funny, isn’t it? Here you can see it in action.

Bootstrap is responsive

As you can see, the Twitter Bootstrap framework is responsive, and this way it can adjust to any resolution, and aspect that it cann’t be achieved using PureCSS, that has the restriction that the menu creation is a different project, although compatible. The big problem with PureCSS is that if tha base project updates, it doesn’t mean that the menu project works. And this situuation can create you a big problem. Bootstrap is only one project, although complex.

I had no doubt that moving from PureCSS to Bootstrap is a big step toward a good and responsive web design because during the last two years, the explosion of smartphones and tablets force front-end developers to attend this kind of devices as well.

Happy coding!