Create a lower bar with Tabs

Checking source code you can see how some page implements the drawing and functionality.

In the case of the PHP Debug Bar site, it is a matter of setting a menu in the footer and displaying elements below the menu when any item is selected. I did not find the scripts on the site, but a basic jQuery will take care of showing / hiding the elements.

The HTML structure is:

<div class="phpdebugbar">
    <div class="phpdebugbar-header">        
        <a href="javascript:" class="phpdebugbar-tab" data-tab="messages">Messages</a>
        <!-- OUTROS MENUS -->
    </div>

    <div class="phpdebugbar-body">
        <div class="phpdebugbar-panel active" id="tab-messages">
            <!-- CONTEÚDO A SER MOSTRADO -->
            <button class="phpdebugbar-close-btn">fechar</button>
        </div>
        <!-- OUTRAS TABS -->
    </div>
</div>

The CSS:

.phpdebugbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.phpdebugbar-header {
  min-height: 26px;
}

.phpdebugbar-header:after {
  clear: both;
}

.phpdebugbar-body {
  display: none;
  position: relative;
  height: 300px;
}

.phpdebugbar-panel {
  display: none;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.phpdebugbar-panel.active {
  display: block;
}

And jQuery:

$('.phpdebugbar-tab').click( function() {
    // Esconder painel ativo
    $('.phpdebugbar-panel.active').removeClass('active');
    // Marcar novo painel como ativo
    var tab = $(this).data('tab');
    $('#tab-'+tab).addClass('active');
    // Mostra o body se não estiver visivel
    if( $('.phpdebugbar-body').is(":hidden") ) {
        $('.phpdebugbar-body').toggle();
    }
});

$('.phpdebugbar-close-btn').click( function() {
    $('.phpdebugbar-body').toggle();
});

This is the fiddle of the code above. And this is using the HTML and CSS of the site (loading the Awesome Font via CDN ), I just made a few changes to the original code and still need a good cleanup.

Face if your own browser console ....

F12 press in chrome has several options you go in console ...

To be more top uses FireBug link