Nav Toggle sem plugin • HTML5/CSS3/JS

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 48

  • @DaviMartins99
    @DaviMartins99 9 лет назад +2

    Cara, bom demais! Você explica de forma muito clara, parabéns!

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +1

      Davi Martins vlw demais pelos elogios. Fico feliz em contribuir. Tem alguma sugestão para tutoriais futuros? Abraços ;)

    • @DaviMartins99
      @DaviMartins99 9 лет назад +1

      Ferreira Studios por que não subir o nível e fazer um site completo usando um framework, tipo o Boostrap ou Pure? Sei que já tem tutoriais assim na internet, mas a maioria está em inglês e muitas pessoas não entendem, da forma que você explica ficaria muito mais claro.

  • @AntonioSouza
    @AntonioSouza 9 лет назад +1

    Não é a minha área desenvolver/programar, mas curto assistir e até brincar um pouco com os códigos. Quando possível vou passar por aqui no seu canal.
    Parabéns. Explica de forma bem agradável.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +1

      *****, obrigado meu caro! Fico feliz em contribuir de forma que todos entendam. Continue ligado conosco. Forte abraço ;)

  • @gaell.g
    @gaell.g 6 лет назад

    exatamente 3:00 am, e caramba eu acabei de testar aqui e ficou bem bacana, como não conheci essa aula antes?

  • @Rodrigo.antunes5
    @Rodrigo.antunes5 9 лет назад +1

    Muito bom, meu projeto de conclusão de curso era um site responsivo, e empaquei nessa parte do menu, mas agora deu certo!

  • @VitorBrunovb
    @VitorBrunovb 8 лет назад

    Excelente seus videos, por acidente achei seu canal e como queria ter encontrado antes viu! Completo suas vídeo aulas. Parabéns mesmo. Sucesso.

  • @_vitorhenriquec
    @_vitorhenriquec 9 лет назад +1

    Muito bom! Aguardo por mais aulas relacionadas ao conteúdo web.

  • @Mateus16921
    @Mateus16921 9 лет назад +2

    cara tu é foda! Eu estava procurando ontem na internet como fazer! Sucesso, mano!

  • @magnoramos8746
    @magnoramos8746 9 лет назад +1

    apesar de explicar bem rapido, foi uma otima aula, parabens!

  • @MouraClaudecir
    @MouraClaudecir 9 лет назад +1

    Muito bom ... parabéns ... eu fazia usando o Toggle do JQuey haha ... gostei muito da vídeo aula.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +1

      *****, eu também sempre usei com Jquery. Mas descobri essa opção, que realmente é muito simples e possui um bom suporte. Obrigado por nos acompanhar amigo, forte abraço. ;)

    • @MouraClaudecir
      @MouraClaudecir 9 лет назад +1

      Vou começar a usar assim também haha ... valew

  • @AeroNavSim
    @AeroNavSim 9 лет назад +1

    Muito bom cara, você me ajudou demais em um projeto que estou fazendo... muito obrigado...

  • @tiegoaraujo742
    @tiegoaraujo742 9 лет назад +1

    Show demais! Valeu!

  • @Guihgo
    @Guihgo 9 лет назад +1

    ficou muito top. valeu

  • @RonaldoSilvaRRCONNECT
    @RonaldoSilvaRRCONNECT 6 лет назад

    Muito Bom!
    Show de bola!

  • @IDEIAS-pi5ps
    @IDEIAS-pi5ps 8 лет назад

    estou tentando colocar em uma folha de etilo externa mas não pega, acho que é porque o script não encontra o caminho, me ajuda pf estou iniciando agora

  • @fabiomrmatos
    @fabiomrmatos 9 лет назад +1

    boas muito bem explicado, eu so nao percebi a parte do innerHeight ja reparei que tirando essa parte o fundo do slide nao aparece mas nao precebi o que foi feito ai podes me explicar melhor o que acontece e para que serve isso?

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад

      +fabim matos InnerHeight é uma propriedade do objeto window no javascript. Por meio dela, conseguimos definir ou obter a largura da área onde o conteúdo é apresentado, não a largura do navegador em si. Abraços ;)

  • @marcosfons
    @marcosfons 7 лет назад

    Quando a section ta fora da área visível(left: -250) ela continua gastando recursos do PC? Ou os navegadores entendem que não está na área visível e para de usar recursos pra ele?

  • @matheusfonseca2826
    @matheusfonseca2826 9 лет назад

    O que o js faz nessa linha?
    slider.style.height = window.innerHeight - 60 + "px";

  • @rogeriorock11
    @rogeriorock11 9 лет назад +1

    muito boa essa aula

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +1

      +rogerio adalto dos santos eu também adoro ela! rsrsrs Continue nos acompanhando meu amigo, grande abraço. ;)

  • @marcelohenriquedev
    @marcelohenriquedev 9 лет назад +1

    muito bom e muito simples

  • @autovrum
    @autovrum 9 лет назад +1

    parabéns pela iniciativa

  • @nanna1796
    @nanna1796 9 лет назад +1

    Existe algum meio de adicionar mais de um toggle no código? Por exemplo: eu tenho 5 botões e cada um deles deve abrir uma div diferente.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +2

      +Nimmo tem sim! Basta colocar as referências diferentes (class e nos caminhos do js) .:)

    • @nanna1796
      @nanna1796 9 лет назад +1

      Obrigadaaaa!

  • @VeredasdeVitoria
    @VeredasdeVitoria 7 лет назад

    muito bom, amigo, seu eu estilizar pelo css pode dar problemas?
    Ps. ainda não testei pq to esperando a vontade passar. rs

  •  8 лет назад

    Muito bom, mais como faço sem a necessidade do click, quando passar o mouse e abrir?

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад +1

      +Cs Web Designer utilize o comando: OnMouseHover

    •  8 лет назад +1

      Valeu pela dica, obrigado por responder. :)

  • @rduvale
    @rduvale 9 лет назад +1

    Oi Ferreira tudo bem kra, gostei muito da sua aula, explicação bem fácil de se entender, ganhou mais 1 inscrito, mas fiquei com uma ? no ar, como faço pra mexer no tamanho da caixa cinza, consegui mexer na largura, mas na altura não vi onde faço, por gentileza se puder me ajudar agradeço.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад

      JRoberto duVale basta definir o "Height" no css. Abraços ;)

    • @rduvale
      @rduvale 9 лет назад +1

      Já consegui, mas mudei no script, tirei o window e deu certinho, um abraço e com toda certeza você ganhou mais um adepto.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад

      JRoberto duVale fico muito feliz por ter conseguido. Forte abraço. ;)

  • @MatheusFerreira-eb6tc
    @MatheusFerreira-eb6tc 9 лет назад +1

    Ei cara, parabéns pelo canal.
    Vc poderia fazer um vídeo em relação daquelas caixas de texto (formulário), que se adiciona em sites, e q envia todas as informações para algum banco de dados, e-mail talvez, não sei, ai vc upa para o servidor, pois eu não consigo fazer com q os dados escritos nas caixas por alguem chegue no meu e-mail quando upo para o servidor, vc me ajuda nessa? Desde criar as caixas, até upar para o servidor mandando as informações para um banco de dados, pf.
    Muito bom canal, parabéns.

    • @MatheusFerreira-eb6tc
      @MatheusFerreira-eb6tc 9 лет назад +1

      SHILIT FIN Se vc ler esse comentário, tem como me responder?

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад

      SHILIT FIN ajudo sim, meu amigo. Me add no skype: ferreira.studios . Vamos marcar uma reunião. Manda no inbox da fãn page para que eu possa lembrar. Abraços .;)

  • @JFINFOCELL
    @JFINFOCELL 9 лет назад +1

    Como faço para colocar um X para fechar no lugar do menu quando eu clicar para abrir.
    E Também quando o slide estiver aberto eu possa clicar em qualquer parte da pagina e ele fechar?
    Ficaria muito grato se respondesse!!

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +1

      +JFINFOCELL basta você criar uma estrutura condicional no seu javascript. Quando o menu estiver aberto (ou seja, tiver a class tal) faça isso, caso contrário faça isso.
      Ex:
      Para identificar a ação de click e exibir o "x" quando aberto:$(function() {
      $('.toggle-nav').click(function() {
      toggleNav();
      });
      });
      function toggleNav() {
      if ($('#wrapper').hasClass('show-nav')) {
      // Verifica se tem a class "show-nav" e remove ela quando o menu abrir
      $('#wrapper').removeClass('show-nav');
      } else {
      // Add a class que contém o "X" quando o menu abrir
      $('#wrapper').addClass('show-nav');
      }
      }Para fechar o menu:$(function () {
      $('.toggle-nav').click(function (e) {
      e.stopPropagation();
      toggleNav();
      });
      $('#main').click(function (e) {
      var target = $(e.target);
      if (!target.closest('#nav').length && $('#wrapper').hasClass('show-nav')) toggleNav();
      });
      });

    • @JFINFOCELL
      @JFINFOCELL 9 лет назад +1

      +Ferreira Studios ® valeu 👍 cara muito obrigado pela atenção.

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад +2

      JFINFOCELL estamos juntos meu amigo. Grande abraço. ;)

  • @alexandreloboeletric9128
    @alexandreloboeletric9128 8 лет назад

    Fiz tudo certinho quando chegou no script não deu certo!???

  • @leonardoferreira.design
    @leonardoferreira.design  9 лет назад +3

    ruclips.net/video/482PRYZmTic/видео.html