05/06/2017

Barra de rolagem na horizontal com CSS


Ohayoo bunnie's! Hoje venho mostrar como adicionar barra de rolagem na horizontal com CSS simples, existe meios diferentes de se fazer isso, dependendo de qual elemento ira usa-lo. Ex: menu, imagem, caixas, gadgets etc... Porém vou ensinar como adicionar em caixas ou menus, podendo adapta-lo ao que desejar, assim que compreender bem os códigos. Aqui na postagem deixarei um exemplo, basta seguir abaixo.



OBS: As barras de rolagem do meu blog são personalizadas, então talvez em seu blog fiquem no modo padrão ou personalizadas se estiverem ativas no html do seu blog. 

Como disse existe diversas formas de fazer isso mas todos utilizam algum desses elementos: display:inline-block, white-space:nowrap e overflow-x: scroll ou overflow-y: hidden. Futuramente farei uma postagem explicando um pouco sobre cada um e em que diversas coisas podem se utilizar, mas o que é importante para esse tutorial é só entender isso:
Códigos
    nome do elemento { //aqui pode ser outro elemento específico que quiser
    overflow-x: hidden; //se realmente quer impedir que tenha uma barra vertical.
    overflow-y: scroll; //pode-se usar auto para deixar o browser decidir quando usar.
    white-space: nowrap; //não deixa quebrar a linha
    }
Só isso! Esquece todo resto. 

1. Agora sim, vamos ao tutorial. Lembrando que aqui vou mostrar como adiciona-lo a um menu com imagens, mas usando esse mesmo tutorial pode adicionar em vários outros elementos. Vamos começar do zero, começando com um menu simples. Esse é seu corpo:

Códigos
.menu {
width: 200px;
background: #ccc;
float: center;
text-align: center;
font-family: 'Georgia';
font-size: 19px;
color: #000;
}

Para adicionar a barra horizontal basta adicionar o seguinte código dentro do menu, de preferencia no inicio dos códigos.


Códigos
overflow-x: scroll;
overflow-y: hidden;
height: 200px;
white-space:nowrap;
Ficaria assim:

.menu {
overflow-x: scroll;
overflow-y: hidden;
height: 200px;
white-space:nowrap;
width: 300px;
background: #ccc;
float: center;
text-align: center;
font-family: 'Georgia';
font-size: 19px;
color: #000;
}

Vermelho: Nome do menu
Laraja: Elementos da barra
Azul: Css do menu (corpo do menu)
Verde: Chaves (abre o menu e fecha ele)

2. E basta adicionar o javascript onde desejar, seja postagem ou Gadgets. Caso não saiba como abrir um novo gadget, basta ir em Layout>> Adicionar um Gadget>> HTML/JavaScript HTML e dentro dele por o seguinte código:

Códigos
<div class="menu">Aqui vai texto ou conteúdo</div>
Salve e pronto!

Viu? Simples! Porém esse é só o corpo simples, se desejar adicionar imagem, deve criar uma segunda tag. Que seria o nome do meu + img, ficaria assim:

.menu img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}
.menu {
codigos da barra
codigos do menu
}

Agora o código javascript fica um pouquinho diferente, ficara assim:

Códigos
<div class="menu"><img src="Endereço da imagem" /> Aqui vai texto ou conteúdo</div>

3. Agora é só adicionar o javascript onde desejar, seja postagem ou Gadgets. Caso não saiba como abrir um novo gadget, basta ir em Layout>> Adicionar um Gadget>> HTML/JavaScript HTML e dentro dele.

Se desejar adicionar na sidebar, postagem ou outros códigos é só copiar o elemento da barra de rolagem e colar dentro da área que deseja. =) Essa foi a postagem de hoje, espero que tenham gostado, seja útil e fácil de entender. Se tiver qualquer dúvida ou dificuldade basta comentar, terei todo prazer em lhe ajudar. Até aproxima!

8 comentários:

  1. Hannah Beth6/7/17

    Não conhecia esse método deve ficar legal para disponebilizar download

    ResponderExcluir
  2. Anônimo15/7/17

    Que legal! É possível personalizar a caixa? Assim colocar imagem no fundo? Botões?

    ResponderExcluir
    Respostas
    1. Tem sim! =D É só acrescentar no CSS dele.

      Excluir
  3. Hannah Beth15/7/17

    É possível utilizar para amostra de themes d tumblr?

    ResponderExcluir
    Respostas
    1. É possível sim. Só precisa fazer algumas adaptações para isso.

      Excluir
  4. Oi Wendy, turu bom?
    Adorei o tutorial, bem explicadinho! >.<
    Eu vou usar esse modelo no meu blog, vou disponibilizar alguns icons ~ninguém quer saber ;-;~ e acho que desse jeitinho além de ocupar menos espaço fica mais arrumadinho!!

    Kissu | https://blog-rainydays.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Maah! Obrigada por gostar do tutorial.

      Verdade ocupa bem menos! Ficara lindo *-*

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345