How to do Left Side Menu | Responsive | Html5 - Css3 - Jquery

Поділитися
Вставка
  • Опубліковано 9 лис 2024
  • Learn how to create this beautiful Left Side Menu Reponsive simply with Html5, Css3 and Jquery, so simple, in a fun and well explained way.
    What you will learn throughout this tutorial:
    ♦ How to create a menu.
    ♦ Add icons to your website.
    ♦ You will learn positioning of objects.
    ♦ Learn how to make your website responsive.
    ♦ Add transitions to your menu.
    ♦ Among many other things.
    All this you will learn in a very easy, fun and well explained.
    This video will help you put your knowledge into practice in what is web design. Also this menu will always be hidden, but when you click the menu icon as it will appear, so the user will feel super comfortable. I hope you like it!
    Requirements for this tutorial:
    ♦ Knowing the basics of HTML5
    ♦ Master the structure of CSS3
    ♦ Know a little Jquery (but I'll explain everything)
    ♦ The rest I will explain very well.
    These requirements are suitable for all public, whether you are new or old in what is web design, Do not miss it! - SUBSCRIBE!
    Do not forget to share, so that others benefit from the video in the same way that you have benefited, greetings.
    ____________
    ● Subscribe to my Channel:
    Https://goo.gl/Y5liMk
    ● My website:
    Http://magtimus.com
    ● Tutorial resources here:
    Https://goo.gl/P6wBPF
    ● WhatsApp Group
    Https://goo.gl/9jtwT6
    ____________
    ▼ SOCIAL NETWORKS ▼
    ♦ Facebook:
    / themagtimus
    ♦ Instagram:
    / magtimus
    ♦ Twitter:
    / magtimus
    ____________
    ▼ Friends Channels Here ▼
    ♦ CodyTron
    Https://goo.gl/qu6gXX
    ♦ Forming the Web
    Https://goo.gl/N3Cr8x
    ♦ Lenin Gonzales
    Https://goo.gl/iEocF7

КОМЕНТАРІ • 56

  • @GlbenGgets
    @GlbenGgets 3 роки тому

    Me guta como hablas y como eplicas, felicidade sos grande

  • @eliashectorrojas1469
    @eliashectorrojas1469 4 роки тому

    Me gusta mucho tus videos

  • @adikto.o
    @adikto.o 4 роки тому

    Hola amigo, y para que fuera al revés? Que la página tenga el menú oculto y uno tenga que apretar en el spam show para mostrar el menú? De ante mano, gracias

  • @WilliamHerreramlm
    @WilliamHerreramlm 3 роки тому

    El header no sale arriba como el en video sino en la mitad, probé con el código que dejo el Facebook y también pasa lo mismo

  • @devstack9228
    @devstack9228 6 років тому

    gracias amigo enseñas bien igual a #CodyTron y algunas buenas personas que ofrecen un poquito de sus saberes para que otros a prendamos otra ves muchas gracias y animo para que sigas subiendo mas vídeos de desarrollo web la vida te recompensara por las cosas buenas que haces , por mi y por muchas personas mas...... éxitos en tu vida amigos que todo te valla bien .

  • @jorgenal2005
    @jorgenal2005 6 років тому +1

    excelente tutorial parcero, saludos desde Medellín

  • @fernandoquesadam.8026
    @fernandoquesadam.8026 7 років тому

    Muy bueno, me ha ayudado mucho, una consulta a que se debe que en chrome veo en lugar de los iconos el e82d por ejemplo, es decir no veo el icono..

  • @WilliamHerreramlm
    @WilliamHerreramlm 3 роки тому

    Use que código pero no funciona tal como aparece en el video, y esta tal cual el video

  • @shingameryt47
    @shingameryt47 4 роки тому +1

    bro que extension ocupas para dar ese efecto al momento de borrar letras?

    • @VisualAvalon
      @VisualAvalon  4 роки тому

      Esa extensión se llama: Brackets Power Mode. Saludos

    • @shingameryt47
      @shingameryt47 4 роки тому

      @@VisualAvalon ok gracias

  • @angeldm.4905
    @angeldm.4905 7 років тому +1

    No dejes de subir videos, me ayudas mucho
    Bueno videos xD

    • @VisualAvalon
      @VisualAvalon  7 років тому

      No, no dejare de subir, a eso me dedico amigo.
      Saludos

    • @angeldm.4905
      @angeldm.4905 7 років тому +1

      Magtimus jaja Gracias :3

    • @VisualAvalon
      @VisualAvalon  7 років тому

      De nada amigo.

  • @Reysaturn723
    @Reysaturn723 4 роки тому

    Quiero que el menu vertical tenga su scroll. Como hago? Lo demas que quede igual

  • @RubenGonzalez-nk9cn
    @RubenGonzalez-nk9cn 7 років тому +3

    Fantástico amigo!!

  • @mariimiiau4798
    @mariimiiau4798 5 років тому

    hola muchas gracias por tu tutorial pero tengo una duda como puedo hacerle para poner submenus..?

  • @petermunoz1221
    @petermunoz1221 6 років тому

    Hola una pregunta si quiero ponerle un formulario php como le haria disculpa??

  • @eloscmao6945
    @eloscmao6945 7 років тому +1

    Excelente explicación, gracias por compartir el conocimiento

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Gracias amigo.
      Saludos desde República Dominicana

  • @gsilver07
    @gsilver07 6 років тому

    Hola me podrias ayudarcasi todo me salio bien solo que el boton del menu no me funciona no oculta el menu.

  • @jorgediaz5170
    @jorgediaz5170 6 років тому

    Gran video , una pregunta como hago el menu pegadizo para que cuando bajo se vea

  • @CodyTron
    @CodyTron 7 років тому +3

    Está bonito el efecto Magti. Bien ahí mi amigo 👍🏻

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Si, esta bonito, gracias amigo.
      Saludos compañero.

  • @erickaulloa6273
    @erickaulloa6273 6 років тому

    Hola, me encanto este menú pero tengo una duda. Cómo puedo hacer para que el h4 de los icons se quede fijo cuando este activo?

  • @enmanuelparaguatey4807
    @enmanuelparaguatey4807 4 роки тому

    donde esta el código fuente amigo ?

  • @duko_6
    @duko_6 6 років тому

    Bro gracias me has ayudado mucho me podrias explicar como poner pegajoso esa parte del menu? es q se ve un poco rara esa parte negra porfa bro

  • @steveengomez6394
    @steveengomez6394 7 років тому +1

    hola gran aporte es un gran menú ! y me gustaría darte un pequeño consejo para que lo pongas en practica en un futuro. y es que cunado estés usando JQuery para no utilizar removeClass y addClass puedes utilizar ToggleClass el cual te evita mucho problema

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Genial amigo, gracias por el aporte, ya lo sabia de todos modos, lo que pasa es que al utilizar toggleClass pues me afectaria para hacer el menu responsive.
      saludos de antemano desde República Dominicana.

  • @raenz9399
    @raenz9399 4 роки тому

    ¿Que rayos tiene el editor de código?

  • @rodrigoleitedesiqueira499
    @rodrigoleitedesiqueira499 5 років тому +2

    Layout muito legal..
    Quanto a criação da variável show no arquivo Javascript, é totalmente desnecessário.
    Bastava usar a função toggleClass do JQuery.
    Essa função adiciona uma determinada classe, se ela não existir em um elemento específico e remove, caso exista.

  • @williammoreno9056
    @williammoreno9056 6 років тому

    le falto dejar el link para descargar los iconos

  • @raulchavez6990
    @raulchavez6990 6 років тому

    y para crear una pagina hijo que use la plantilla padre como lo hago??

  • @davidponc
    @davidponc 7 років тому +2

    Muy buen video , pero tengo una duda fuera del tutorial jeje , veo que en brackets tienes un efecto a la hora de escribir , queria ver si me puedes decir el nombre del plugin o como implementarlo , me gusto como se ve :D

    • @VisualAvalon
      @VisualAvalon  7 років тому +1

      david ponce en mi canal yo tengo un tutorial donde explico las extensiones que yo utilizo en brackets.
      Aqui esta el link:
      ua-cam.com/video/-dXIhk_Zk1o/v-deo.html

    • @davidponc
      @davidponc 7 років тому +1

      o muchas gracias :D

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Y bueno el plugin se llama: "Brackets Power Mode"

  • @kevin.carrascoinkatek8870
    @kevin.carrascoinkatek8870 5 років тому

    buenas buen tutorial, pero como hago un submenu con esto?

  • @miltonwlan
    @miltonwlan 7 років тому +1

    Hola, quisiera felicitarte por el gran trabajo que realizas al subir vídeos, son de mucha ayuda. quisiera preguntarte, que herramienta usas para extraer los colores de otras paginas y como implementarla en sublime text y visial studio code. Saludos desde chile y gracias

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Hola amigo, espero que este bien. Aquí te dejare el link del selector de colores.😀
      LINK SELECTOR COLOR: annystudio.com/software/colorpicker/
      Saludos desde República Dominicana

    • @miltonwlan
      @miltonwlan 7 років тому +1

      Magtimus muchísimas gracias, seguiré viendo tus videos.

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Genial amigo. Gracias, espero te gusten.

  • @jaimefirosanchez9696
    @jaimefirosanchez9696 7 років тому +1

    Hoola muy buen video solo me queda una duda como puedo cambiar los iconos??

    • @VisualAvalon
      @VisualAvalon  7 років тому

      Hola amigo, gracias.
      Y pues con respeto a lo de los iconos, puedes entrar en la carpeta iconos y abrir el archido que se llama "demo" y ahi veras las clases de cada icono, y asi seleccionas el icono que mas te guste.
      Espero que te sirva.
      Saludos desde República Dominicana

  • @robertosaldi2009
    @robertosaldi2009 7 років тому

    No logro hacer que el botón de menú trabaje. Te mandé priv. Abrazo.

    • @gsilver07
      @gsilver07 6 років тому

      pudiste hacer que trabaje

  • @djharry2180
    @djharry2180 7 років тому

    Me gusto! gracias! me gustaria aprender este estilo de Menu que usa este medio: www.midiario.com/ al darle clic en las secciones se abre la imagen y parte de la noticia y salen 2 paginas mas al lado! me gustaria aprender hacer este estilo de menu! agradecido

  • @carlosacz
    @carlosacz 7 років тому +2

    este tipo de tutoriales ayudan mucho a la hora de implementar un diseño bonito y mas para mi que solo se programar pero lo diseños me quedan horribles.
    saludos.

  • @manuelrm5465
    @manuelrm5465 5 років тому +2

    Bro, tu eres dominicano ?

    • @VisualAvalon
      @VisualAvalon  5 років тому

      Si, soy dominicano, saludos

    • @manuelrm5465
      @manuelrm5465 5 років тому

      @@VisualAvalon Igual yo bro, saludos.

  • @RubenGonzalez-nk9cn
    @RubenGonzalez-nk9cn 7 років тому +1

    Amigo podrías un tutorial de como publicar artículos con PHP? Si se pudiese asín: imgur.com/a/SSdx0

    • @VisualAvalon
      @VisualAvalon  7 років тому +2

      Por ahora no subiré vídeos de BackEnd, solo estoy en puro FrontEnd, Luego entro a BackEnd