Como fazer uma aba lateral em CSS

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma aba lateral em CSS
Use CSS para criar uma aba lateral para página de internet (Hemera Technologies/AbleStock.com/Getty Images)

Uma aba lateral em uma página de internet geralmente é acompanhada por um script que é executado quando o usuário clica nela, como no caso de um formulário para fazer login ou compartilhar algo em uma rede social. Para que isso seja possível, no entanto, você deverá criar a aba. Com a propriedade "transform", no "CSS level 3" (CSS3), pode-se criar a aba usando um link orientado em 90º. Embora seja um código CSS3, há um filtro para o Internet Explorer, que funciona nas versões 6 a 8.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

  1. 1

    Abra a sua página em um editor de texto, como o Bloco de Notas, e adicione um "div" depois da tag "<body>":

    <div id=”tab”> <a href=”#”>Page Tab<a> </div>

    Dê ao "div" um ID único, como, por exemplo, "tab", e coloque o texto a ser exibido dentro das tags "<div>". Faça com que o texto possa ser clicado colocando entre as tags "<a>". Substitua o símbolo "#" do exemplo por um URL, se quiser que o link aponte para outra página.

  2. 2

    Estilize a aba em CSS dando cor de fundo, estilo de texto e bordas, que coincidam com o design da página:

    tab a {

    background-color: lightblue; color: darkblue; border: 2px solid darkblue; font-family: Arial, sans-serif; font-weight: bold; padding: 20px; }

    Essa folha de estilo aplica o formato às tags "<a>", para que a aba possa ser clicada. Se adicionar espaços ao "div" da aba, a área clicável será menor.

  3. 3

    Arredonde as duas pontas superiores da aba, se você quiser, usando a propriedade "border-radius":

    border-top-left-radius: 20px; border-top-right-radius: 20px;

    Essas duas linhas de código, se adicionadas à folha de estilo "#tab a", arredondarão a parte superior da aba.

  4. 4

    Oriente a aba para um lado:

    transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    A primeira linha acima é o método CSS3 padrão para rotar um elemento HTML. Como a maioria dos códigos ainda precisa de código prefixado, incluem-se prefixos para cada navegador; "-webkit" serve para o Chrome e o Safari. Versões anteriores do Internet Explorer usarão o filtro "filter", mostrado na última linha. Todo esse código deverá estar dentro da regra "#tab a".

  5. 5

    Coloque a aba no lado esquerdo da tela do navegador e deixe-a fixa em uma posição quando o usuário navegar pela página:

    position: fixed; left: 0; top: 50%; margin-top: -100px;

    Embora você não precise especificar uma posição desde o topo da tela, fazê-lo permitirá determinar a posição vertical da aba. Se você deu à sua aba uma largura específica, divida o valor dela pela metade, coloque um sinal negativo e o resultado como valor de "margin-top". Configure esse valor com uma posição "top" de 50% para, centrar verticalmente a aba na tela.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível