Suporte » Temas » Trocar Menu Lateral de HTML para CSS

Trocar Menu Lateral de HTML para CSS

  • vanessavolk

    (@vanessavolk)


    7 anos, 7 meses atrás

    Olá amigos
    Estou com uma dúvida e já queimei minha cabeça tentando resolver pela internet. Resolvi vir aqui ver se vocês conseguem em ajudar.
    Vou tentar explicar, se não ficar claro, por favor, me perguntem que tento explicar melhor.

    Meu caso é o seguinte.
    Quero aumentar a velocidade de carregamento meu site. (http://pimentaesal.com.br/)
    Estou medindo através do gtmetrix.com e tentando fazer o que ele recomenda

    Uma das coisas que ele me recomendou foi “Combine images using CSS sprites”. Eu não tinha ouvido falar nisso até então e está tudo muito confuso na minha cabeça.

    Eu entendi a lógica disso, diminuir o número de requisições, que ao invés de chamar várias imagens como está fazendo agora, vai chamar uma imagem única. Colocando uma imagem de fundo e indicando os links através do CSS. A teoria em entendi, o que não consgigo fazer é a prática
    Encontrei alguns sites que geram o código CSS

    O que eu não entendi.
    – Como que eu vou implementar na minha barra lateral? Eu colocando o código no CSS não precisa colocar nada no Widgets?
    – A posição que o código vai gerar tenho que colocar exatamente onde vai parecer no site? Como se fosse coordenadas? Como a Barra Lateral é meio separada eu não entendo como indico para aparecer lá.

    Obrigada

Visualizando 2 respostas - 1 até 2 (de um total de 2)
  • Moderador Ramon Ahnert

    (@rahmohn)

    7 anos, 7 meses atrás

    Olá, @vanessavolk.

    Essa dica de combinar várias imagens em uma só é normalmente usada para os ícones que seu site usa. Ao invés de ter várias imagens, você vai ter apenas uma que possui todos os ícones.

    Dessa forma, você coloca essa imagem como background e coloca a coordenada do ícone que quer exibir.

    Por exemplo, se você quiser colocar o ícone de uma casa no botão home, seu código vai ficar +- assim:

    .btn-home {
    background-image: url(todos-os-icones.jpg);
    background-position: 20px 10px;
}
    Criador do tópico vanessavolk

    (@vanessavolk)

    7 anos, 7 meses atrás

    Oi Rahmohn

    A parte da imagem no background eu entendi,
    O que eu não entendi é qual o código links do menu.

    Este código que você passou ele é da imagem certo?

    Eu tenho que colocar um código e coordenada de cada link, certo?

    obrigada

Visualizando 2 respostas - 1 até 2 (de um total de 2)
  • O tópico ‘Trocar Menu Lateral de HTML para CSS’ está fechado para novas respostas.

Tags de tópico

Visualizações