Navegação

As barras de navegação são elementos que podem ser incorporados em sua página com vários recursos incrementais.

Para começar, barras de navegação são estáticas (não fixas no topo). Coloque em qualquer lugar dentro de um .container, que especifica uma largura do site e do conteúdo.

Dica quente! Utilize recursos javascript para incrementar as funcionalidades das suas barras de navegação;

Barras de navegação principais

É instanciada através da classe mainMenu*, tendo como complemento um numeral que representa o seu estilo (Ex: mainMenu1, mainMenu2, etc.)

mainMenu1

Para serem mostrados como ativos, os elementos <li> da barra de navegação mainMenu1 devem ser associados a uma class active.

Exemplo

Item 1
Item 2
Item 3

<ul class="mainMenu1" id="nav1">
    <li>
        <a>Item 1</a>
        <ul>
            <li><a>sub-item 1</a></li>
            <li>
                <a>sub-item 2</a>
                <ul>
                    <li>
                        <a>sub-item 2.1</a>
                        <ul>
                            <li><a>sub-item 2.1.1</a></li>
                            <li><a>sub-item 2.2.2</a></li>
                        </ul>
                    </li>
                    <li><a>sub-item 2.2</a></li>
                </ul>
            </li>
            <li><a>sub-item 3</a></li>
        </ul>
    </li>
    <li><a>Item 2</a></li>
    <li class="active"><a>Item 3</a></li>
</ul>

mainMenu1 sempre no topo

Para exibir a barra mainMenu1 no topo da tela, é necessário criar um container com filhos row e span* para a comportar a barra. Veja no código:

<div class="zIndex99 cor1_bg" id="topMenu">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="mainMenu1">
	                <li><a>Item 1</a></li>
	                <li><a>Item 2</a></li>
	                <li class="active"><a>Item 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

o elemento de id #topMenu faz a função da barra horizontal infinita que comporta o mainMenu1. Ele pode receber uma cor padrão que comportará o menu.

O elemento #topMenu deverá receber os seguintes estilos CSS:

<style>
    #topMenu {width: 100%; left: 0;}
    #topMenu ul.mainMenu {
        width: 980px; 
        margin: 0; 
        box-shadow: none; 
        -moz-box-shadow: none; 
        -webkit-box-shadow: none;
    }
</style>

Atenção! Para o correto funcionamento do mainMenu1 sempre no topo, é necessário o uso de um recurso JavaScript. Veja mais na documentação do Item flutuante.

<script>
    $("#topMenu").floatItem({
        preserveSize: false,
        top: 0
    })
</script>

Menus de abas

navTab1

O recurso navTab1 é instanciado com elementos do tipo <ul> e foi criado para trabalhar associado a boxes do tipo singleBox1.

Requer um container que agrupe as tabs a serem exibidas ao se navegar no menu de abas. No modelo abaixo, esse container é uma <div> de id navTab1Group.

O navTab1 pode ser utilizado sozinho (sem comportamento de clique no menu de abas) ou em conjunto com o recurso jquery.navtab.js, que instancia a funcionalidade de clique nas abas do menu.

Exemplo

Item 1
Item 2
Item 3

Texto do item 1

Texto do item 2

Texto do item 3

<ul class="navTab1" id="navModel1">
    <li><a href="#tab1Nav1">Item 1</a></li>
    <li><a href="#tab2Nav1">Item 2</a></li>
    <li><a href="#tab3Nav1">Item 3</a></li>
</ul>
<div id="navTab1Group" class="singleBox1 noTopLeftBorderRadius">
    <div id="tab1Nav1">
        Texto do item 1
    </div>
    <div id="tab2Nav1">
        Texto do item 2
    </div>               
    <div id="tab3Nav1">
        Texto do item 3
    </div>
</div>

Dica quente! Utilize o script jquery.navtab.js, para instanciar a funcionalidade de clique nas abas do menu.

<script type="text/javascript">
        $('#navModel1').navtab({
            tabGroup: "#navTab1Group",
            activeTab: "#tab2Nav1"
        });
    </script>

navTab2

O recurso navTab2 é instanciado com elementos do tipo <ul>.

Requer um container que agrupe as tabs a serem exibidas ao se navegar no menu de abas. No modelo abaixo, esse container é uma <div> de id navTab2Group.

O navTab2 pode ser utilizado sozinho (sem comportamento de clique no menu de abas) ou em conjunto com o recurso jquery.navtab.js, que instancia a funcionalidade de clique nas abas do menu.

Exemplo

Item 1
Item 2
Item 3

Texto do item 1

Texto do item 2

Texto do item 3

<ul class="navTab2" id="navModel2">
        <li><a href="#tab1Nav2">Item 1</a></li>
        <li><a href="#tab2Nav2">Item 2</a></li>
        <li><a href="#tab3Nav2">Item 3</a></li>
    </ul>
    <div id="navTab2Group">
        <div id="tab1Nav2">
            Texto do item 1
        </div>
        <div id="tab2Nav2">
            Texto do item 2
        </div>               
        <div id="tab3Nav2">
            Texto do item 3
        </div>
    </div>

Dica quente! Utilize o script jquery.navtab.js, para instanciar a funcionalidade de clique nas abas do menu.

<script type="text/javascript">
        $('#navModel2').navtab({
            tabGroup: "#navTab2Group",
            activeTab: "#tab2Nav2"
        });
    </script>

navTab3

O recurso navTab3 é instanciado com elementos do tipo <ul>.

Requer um container que agrupe as tabs a serem exibidas ao se navegar no menu de abas. No modelo abaixo, esse container é uma <div> de id navTab3Group.

O navTab3 pode ser utilizado sozinho (sem comportamento de clique no menu de abas) ou em conjunto com o recurso jquery.navtab.js, que instancia a funcionalidade de clique nas abas do menu.

Exemplo

Item 1
Item 2
Item 3

Texto do item 1

Texto do item 2

Texto do item 3

<ul class="navTab2" id="navModel2">
        <li><a href="#tab1Nav2">Item 1</a></li>
        <li><a href="#tab2Nav2">Item 2</a></li>
        <li><a href="#tab3Nav2">Item 3</a></li>
    </ul>
    <div id="navTab2Group">
        <div id="tab1Nav2">
            Texto do item 1
        </div>
        <div id="tab2Nav2">
            Texto do item 2
        </div>               
        <div id="tab3Nav2">
            Texto do item 3
        </div>
    </div>

Dica quente! Utilize o script jquery.navtab.js, para instanciar a funcionalidade de clique nas abas do menu.

<script type="text/javascript">
        $('#navModel2').navtab({
            tabGroup: "#navTab2Group",
            activeTab: "#tab2Nav2"
        });
    </script>

Breadcrumbs

O breadcrumb é um recurso de navegação que demonstra para o usuário qual é o seu local atual. É instanciado através de uma lista <ul> com a classe breadcrumb.

Exemplo

<ul class="breadcrumb">
    <li>Você está aqui:</li> 
    <li>»</li>
    <li><a href="#">Subseção 1</a></li>
    <li>»</li>
    <li><a href="#">Subseção 2</a></li>
    <li>»</li>
    <li><b>Subseção 3</b></li>
</ul>

Alertas

Os boxes de mensagem de alerta podem ser instanciados a partir da classe message. Associados às classes error, warning, success, info e note, compõem os estilos de alertas.

Exemplos

Erro: Ocorreu um erro

Atenção: Verifique os seus dados

Sucesso! Conteúdo cadastrado.

Você sabia? Utilizar normas e padrões é muito legal!

Nota: Lembre-se de atualizar seus dados

<div class="message error">...</div>
<div class="message warning">...</div>
<div class="message success">...</div>
<div class="message info">...</div>
<div class="message note">...</div>

Área de textos dinâmicos

O elemento plainTextArea é um recurso essencialmente importante em situações em que há na página textos com formatação HTML tragos do banco de dados e editados pelos clientes, muitas vezes leigos.

Nesses casos, é necessário haver um container que formate o texto de acordo com os melhores padrões e, é aí que o elemento plainTextArea se torna importante. Instanciando esse elemento como um container do conteúdo dinâmico, ele será responsável por trazer as pré-formatações CSS necessárias para que o texto fique claro e legível na página, sem distorções. Isso traz uma garantia de que o texto será exibido com uma formatação correta. Veja um exemplo:

Exemplos

Texto dinâmico SEM o container `plainTextArea`

Título: Lorem ipsum

Parágrafo 1: Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lista simples - Item 1
Lista simples - Item 2
Lista simples - Item 3

Parágrafo 2: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Parágrafo 3: Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Texto dinâmico COM o container `plainTextArea`

Título: Lorem ipsum

Parágrafo 1: Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lista simples - Item 1
Lista simples - Item 2
Lista simples - Item 3

Parágrafo 2: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Parágrafo 3: Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<div class="plainTextArea">...</div>

Barras de progresso

As barras de progresso são formadas por um elemento <div> de classe progress associados a um elemento filho <div> de classe bar.

Como complementares, estão disponíveis as classes definidoras de cor (red, green, yellow ou blue) e as classes definidoras de comportamento (striped, para padrão zebrado, e striped active, para padrão zebrado e animado).

Exemplos

60% Concluído – vermelha

60% Concluído – verde

60% Concluído – amarela

60% Concluído – azul

40% Concluído – zebrada vermelha

40% Concluído – zebrada verde

40% Concluído – zebrada amarela

40% Concluído – zebrada azul

60% Concluído – zebrada vermelha animada

60% Concluído – zebrada verde animada

60% Concluído – zebrada amarela animada

60% Concluído – zebrada azul animada

O atributo style="width: *%;" define o status do progresso.

<!--Barra azul simples-->
<div class="progress blue">
    <div class="bar" style="width: 40%;"></div>
</div>
<!--Barra azul zebrada-->
<div class="progress blue striped">
    <div class="bar" style="width: 40%;"></div>
</div>
<!--Barra azul zebrada animada-->
<div class="progress blue striped active">
    <div class="bar" style="width: 40%;"></div>
</div>

Preloaders

Preloaders são recursos disponíveis na biblioteca de padrões para demonstrar o carregamento de elementos:

Podem ser instanciados através de um elemento <i> com a classe preloader. composta por uma classe adicional que define o seu tamanho padrão (mini, small ou large).

É possível também instanciar um preloader modal, que é carregado fixo no meio da página

`preloader mini`	`preloader small`	`preloader large`	`preloader modal`
			Exibir preloader

<i class="preloader mini"></i>
<i class="preloader small"></i>
<i class="preloader large"></i>
<i class="preloader modal"></i>

Lista de passos

A lista de passos é um recurso que pode ser associado à caixa de títulos padrão pageHeader. Para criá-la, basta criar um elemento <ul> instanciado com a classe stepList dentro da caixa de títulos, logo após o título <h*>.

Os elementos description, presentes dentro dos filhos <li> da lista de passos, são destinados ao título dos passos.

Os elementos stepIcon, presentes dentro dos filhos <li> da lista de passos, são os geradores dos ícones de situação do passo. Podem receber as classes complementares success, error, warning ou active.

Exemplo

Padrão de lista de passos

Passo 1
Passo 2
Passo 3
Passo 4
Passo 5
Passo 6

<div class="pageHeader">
    <h1 class="cor1_color">Padrão de lista de passos</h1>
    <ul class="stepList">
        <li>
            <div class="description">Passo 1</div>
            <a class="stepIcon success"></a>
        </li>
        <li>
            <div class="description">Passo 2</div>
            <a class="stepIcon success"></a>
        </li>
        <li>
            <div class="description">Passo 3</div>
            <a class="stepIcon error" title="Existem campos não preenchidos"></a>
        </li>
        <li>
            <div class="description">Passo 4</div>
            <a class="stepIcon warning" title="Existem campos não preenchidos"></a>
        </li>
        <li>
            <div class="description active">Passo 5</div>
            <a class="stepIcon active"></a>
        </li>
        <li>
            <div class="description">Passo 6</div>
            <a class="stepIcon"></a>
        </li>
    </ul>
</div>

Dica quente! Utilize o plugin jquery.tooltip.js para incrementar um balão de informações aos ícones de status da lista de passos.

<script type="text/javascript">
    $(document).ready(function () {
        //setando tooltip na lista passo a passo
        $(".stepIcon").tooltip();
    });
</script>

Componentes

Navegação

Barras de navegação principais

mainMenu1

mainMenu1 sempre no topo

Menus de abas

navTab1

navTab2

navTab3

Breadcrumbs

Alertas

Área de textos dinâmicos

Texto dinâmico SEM o container plainTextArea

Título: Lorem ipsum

Texto dinâmico COM o container plainTextArea

Título: Lorem ipsum

Barras de progresso

Preloaders

Lista de passos

Padrão de lista de passos

Texto dinâmico SEM o container `plainTextArea`

Texto dinâmico COM o container `plainTextArea`