• Navegação
• Menus de abas
• Breadbrumbs
• Alertas
• Área de textos dinâmicos
• Botões dropdown
• Botões com ícones
• Bottões agrupados
• Paginação
• Barras de progresso
• Preloaders
• Imagens e fotografia
• Lista de passos

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) e incluem suporte para um nome de projeto para navegação básica. 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

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

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

Exemplo

• Item 1
  • sub-item 1
  • sub-item 2
    • sub-item 2.1
      • sub-item 2.1.1
      • sub-item 2.2.2
    • sub-item 2.2
  • sub-item 3
• 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>

Atenção! Para o correto funcionamento dos menus dropdown do mainMenu1, é necessário o uso de um recurso JavaScript. Veja mais na documentação do Dropdown.

<script>
    $("#nav1").ddwMenu();
</script>

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="span12">
                <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>

A barra headerMenu1 pode ser usada na geração de menus no topo da página. Para alinhar à esquerda, insira headerMenu1 left. Para alinhar à direita, insira headerMenu1 right.

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

Exemplo

• • English
  • Español
  • French
  • German
  • Italian
• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
  • Item 2.1
  • Item 2.2
  • Item 2.3
• Item 3

<ul class="headerMenu1 left" id="nav2">
    <li>
        <a>Item 1</a>
        <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li>
        <a>Item 2</a>
        <ul>
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
            <li><a href="#">Item 2.3</a></li>
        </ul>
    </li>
    <li>
        <a>Item 3</a>
    </li>
</ul>

Atenção! Para o correto funcionamento dos menus dropdown do headerMenu1, é necessário o uso de um recurso JavaScript. Veja mais na documentação do Dropdown.

<script>
    //Buscando todos os elementos LI que possuem UL no elemento
    //de ID 'nav2' e inserindo nesses elementos LI o jQuery Dropdown
    $("#nav2").find("li").has("ul").dropdown();
</script>

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

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

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

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

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

• Você está aqui:
• »
• Subseção 1
• »
• Subseção 2
• »
• Subseção 3

<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><a href="#"><b>Subseção 3</b></a></li>
</ul>

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

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

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:

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

Os Botões Padrão singleButton* suportam inserção de menus dropdown em seu interior. Para isso, basta inserir uma lista <ul> em seu código, acrecido dos ícones sinalizadores de retração / expansão que você desejar:

<a class="singleButton1 small" id="sampleButton">
    Dropdown
    <ul>
        <li>Opção 1</li>
        <li>Opção 2</li>
        ...
    </ul>
    <i class="icon16px pattern black opacity50percent sprite-chevron-medium-fat-4-01 separator"></i>
</a>

Dica quente! Na lista de itens do menu dropdown, você pode incluir elementos <li> com classe separator para criar separadores entre os elementos.

<a class="singleButton1 small" id="sampleButton">
    Dropdown
    <ul>
        <li>Opção 1</li>
        <li class="separator"></li>
        <li>Opção 2</li>
        ...
    </ul>
    <i class="icon16px pattern black opacity50percent sprite-chevron-medium-fat-4-01 separator"></i>
</a>

Atenção! Para o correto funcionamento dos menus dropdown no singleButton*, é necessário o uso de um recurso JavaScript. Veja mais na documentação do Dropdown.

<script>
    $('#ddwButton2').dropdown();
</script>    

Os Botões Padrão singleButton* do tipo <button> e do tipo <a> suportam a inserção de ícones dentro de si.

Atenção! Botões com ícones não podem ser criados com elementos do tipo <input>.

<a class="singleButton1 large">
    <i class="icon16px pattern white opacity80percent sprite-actions-square-add"></i>
    Icon Button
</a> 
<button class="singleButton2 large">
    <i class="icon16px pattern black opacity50percent sprite-edition-magnifier"></i>
    Icon Button
</button>

Os Botões Padrão singleButton* podem ser usados na criação de grupos. Para isto, basta criá-los contidos em um elemento <div> instanciado com a classe CSS buttonGroup. Os botões podem ser instanciados e agrupados em qualquer tamanho (mini, small e large).

Adicione ao botão ativo a classe active para diferenciá-lo dos demais.

<div class="buttonGroup">
    <input type="button" class="singleButton1 small active" value="Opção 1" />
    <input type="button" class="singleButton1 small" value="Opção 2" />
    <input type="button" class="singleButton1 small" value="Opção 3" />
</div>

A paginação é criada a partir de um elemento <ul> contido em um elemento pai <div> instanciado com a classe pagination.

Os elementos filhos do tipo <li> podem receber as classes active, para sinalizar paginação ativa, ou disabled, para sinalizar paginação inativa. Podem ainda receber a classe more no box de reticências.

<div class="pagination">
    <ul>
        <li class="disabled"><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="more">...</li>
        <li><a href="#">24</a></li>
        <li><a href="#">25</a></li>
        <li><a href="#">»</a></li>
    </ul>
</div>

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

---

Atenção! as classes definidoras de comportamento não são compatíveis com IE8 e inferiores.

---

Exemplos

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

Estilos padrão de imagem e fotografia podem ser inseridos em elementos do tipo <img /> ou em containers que comportem imagens. Para isso, basta instanciá-los com a classe picture1.

<!--Imagem simples-->
<img src="..." class="picture1" />
<!--Container com imagem-->
<div class="picture1"><img src="..." /></div>

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

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