Create a bottom bar with Tabs

Asked

Viewed 271 times

1

Is there any jQuery plugin that creates an options bar like the one in the project PHP Debug Bar? Does anyone have any suggestions for implementation?

The "Messages | Request | Timeline" is a thin and fixed bar in the footer of the site and when clicking "Messages" shows the content "hello world" etc.

menu

javascript jquery html css css3

  • A lot interesting this Debug Bar! . . . But why do you want in jQuery?

  • I saw this Debug Bar in Zend Framework 2 and would like to implement a menu in this style for a project. I didn’t want to recreate this app just using the idea of this menu, you know? I have a bit of difficulty in Jquery and wanted suggestions on how to create something similar.

2 answers

2

2


Checking the source code it is possible to see how some page implements the design and functionality.

In the case of the PHP Debug Bar website, it is a matter of pinning a menu to the footer and showing elements below the menu when an item is selected. I couldn’t find the scripts on the site, but a basic jQuery will take care of showing/hiding the elements.

The structure of HTML 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 the 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. E this is using the HTML and CSS of the site (loading the Font Awesome via CDN), I made only a few modifications to the original code and still needs a good cleaning.

  • Man, really good. That’s exactly what I’ve been wanting.

Browser other questions tagged javascript jquery html css css3

You are not signed in. Login or sign up in order to post.