19: How to Create a Toggle Menu | Part 1 | HTML & CSS Setup | JavaScript Menu | JavaScript Tutorial

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

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

  • @rodrickngonyoku5042
    @rodrickngonyoku5042 4 года назад +7

    After Life long search, I finally understand what am doing when creating a side bar. God bless this man.

  • @aleksanderbazejczyk8133
    @aleksanderbazejczyk8133 4 года назад +3

    I'm watching this series since 2 days. After watching those short, full of knowledge videos this one just brings another excitement about what comes next and I can't wait to watch more. Thank you! You really know how to do it right.

  • @jaycelila6258
    @jaycelila6258 5 лет назад +1

    Studying abroad and working hard. I want to support you later on when I get the job but for now I will do what I can as thumbs up and subscribe. Thank you for your awesome tutorials!

  • @Veianya
    @Veianya 4 года назад +1

    I'm comfortable with HTML/CSS, so I almost didn't watch this. But you still managed to teach me some things. Thank you. :)

  • @moncere
    @moncere 3 года назад +2

    2021, You have a fantastic teaching style Dani 🚀

  • @stephenantwi2769
    @stephenantwi2769 6 лет назад +1

    Daniel we really appreciate your efforts to make us pros in programming.

  • @eufraniodiogo50
    @eufraniodiogo50 4 года назад

    Man 2018 when you published this video and still 2020 it's really helping thanks a lot dude! Now I'll go ahead through your channel to see more videos!
    Thanks one more time dude!

    • @ScoopsCk
      @ScoopsCk 2 года назад +1

      Pov: its 2022 and still helping

    • @eufraniodiogo50
      @eufraniodiogo50 2 года назад

      @@ScoopsCk True man, true.

  • @madrinsx8770
    @madrinsx8770 6 лет назад +8

    Thank you so much Daniel❤❤Love from Uganda

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

    Daniel you are the best teacher ever...

  • @VinhLe-gc8ws
    @VinhLe-gc8ws 6 лет назад +17

    Thanks for the vid mmtus! I love your teaching style, very thorough and as a dog lover! I don't get annoyed by the dog sounds, I love it cause my dog is the same way, wont leave my side LOL! Great tutorial!

  • @princemawan8152
    @princemawan8152 5 лет назад

    The best tutor on RUclips 👌

  • @silviabryan6228
    @silviabryan6228 4 года назад

    Thank you Daniel, This Javascript series is a lot easier for me to follow then the PHP series. Maybe it has todo with the fact that I've studied a bit javascript 20 years ago and I used it mostly for rollovers in static websites I've built in the past and I loved to built stuff with flash and action script. I've gotten quite frustrated when stuff didn't work on mobile phones anymore.... Times have changed so it's time for me to get back on the horse and up on the upon. You help me with what I've learnt in the past and tie it together. Yesterday, in the middle of this video 13:40 I was wondering where I did go wrong what have I overlooked because my website didn't look like yours so I rewatched the video serveral times.... Today as I rewatched it again I figured it out, I've closed the btn div tag behind the /ul . Good Morning! Fixed it ! Da Dah :-) Of course it couldn't run properly, and everything is logical now. Thanks!

  • @AndrejaWebDev
    @AndrejaWebDev Год назад +1

    Great videos. Really helping me understand a lot of new stuff. Thanks!

  • @sowminarayanansrinivasan8735
    @sowminarayanansrinivasan8735 4 года назад

    Superb teaching. Line by line explained. Thoroughly enjoyed

  • @ajimahifeanyi2784
    @ajimahifeanyi2784 4 года назад +1

    Thanks for this great Series. Also, say hi to your dog. I love his color. His sounds lightens up the tutorial moments.

  • @muramasa7537
    @muramasa7537 6 лет назад +7

    U deserve more likes n views ! I only hope u could do the tutorials regularly xD !

  • @patriciamendes7557
    @patriciamendes7557 4 года назад +1

    Your dog is not interfering in anything. He´s cute! Let him be :)

  • @georgeiulianpetre9901
    @georgeiulianpetre9901 5 лет назад +3

    Coelho's Alchemist in the background

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

    Thor on his young age teaching us mortal about javascript and his brother Loki at the background as a dog disturbing Thor. Yep I chose Daniel because he can articulate javascript very well. Thank you for this

  • @amandadelongchamp3599
    @amandadelongchamp3599 5 лет назад

    This was awesome thanks! The puppy added comical relief.

  • @fazlerabbi6198
    @fazlerabbi6198 4 года назад

    Nice . Your teaching way is good .. I like it

  • @Stoney_Eagle
    @Stoney_Eagle 6 лет назад +3

    I would love to see a custom video js that plays RUclips, Vimeo, live streams and mp4 with resume play 👊

  • @TrueFactFrenzy
    @TrueFactFrenzy 4 года назад

    Much respect and love. Thanks so much for your teaching. You are awesome!!

  • @chamling.chsmlingrai6839
    @chamling.chsmlingrai6839 3 года назад

    I'm subscribing ur channel. You taught well.

  • @GerbyWorrior
    @GerbyWorrior 5 лет назад +2

    question. if you did a (box sizing: border) box wouldn't that eliminate the padding adding to the width this way you could make .nav-sidebar 60px wide and then the 5px padding will just be within?

  • @jeanreynold4420
    @jeanreynold4420 6 лет назад +1

    great video. You made difficult topics look simple. I always confuse when it comes to style the UL and LI. iI think since the UL is the parent and the LI is the child I think you could only style the UL.

  • @wafafatima5042
    @wafafatima5042 4 года назад +1

    I recommend all the javascript learner to watch mmtuts videos. He has done a great job. Learned a lot from these tutorials.

  • @ednewcome
    @ednewcome 3 года назад

    These are excellent tutorials Dani, thank you!

  • @feigenblatteric8007
    @feigenblatteric8007 3 года назад

    You just save me. Thanks

  • @Aman519YourHost
    @Aman519YourHost 6 лет назад +1

    I always see this in templaits but it cool to know how it works

  • @bashirulagoke684
    @bashirulagoke684 5 лет назад +7

    I've downloaded an png image of a three bar toggle and, placed its folder and file name in the correct line of code. However, the image will not upload, could you offer any suggests, please?

    • @maximilanriccomini4654
      @maximilanriccomini4654 5 лет назад +1

      Same here I don't know a fix.

    • @Wolf3591701
      @Wolf3591701 5 лет назад +4

      Well, don't know if it's a problem with correct file placement or the image not showing, but with me it was image not showing. Handled it by changing height from Daniels' 100% to 60px and it showed up.
      If it's the image upload after all - check file paths (the file path is relative to the CSS file, not INDEX.HTML).

    • @steven9O21O
      @steven9O21O 5 лет назад

      Make sure - 1 no syntax errors 2 make sure your background coverage is set to 100% 3 double check your file pathing relative to the style location .

    • @thomaswaligora8470
      @thomaswaligora8470 4 года назад +2

      Had the same problem. You probably had your css file in a folder (e.g. css). If so, then the path to the image file should be: ../img/menu.png. If your css file was in the root directory (like in the movie) then the img/menu.png path is correct. The path to the image is relative to the css file.
      Wolf3591701 he explained it correctly.

    • @IIISPQRIII
      @IIISPQRIII 4 года назад +1

      @@thomaswaligora8470 This was it for me, thank you

  • @amrnashaat7063
    @amrnashaat7063 5 лет назад

    i love that kyubi behind

  • @andranikhovhannisyan3715
    @andranikhovhannisyan3715 5 лет назад +3

    16:57 i'm die when you say sheet ))) respect your work man))

  • @mrboyban
    @mrboyban 3 года назад

    Nice stuff ! Thanks

  • @lthunt2073
    @lthunt2073 4 года назад +3

    Not sure if anyone else had this issue with Chrome 83, but I had a 8mm margin on the left and right hand side of the body by default. To remove this, make sure you add "margin-left: 0;" and "margin-right: 0;" to the body tag of the CSS file.

    • @m.4459
      @m.4459 3 года назад +1

      Thank you! I was wondering why that was happening.

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

    I learnt this in my html5 class. Good times

  • @lemonpooh1764
    @lemonpooh1764 4 года назад

    nice explaining concept.thank you

  • @ecblk
    @ecblk 4 года назад

    So helpful, thank you!

  • @none1307
    @none1307 3 года назад +6

    after that moment 19:14 no one saw Daniel's dog again

  • @ahmedmudi1992
    @ahmedmudi1992 4 года назад

    Very good video

  • @dfjama
    @dfjama 5 лет назад

    Awesome video, Thank you Daniel.

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

    I love your tutorials bro . You are awesome

  • @sonnyb6536
    @sonnyb6536 6 лет назад +1

    Hey Daniel, How are you? I am doing exactly what you said but my line-height 60px pushes it way down. The hamburger menu is pushed like a margin a couple of pixels to the left?

    • @richp973
      @richp973 4 года назад

      Same with me. To solve this go into style.css and inside .nav-main add left: 0px;

  • @mr.zeonilyt4599
    @mr.zeonilyt4599 6 лет назад +1

    Ogh my broooo you look good in new look 😍😘😘😘

  • @dyg.elfarizzaabgbadwie2543
    @dyg.elfarizzaabgbadwie2543 6 лет назад

    Hello sir, I seem to understand more by learning through your tutorial videos. can you please make a videos tutorial for google maps javascript api too? a lot thanks sir!!

  • @woppysama4901
    @woppysama4901 5 лет назад

    helped me a lot!
    Thanks and congrats for gaining a new subsciber :)!!

  • @ianchan2624
    @ianchan2624 5 лет назад

    Thanks dude!

  • @Human_Evolution-
    @Human_Evolution- 3 года назад

    Thanks Elon.

  • @KahraSolo
    @KahraSolo 5 лет назад

    Thanks for this tutorial. It´s amazing.

  • @kaars2002
    @kaars2002 2 года назад

    Tnx dude !

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

    New subs here. Great videos man, keep it up.! Yiu deserve more subs

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

    Great tutorial, thank you

  • @user-ma1so2ns12on
    @user-ma1so2ns12on 6 лет назад +1

    when Do you uploading about part2 ? your tutorial is Awsome!

  • @parkerbauman2862
    @parkerbauman2862 6 лет назад +1

    My menu img is not popping up :/ I am pretty sure i linked it right. I'm not getting any errors it's just not showing over the orange, please help.

  • @carterevans3949
    @carterevans3949 3 года назад

    For the image my console on the chrome tools brings up a ERR_FILE_NOT_FOUND. Under the net. It said it was a provisional headers are shown error. I am not sure as to what I did wrong.

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

    You are freaking awesome.

  • @MilanB
    @MilanB 6 лет назад +4

    Will you do a VueJs tutorials? I've heard it it's a very powerful framework.

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

    That's awesome!!!

  • @DrAhmed-fw8tn
    @DrAhmed-fw8tn 4 года назад

    i am having problem with the overflow of my button how should i fix it?please help

  • @gligorboykov4987
    @gligorboykov4987 4 года назад

    thanks...

  • @XOXO-mr2lb
    @XOXO-mr2lb 5 лет назад +1

    I had to change the width of my .nav-side-bar from 50px to 40px because my sidebar was not lining up with my hamburger icon image i downloaded.

  • @digitalspark-team
    @digitalspark-team 6 лет назад

    Thank you

  • @shinevisionsv
    @shinevisionsv 6 лет назад +6

    Nice Dog :P

  • @tanny_edits
    @tanny_edits 4 года назад

    Hwllo how to diaplay cintent on the side when i click the side bar menu?

  • @turksnhbz
    @turksnhbz 5 лет назад

    hey Daniel how can I make a toggle menu and have its display set to none on window click?

  • @harbilito4910
    @harbilito4910 6 лет назад +1

    can i do the animation using bootsrap or jquery?

  • @felipefreitas5861
    @felipefreitas5861 5 лет назад +14

    He is a kid of Elon Musk?

    • @EM-wd8wq
      @EM-wd8wq 4 года назад +3

      He even moves his hands like Elon.
      Next he's going to do a tut on motors

  • @robertefremov9380
    @robertefremov9380 3 года назад

    interesting choice of colors 😂

    • @Dani_Krossing
      @Dani_Krossing  3 года назад +1

      😂🤣 ooohhh you PERVERT!!! 😂

  • @Racools
    @Racools 4 года назад

    i did pretty much the entire html and Css tutorial playlist and i never really got an understanding of what z-index is supposed to do in depth

  • @meshoDev
    @meshoDev 3 года назад

    You can make it with 2 lines jquery :
    $('thenameof menu').click (function (){
    $('button').toggle(100)
    })
    Notes:
    Must be the position:absolute
    Goodluck 😄

  • @Leah-sf3zv
    @Leah-sf3zv 3 года назад

    When you create a toggle, how do you make something appear in just one section?

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

    Use CTRL+SHIFT+D for copy one or multiple lines ;)

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

      And very nice tutorials ♥

  • @atengamnesia3142
    @atengamnesia3142 3 года назад

    wait-- do I need to separate the reset style save it in another css file name before linking it or?

    • @Dani_Krossing
      @Dani_Krossing  3 года назад

      It’s optional. Separating them just helps with cleaning up your CSS files, and structures it a bit neater.

  • @eftiprwtopapadakis9310
    @eftiprwtopapadakis9310 4 года назад

    What about the use of CSS grid Layout instead of Flexbox?

  • @Jafste
    @Jafste 5 лет назад +1

    I only could center it with line-heigh:30px; so its half of the 60px

    • @Snowblinded
      @Snowblinded 3 года назад

      For anyone else having this issue, I had the exact same problem, and for me it's because I hadn't bothered to include the reset stylesheet when I was doing the exercise myself. Once I added that the line-height worked fine at 60px. Still have no idea why though.

  • @usman19021
    @usman19021 2 года назад

    It is annoying how every screen has its own different display styling that messes with the styling that you are doing on your device . IDK another thing is that even though coding is same different environment IDE allows different codes to run for example copy with him on 1:1 my second ul of side bar is list is giving space on left which gets absolutely annoying when trying to fix and later after a miracle when it does end up working it usually turn out to be the same code that originally we changed.

  • @Zechey
    @Zechey 5 лет назад

    For some reason when I create the main nav its not positioned at the top of the page, there is like a 5px space in between the top and the left side. Dunno if it's some sort of a bug, I've double checked that everything is the same as it is in this video and it still exists.

    • @hakonpettersen3721
      @hakonpettersen3721 5 лет назад

      I got the exact same problem. Have you found a solution?

    • @Zechey
      @Zechey 5 лет назад

      @@hakonpettersen3721 I found the solution. I think it's browser related or something. I just put margin and padding to 0 for html and body in the CSS file and problem was fixed.

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

    If i use and mixing your javascript tutorials,i can create a very advanced webpage,with function like content slider(using your image slider tutorial example).Im thinking right?

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

      You are thinking right. And if you also get into simple PHP, you can also create a login and such :D

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

      Thanx but I'm beyond that.I build own cms for real estate selling,yesterday i got my pay from my client. ;)

    • @xampzie4995
      @xampzie4995 5 лет назад

      @@Anod26 damn how is it going... I just got into website developing and one of my classmates has parents who run a business and wants us to create a site for it so im trying to go beyond what are class is teaching us and so far we just got to using other css templates mainly w3.css so i want to learn more so i can do this as a business thing or a side job

  • @VicMcFly111
    @VicMcFly111 5 лет назад

    lol why do you have edge and task view in taskbar?? :DD

  • @hiredshinobe7713
    @hiredshinobe7713 4 года назад

    Dani, you make me love JavaScript!

  • @nemanjasekulic9716
    @nemanjasekulic9716 5 лет назад

    Dont work to me. I looked 10 times. Code is ok butit don't won't to open sidebar menu when I pres the button. :/

  • @futuespaceguy
    @futuespaceguy 6 лет назад +1

    You know it is possible to talk while a dog is moving right?

  • @Wutupsonn
    @Wutupsonn 4 года назад +1

    Thanks Elon Musk!

  • @nav-ks6qj
    @nav-ks6qj 3 года назад

    nav022001
    1 second ago
    Hello Dani. having trouble touching link and white flickering happens as changing to next html page any suggestion

  • @loosabway3400
    @loosabway3400 3 года назад

    A diagram of the layout of the webpage would have been helpful here.
    I am speaking as someone who is making a living out of using your RUclips vids.
    Step up to the bar - it's not too far for ou.

  • @digitalspark-team
    @digitalspark-team 6 лет назад

    how to make product slider in css and javascript

  • @MrMarkgyuro
    @MrMarkgyuro 5 лет назад

    cheers for the Dog!

  • @wdwdHenry9022
    @wdwdHenry9022 4 года назад

    can you paste that css somewhere?

    • @Dani_Krossing
      @Dani_Krossing  4 года назад

      It should be available on my Patreon

  • @romarioballoon7319
    @romarioballoon7319 4 года назад

    image is not showing up?

  • @patrickbourne3819
    @patrickbourne3819 3 года назад

    Anyone else having trouble with the flex?

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

    sir, you should style the ui of calculator or any other tutorial, because even if the tutorial is good, but terrible ui downgrade the work you put...

  • @abera_fekede
    @abera_fekede 5 лет назад

    cool

  • @anirudhgarg759
    @anirudhgarg759 6 лет назад +1

    when is part 2 releasing

  • @karenw9366
    @karenw9366 5 лет назад

    this hamburger menu is not showing up and i've checked everything! Help.

  • @NERO-ez1mn
    @NERO-ez1mn 6 лет назад

    what if i used a font & put in a folder? can you give the code?

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

      In my HTML playlist I show how to do this. Go check it out :)

    • @NERO-ez1mn
      @NERO-ez1mn 6 лет назад

      o there is a video im still on the part 2 .js toggle, senpai can you make a SLOT MACHINE in JAVA SCRIPT? not just posting a random but with an animation like we usually see. or is it not POSSIBLE in a pure JS?

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

    Does your dog code too ? 🐕

  • @puhuhehe
    @puhuhehe 4 года назад

    19:15
    .dog {
    display : none;
    }

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

    Where's part two?

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

    are you an instructor on udemy. if yes give some links to your courses

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

      Nope I only appear on RUclips :)

    • @codingtime3803
      @codingtime3803 4 года назад

      @@Dani_Krossing you should be on udemy. You are a great tutor!!

  • @shreyasnagabhushan752
    @shreyasnagabhushan752 4 года назад

    i am not able to style the span text here is my code