Como fazer um menu vertical usando transformações Css3

Há muito que podemos fazer com páginas da web que eram excessivamente complicadas há apenas alguns anos. Obrigado por CSS3 Transforms, podemos fazer alguns efeitos muito legais. Hoje eu quero mostrar como criar um menu vertical, ou um menu girado-90 graus para que ao invés de texto horizontal o texto fique vertical. Eu postei o código de amostra no jsFiddle para você experimentar, http://jsfiddle.net/docluv/tNext/3/.

Primeiro, precisamos criar a marcação. Para isso, envolvo os itens de menu em uma tag NAV, que indica semanticamente que os itens filhos são itens de navegação. Vamos estilizar isso mais tarde para fazer a rotação. Dentro da tag NAV está uma série de tags SPAN. Você pode usar DIVs ou qualquer outra tag que quiser, o importante é que você aplique as regras de estilo que irei compartilhar em alguns instantes.

 
 <
 
 nav 
 
 classe 
 
="menu-vertical"
 
> 
 
 <
 
 span 
 
 classe 
 
="nav-item"
 
> 
 AZUL 
 
 
 span 
 
> 
 
 <
 
 span 
 
 classe 
 
="nav-item nav-item-selected"
 
> 
 VERMELHO 
  
 span 
 
> 
 
 <
 
 span 
 
 classe 
 
="nav-item"
 
> 
 VERDE 
  
 span 
 
> 
 
 <
 
 span 
 
 classe 
 
="nav-item"
 
> 
 AMARELO 
  
 span 
 
> 
 
 <
 
 span 
 
 classe 
 
="nav-item"
 
> 
 PURPLE 
  
 span 
 
> 
 
  
 nav 
 
> 
 

Agora, o elemento de empacotamento, NAV, tem uma classe CSS chamada menu vertical, que você pode ver as regras abaixo. Você deve observar a regra transform: rotate (-90deg). Isso faz com que o elemento gire”para trás”90 graus em torno de seu centro, o eixo assumido. Os elementos filhos acompanharão o passeio, tornando-os verticais. Há um problema neste ponto porque o elemento gira em torno de seu centro de massa, então parece que está flutuando no espaço. Você vai querer mover o elemento para uma posição mais natural. Para meus propósitos, quero que o menu fique próximo ao lado esquerdo e, claro, para baixo o suficiente para que o elemento não cubra o cabeçalho ou saia da janela de visualização. Para fazer isso, adicionei as traduções X e Y de-80px. Escolhi-80 pixels porque preciso mover cerca de 1/3 da largura do elemento e 80 pixels funcionaram bem para mim. Você fez a necessidade de ajustar esses números para posicioná-los da maneira que você precisa.

Como uma observação lateral, se você não quiser usar as traduções X e Y, você pode posicionar o elemento com certeza. Isso é o que eu fiz originalmente. Quando você usa o posicionamento absoluto à esquerda é um valor negativo e o topo é positivo.

 
. Menu vertical 
 {
 text-align 
: 
 center; 
 
-moz-transform: rotate (-90deg) translateX (-80px) translateY (-80px); 
-webkit-transform: rotate (-90deg) translateX (-80px) translateY (-80px); 
-o-transform: rotate (-90deg) translateX (-80px) translateY (-80px); 
 transform: rotate (-90deg) translateX (-80px) translateY (-80px); 
 largura 
: 
250px;
 
 altura 
: 
 70px; 
 
 margem 
: 0; 
} 

A última regra é o alinhamento do texto: centro. Isso moverá os elementos filhos para que fiquem igualmente posicionados no elemento NAV de envolvimento. A largura e a altura fornecem as dimensões do elemento. Neste exemplo, eu queria 2 linhas. Se você quiser uma única linha, aumente a largura e reduza a altura para atender às suas necessidades.

As regras CSS restantes definem como os elementos de navegação são renderizados. Neste caso, eu queria cantos arredondados e um fundo vermelho. Eu adicionei uma classe selecionada que muda a cor de fundo para indicar visualmente sua seleção.

 
.nav-item 
 {
 cor de fundo 
: 
#c30000;
 
 cor 
: 
#fff;
 
 borda 
-radius: 
4px;
 
 altura 
: 
24px;
 
 altura da linha 
: 
 24px; 
 
 alinhamento vertical 
: 
middle;
 
 margem 
: 
 5px auto; 
 
 preenchimento 
: 
 2px 10px; 
 
 display 
: inline 
-block; 
 
} 
.nav-item-selected 
 {
 background-color 
: 
 # 7F0000; 
 
} 

Espero que isso o inspire a tirar proveito dos efeitos CSS3 em seus aplicativos da web. Visite meu jsFiddle para ver esse efeito em ação.