{ Sketch }

Guia de aprendizado

Design responsívo: menus e navegadores

Clique/toque aqui para navegar pelas seções da página

Toda a navegação de um website pode ser organizada por meio de menus, que são replicados em suas diversas páginas. Os menus podem ser horizontais, presentes em cabeçalhos. Estes podem ainda ser verticais, dispostos ao lado de uma seção de conteúdo. O framework Sketch fornece classes para criar menus drop-down horizontais e verticais por meio das classes drop-down-menu e vertical-drop-down-menu, respectivamente.

A criação de menus leva em consideração alguns recursos:

background-menu: fornece uma camada para trabalhar planos de fundo para o menu quando o dispositivo do usuário possuir resolução menor ou igual a 480px de largura.
menu-top-icon: disponibiliza um icone (ou texto) com link para subir ao topo da página do website (opcional).
menu-close-button: disponibiliza um icone (ou texto) para fechar o menu quando visualizado em um dispositivo com resolução menor ou igual a 480px de largura.
menu-icon: disponibiliza um icone (ou texto) para abrir o menu quando visualizado em um dispositivo com resolução menor ou igual a 480px de largura.
menu: organiza os o menu e seus itens, agrupados em uma lista não ordenada por meio da classe menu-items.

Aviso:

Para utilizar os menus e navegadores providos pelo framework você deve adicionar a biblioteca javascript sketch.js às suas páginas web.

Considere o exemplo abaixo, que demonstra como um menu drop-down horizontal pode ser criado:

                 
                <div class="drop-down-menu">                
                         <div id="background-menu" class="background-menu">                
                         </div>
                         <div id="menu-top-icon" class="smartphone-device-element menu-top-icon">                
                                  <a href="javascript:navPage('#');closeMenu()">
                                           <p class="fa fa-arrow-up text-color-indigo bg-color-white">
                                           </p>
                                  </a>
                         </div>
                         <div id="menu-close-button" class="close-icon fa fa-close" onclick="closeMenu();">                                          
                         </div>
                         <div id="menu-icon" class="menu-icon fa fa-bars" onclick="openMenu();">                                          
                         </div>
                         <div id="menu" class="menu bg-color-indigo">                
                                  <ul class="menu-items">
                                           <li>
                                                    <a href="http://sketch.orgfree.com">
                                                             <p>
                                                                      Voltar ao framework
                                                             </p>
                                                    </a>
                                           </li>                             
                                  </ul>
                         </div>
                </div>

visualize o resultado aqui

Aviso:

Quando o menu drop-down é visualizado em dispositivos com até 480px de largura ele ganha posição fixa na tela. Em virtude disso, o trecho de código acima corresponde à página de exemplo do framework, acessível por meio do link externo fornecido acima. Note que não é possível ter mais do que um menu da classe com sufixo drop-down-menu, dado que toda a navegação principal de um website estará nele. Contudo, é possível ter sub-itens dentro do escopo do menu drop-down.

Aviso:

É possível ter sub-menus dentro de um menu drop-down. Para tanto, a cada novo item do menu drop-down, pode-se inserir uma nova lista interna, que deve possuir um id com prefixo sub-menu-, esses identificadores, juntamente com esses prefixos, irão facilitar o controle responsívo do sub-menu, garantindo seu acesso tanto via toque, quanto via eventos do mouse.

Menus: navegadores de conteúdo

Navegadores de conteúdo disponibilizam um menu que se expande na tela para guiar a navegação do usuário pelo conteúdo da página de um website. Observe ao exemplo abaixo:

                 
                <div class="container">     
                         <p class="text-center" onclick="openNavigator('meu-navegador')">
                                  <span class="fa fa-list">
                                  </span> 
                                  descrição do navegador que será exibido junto ao ícone de listagem 
                         </p>                    
                         <div id="meu-navegador" class="container navigator-menu">                
                                  <div class="container bg-color-dodger-blue">
                                           <p class="text-color-white">
                                                    Título do navegador 
                                           </p>
                                  </div>                   
                                  <div id="btn-fechar" class="close-icon text-color-white text-size-medium fa fa-close x-small-padding" onclick="closeNavigator('meu-navegador')">                                          
                                  </div>                   
                                  <div class="col-12 content">                
                                           <ul class="navigator-items">
                                                    <li>
                                                             <a href="javascript:navPage('#');closeNavigator('meu-navegador');">
                                                                      <p>
                                                                               Conteúdo 1
                                                                      </p>
                                                             </a>                            
                                                    </li>
                                                    <li>
                                                             <a href="javascript:navPage('#');closeNavigator('meu-navegador');">
                                                                      <p>
                                                                               Conteúdo 2
                                                                      </p>
                                                             </a>                            
                                                    </li>                             
                                                    <li>
                                                             <a href="javascript:navPage('#');closeNavigator('meu-navegador');">
                                                                      <p>
                                                                               Conteúdo 3
                                                                      </p>
                                                             </a>                            
                                                    </li>                             
                                           </ul>                   
                                  </div>
                         </div>
                </div>

Esse código irá gerar o seguinte resultado:

descrição do navegador que será exibido junto ao ícone de listagem