Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ธ.ค. 2024

ความคิดเห็น • 874

  • @OnlineTutorialsYT
    @OnlineTutorialsYT  ปีที่แล้ว +18

    Revolutionize projects with our advanced source code. Elevate innovation, accelerate development, and gain a competitive edge. Your key to success is here. Transform ideas into reality now.
    Get now more than 1000+ source code just by clicking on this link : www.patreon.com/onlinetutorials
    Here you will find each and every Source Code is Unique.

  • @robertuszrobi
    @robertuszrobi 2 ปีที่แล้ว +205

    I downloaded a basic full stack course. Started off with HTML, then CSS, then Javascript. I am about to start React. I randomly came across this video, and the fact that I understood what was going on is making me so excited about learning to code. Thanks for the motivation. This is a very neat design.

    • @dennisbarzanoff9025
      @dennisbarzanoff9025 2 ปีที่แล้ว +8

      Bra i don wanna kill ur dreams, but coding not that exciting

    • @sagarshabadi3375
      @sagarshabadi3375 2 ปีที่แล้ว +7

      I also started Learning abt Web development
      Now am learning CSS , it's increases Curiosity
      But After learning Part , whn we go outside to find a Job , The work will be difficult ..Let's hope everyone learns New technology & get Jobs ..

    • @aryanKapur.
      @aryanKapur. 2 ปีที่แล้ว +18

      @@dennisbarzanoff9025 nah bruh coding is exciting as hell

    • @CloudyyYT
      @CloudyyYT 2 ปีที่แล้ว +6

      @@dennisbarzanoff9025 i've been coding for like a year and a half and i still get excited

    • @unjakx
      @unjakx 2 ปีที่แล้ว +6

      @@dennisbarzanoff9025 Depends on the person who is coding

  • @WrokkerGaming
    @WrokkerGaming 2 ปีที่แล้ว +54

    I never thought I'd understand a non-speech tutorial so well, yet here I am confident I can recreate this AND it developed my understanding of CSS. Thank you, this has been amazing. And the sound track...cosy af.

  • @MRMOTOFOTO
    @MRMOTOFOTO 3 ปีที่แล้ว +873

    The fact that I think I can do this without watching the video is giving me hope.

    • @AanAntheroNo1
      @AanAntheroNo1 3 ปีที่แล้ว +99

      Iam watching itnand can't do it there is no hope for me

    • @brxndxnpx
      @brxndxnpx 3 ปีที่แล้ว +21

      Haha I thought the same thing. Going to give it a try before finishing the video

    • @crimsonwolf4490
      @crimsonwolf4490 3 ปีที่แล้ว +42

      @@brxndxnpx i mean only thing u need to do this is watching others do the similar things and have experience. After some time u will be able to do it urself

    • @4xHitler
      @4xHitler 3 ปีที่แล้ว +7

      same here. I looked up css animations just an hour before this.

    • @crispydonut7404
      @crispydonut7404 3 ปีที่แล้ว +1

      Yes same

  • @ethlny6093
    @ethlny6093 3 ปีที่แล้ว +65

    The fact that this guy helped one of my senior get his degree 2 years ago and that thanks to him I got a perfect grade this year is one of the most amazing fact I have

    • @Asyrafcruz
      @Asyrafcruz 2 ปีที่แล้ว

      senior getting degree? yes our senior developer also are looking at this as reference.
      its okay later in your career we will search youtube also

  • @LordKosmux
    @LordKosmux 3 ปีที่แล้ว +231

    This one surprised me! Very clean, modern and it's truly magic to see. Keep the good job, you're amazing!

  • @dunai2012
    @dunai2012 2 ปีที่แล้ว +28

    I'm a beginner of CSS. For practice purpose I just followed the demo step by step. Due to some dimension mismatch and some features I didn't get clue I failed the first time but after the recalculation of the proportion of dimension the second try was a success. Thank you so much for this amazing video. I'll carefully study this code after this learning by doing process.

    • @quranislife5014
      @quranislife5014 2 ปีที่แล้ว

      Also me I'm beginner

    • @yassine-sa
      @yassine-sa 2 ปีที่แล้ว +3

      Advice: I guess as a beginner, it's better to focus on learning other concepts like flexbox and CSS grid, they are practically more important, this kind of vids gives you tricks to achieve fancy looking stuff, which is mostly not what you need to learn to make as a beginner, good luck :)

    • @alhlsmailayusuff1133
      @alhlsmailayusuff1133 ปีที่แล้ว +1

      I'm not getting it I followed all the explanation in the video but the icon are not displaying, please I need help.

  • @FranksCreativeCorner
    @FranksCreativeCorner 8 หลายเดือนก่อน

    I didn't even know you could do all this with almost just CSS! This is very inspiring, thank you!

  • @yassine-sa
    @yassine-sa 2 ปีที่แล้ว +14

    the usage of the border on the indicator instead of an after or a before( + z-index so that it comes behind) is genius, only this way you can leave the before and after tags unused to use them to round the sides. Apart from that, the box shadow trick is what I missed the most, awesome content, keep going.

  • @watidev
    @watidev 3 ปีที่แล้ว +22

    it seems like its realy simple and i can tell you that showing people hard things and turn it like its easy is a great skill !!!
    It gave me the will to do the same thing but i know nothing about css XD
    Thats a great work

    • @watidev
      @watidev 2 ปีที่แล้ว

      I come back after 11 months, I UNDERSTAND EVERYTHING !!! and that work is realllyyy good !

  • @JustinDAMusic
    @JustinDAMusic 2 ปีที่แล้ว +22

    To make it transition without clicking, in the addEventListener type 'mouseover' instead of 'click' and the transition will happen when you pass over the icon with the mouse.

    • @SmokinMesa
      @SmokinMesa 2 ปีที่แล้ว +2

      This is a mobile style UI....

    • @MrBrainTucker1079
      @MrBrainTucker1079 2 ปีที่แล้ว +1

      True, but the tip was good regardless imo

    • @godnyx117
      @godnyx117 ปีที่แล้ว

      @@SmokinMesa Cool idea non the less!

    • @codewithsehran
      @codewithsehran 8 หลายเดือนก่อน

      ​@@SmokinMesathat's not important

  • @RaveKev
    @RaveKev 2 ปีที่แล้ว +2

    That border-radius and box-shadow was brilliant! thx

  • @edenmaimon6983
    @edenmaimon6983 2 ปีที่แล้ว +3

    I just started learning full stack web dev and it really impressed me.
    To think that I will soon learn to make such a menu leaves me even more curious.
    Most of the video I realized, up to the moment of js, waiting for it impatiently!
    Looks great I really liked!

  • @artemijeka
    @artemijeka 3 ปีที่แล้ว +3

    Спасибо!

  • @NapaleonBonaparte-r2s
    @NapaleonBonaparte-r2s 8 หลายเดือนก่อน

    Wow that was amazing to me. I am beginner at HTML and CSS. That piece of art gave me big motivation to continue.

  • @DariiaR
    @DariiaR 2 ปีที่แล้ว +2

    great concept, but in is not valid, other html and css structure needed

  • @HarryEdwards-zk6ok
    @HarryEdwards-zk6ok 7 หลายเดือนก่อน

    Bro !!!!!!!!!!!!!! You are so genius ! All of your designs are mind-blowing.

  • @leoffleal
    @leoffleal 3 ปีที่แล้ว +13

    It is a very clever technique! Congrats! I'd just advice against putting a div tag as a li sibling inside the ul. For semantic purposes, It would be more recommended using the nav tag as the container of the navigation block, and use appropriate elements for the items (links or buttons) keeping the div as the active marker.

  • @ed1nh0
    @ed1nh0 3 ปีที่แล้ว +160

    Clever! I have to say, you're very creative! The way you do things are straight to the point, but using all those magic numbers can lead newbies to a no-turning-back nightmare! Be careful with best practices, don't use universal selector as you do. Consider this a constructive feedback of your amazing job. I do like to watch all you work and tutorials. Keep it up! 👍🏼

    • @cryptocheech
      @cryptocheech 3 ปีที่แล้ว +3

      Sign up to the course and you won't be a newbie.

    • @ed1nh0
      @ed1nh0 3 ปีที่แล้ว +2

      @@cryptocheech well noticed.

    • @CaptainShanko
      @CaptainShanko 2 ปีที่แล้ว

      Could you link a vid showing best practices plz? Asking for a friend who is a total noob.

    • @ed1nh0
      @ed1nh0 2 ปีที่แล้ว

      @@CaptainShanko I think it's not quite right doing that on someone's channel, sorry about that.

  • @jankrupinski1162
    @jankrupinski1162 2 ปีที่แล้ว +3

    Incredible. As a huge fan of pseudoelements I love this video. Good job. Awesome.

  • @BigBennyO
    @BigBennyO 3 ปีที่แล้ว +2

    Shifu has done it again. Respect!!!

  • @SamerLOLOfficial
    @SamerLOLOfficial 3 ปีที่แล้ว +2

    I would rate it 10/10, excellent design and color picking.

  • @manuelquiero
    @manuelquiero 2 ปีที่แล้ว +1

    This is why I still prefer designing from scratch. This way will give you full control of your web design and still retain native, clean codes compared to using libraries that slows down the render of the page. Of course there are times that libraries like bootstrap are useful

  • @bisaanimations
    @bisaanimations 8 หลายเดือนก่อน

    I'm not one for these types of tutorials (I prefer someone talking me through it) but I absolutely loved this.....thank you for creating and keep up the great work.....will go and check out your other tutorials now.

  • @sxmourai6897
    @sxmourai6897 3 ปีที่แล้ว +37

    Amazing tutorial !
    You can even add a little
    filter: hue-rotate(60deg);
    and add 60deg for every element of indicator like this :
    .navi ul li:nth-child(1).active ~ .indicator{
    transform: translateX(calc(70px * 0));
    filter: hue-rotate(60deg);
    }
    .navi ul li:nth-child(2).active ~ .indicator{
    transform: translateX(calc(70px * 1));
    filter: hue-rotate(120deg);
    }
    and it's looking amazing

    • @jessesandvik4458
      @jessesandvik4458 3 ปีที่แล้ว

      I removed the original background color, and changed the background color for each child. Same functionality

    • @smz702
      @smz702 3 ปีที่แล้ว +5

      .navigation ul li:nth-child(1).active ~ .indicator {
      transform: translateX(calc(70px * 0));
      filter: hue-rotate(calc(60deg * 0));
      }
      .navigation ul li:nth-child(2).active ~ .indicator {
      transform: translateX(calc(70px * 1));
      filter: hue-rotate(calc(60deg * 1));
      }
      .navigation ul li:nth-child(3).active ~ .indicator {
      transform: translateX(calc(70px * 2));
      filter: hue-rotate(calc(60deg * 2));
      }
      .navigation ul li:nth-child(4).active ~ .indicator {
      transform: translateX(calc(70px * 3));
      filter: hue-rotate(calc(60deg * 3));
      }
      .navigation ul li:nth-child(5).active ~ .indicator {
      transform: translateX(calc(70px * 4));
      filter: hue-rotate(calc(60deg * 4));
      }

    • @EagleGiggles
      @EagleGiggles 3 ปีที่แล้ว +1

      @@smz702 that's better

    • @havefun5519
      @havefun5519 3 ปีที่แล้ว +1

      @@smz702 Like the hue-rotate() idea

    • @Adventures07
      @Adventures07 2 ปีที่แล้ว

      @@jessesandvik4458 Is there anyway I can see your source code? Mine is not working.

  • @GuillaumeGagnaire
    @GuillaumeGagnaire 3 ปีที่แล้ว +1

    I was hoping SVG clips, and ... It's low tech haha
    Buuuut it's working. Not with transparent background, but it's working :-) Good job

  • @viallymboma9874
    @viallymboma9874 3 ปีที่แล้ว +5

    Damn this guy is awesome...always bring a mind new blowing impressive creative UI design

  • @jessesandvik4458
    @jessesandvik4458 3 ปีที่แล้ว +8

    Did a little React.js conversion, had the color of the bubble change depending on active link, with the effect still being applied after page refresh as well. Awesome navbar, thanks for sharing!

    • @suryapratap1159
      @suryapratap1159 3 ปีที่แล้ว +8

      could you please share a sandbox or pen?

  • @vedanshverma8626
    @vedanshverma8626 ปีที่แล้ว

    I see in figma I thought tht i never design this but u mske me confident ..... intelligent bruh😊

  • @TheGAMERBoii
    @TheGAMERBoii 3 ปีที่แล้ว

    im barely learning css and html. this guy made this in 14 mins and i can barely get a navigation to look properly in 3 hours... this was enjoyable to watch though.

  • @hadiozturk
    @hadiozturk 3 ปีที่แล้ว

    As a person who is really new at programming i have really excited that. Keep it up bro you give us inspiration. Nice work

  • @nextlevelcoding5834
    @nextlevelcoding5834 3 ปีที่แล้ว +3

    wow... Always inspired from you to do Something New ... Like special 😊😊

  • @whateverbefore
    @whateverbefore 2 ปีที่แล้ว +2

    lol - I'd never put that much effort into CSS. But this is just really great!

  • @wahyudifams8696
    @wahyudifams8696 2 ปีที่แล้ว

    this guy is a model who never leaves online classes at all

  • @kalpeshp1234
    @kalpeshp1234 3 ปีที่แล้ว +1

    This video needs an deep explanation to understand how it is working other then that video is crazy 🤩

  • @induwarathisarindu5856
    @induwarathisarindu5856 2 ปีที่แล้ว

    After some times watching these tutorials I am now able to create my very own website thank you for your help very much

  • @JonnakutiKiranBabuBVCE
    @JonnakutiKiranBabuBVCE 7 หลายเดือนก่อน

    Literally Shocked bro Amazing 👌👌👌👌

  • @christophervradis7285
    @christophervradis7285 3 ปีที่แล้ว

    im addicted to your chanel with this video

  • @ninguern7693
    @ninguern7693 2 ปีที่แล้ว +6

    Unfortunately this will not look good if you have stuff in the back of it cuz it's not transparent, just has the same background color, but once I did this same effect using svg, it was really simple and worked really good. I used Figma to make the shape, and then just changed the position of some of the points, if you do it write, css can transition it.

    • @servicemanager1816
      @servicemanager1816 2 ปีที่แล้ว

      Trying to do this now, bit of a headache lol

  • @dthevenin
    @dthevenin 3 ปีที่แล้ว +17

    Nice;
    I did not try but I think you could manage the UI state (and get rid of the JS) by using 'input checkbox'. Maybe worth to try :-)

    • @faraknights
      @faraknights 2 ปีที่แล้ว

      with input radio it will be better

    • @furkanyildirim8380
      @furkanyildirim8380 2 ปีที่แล้ว

      Have you tried the way that you suggested to see if it works?

    • @dthevenin
      @dthevenin 2 ปีที่แล้ว

      @@furkanyildirim8380 I did not try for the example in this video, but I did implement that solution several times.
      You can find some code example on Internet.
      Basically you need to:
      - deactivate the default style of the Checkbox or Radio button
      - create a CSS based on the state of the Input

  • @hangoutmusic2566
    @hangoutmusic2566 2 ปีที่แล้ว +1

    You are efficient coder with out any error.

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 ปีที่แล้ว +3

    Always deliver best videos 😃

  • @daleryanaldover6545
    @daleryanaldover6545 3 ปีที่แล้ว +32

    For a much more responsive approach try using rem units and avoid using px as possible. Also don't forget to handle focus styles with css, this way you can have indicator when navigating using keyboard.

    • @motivasibelajar5746
      @motivasibelajar5746 3 ปีที่แล้ว

      please, give me example

    • @chimini_me7220
      @chimini_me7220 3 ปีที่แล้ว

      is there an explanation to why rem units are more responsive? Only now that you mentioned i remembered that most examples of code I've seen from experienced people use rem

    • @DigitalMonsters
      @DigitalMonsters 3 ปีที่แล้ว

      REM is not more responsive, now that I think about it (without googling it) im pretty sure that 'R' in Rem will mean "Root" since it's just the "Root" EM, EM is a relative unit to the first ancestor with a non EM font size.
      So if everything on your whole site is sized with EM it will be relative to the browsers default size (16px, or 1 rem) a rem is just equal to the brwosers default font size.
      So after you've sized everything with em, you can just go to whichever parent container you need to and set font-size: X rem; and everything else will scale appropriately.

    • @daleryanaldover6545
      @daleryanaldover6545 3 ปีที่แล้ว

      @@DigitalMonsters responsive design mainly tackles website layout on different screens issue. But then there are many things that are seeping their way into the responsive design criteria such as user preferences. It is a UX thing and yet some of those preferences can be handled by CSS alone, for example having a dark layout for the website or reduced-motion. Going back to using rem, it just gives developers another method of responsive design. A responsive design that is not based on the device window but the user's preference

    • @Semicorpus
      @Semicorpus 3 ปีที่แล้ว

      Rem is the best maintainable solution, easier to manage in large projects, great in SASS, and more user friendly on the client side too. If you don’t get it now you will with experience

  • @codingcrush2.0
    @codingcrush2.0 3 ปีที่แล้ว

    You're one of the best youtuber that I follow and I have a good level today thanks to your videos

  • @razorjhon2622
    @razorjhon2622 3 ปีที่แล้ว

    i liked the video before i watch , you are amazing man ♥

  • @kingsleyeshun_
    @kingsleyeshun_ 2 ปีที่แล้ว

    OH MY GOD . You're always blowing my mind with such awesome ideas.. Thanks very much bro.

  • @daironperezfrias7819
    @daironperezfrias7819 3 ปีที่แล้ว +1

    Eres una Bestia !!!
    Genial, Saludos humildemente desde Cuba

  • @alexkizer639
    @alexkizer639 2 ปีที่แล้ว

    THIS is what I'm talking about! Time for sites to step up their game. The web is chock-full of features. Just take EFFORT instead of copying everyone else.

  • @anilshukla3.14
    @anilshukla3.14 3 ปีที่แล้ว +2

    Mind-blowing bhai 🙀

  • @atnguyentien3208
    @atnguyentien3208 2 ปีที่แล้ว

    The music makes me chill with coding =))

  • @Notifi_Gamer
    @Notifi_Gamer 2 ปีที่แล้ว

    I think html is nothing but you proof that 👏

  • @abhishekbhardwaj578
    @abhishekbhardwaj578 3 ปีที่แล้ว

    finally we made it🙌 awesome

  • @SilentZephyr
    @SilentZephyr 3 ปีที่แล้ว

    ohhh line 54 was javascript, nicely done though. super awesome how you show what each line does so flawlessly, and the music is chill.

  • @tiramo36
    @tiramo36 3 ปีที่แล้ว

    Good work you are very professional
    I'm just beginning to learn CSS it's very hard,🤔🤔🤔🤔🤔

  • @SergeyMik
    @SergeyMik 3 ปีที่แล้ว +3

    большое спасибо за оригинальную реализацию ! превосходно!

  • @darck5240
    @darck5240 2 ปีที่แล้ว

    using the box-shadow for the corners is smart, thanks for the tip

  • @Iamzota
    @Iamzota 6 หลายเดือนก่อน

    Crazy cool. So clean. I love it!

  • @txtasosxt
    @txtasosxt 2 ปีที่แล้ว

    Mesaage? 😅
    Nicely done!! Very beautiful

  • @GitGudGoblin
    @GitGudGoblin 3 ปีที่แล้ว +24

    Instead of the copy-paste solution for moving the indicator, I've assigned this method to all list elements.
    Type parameter is basically an index, 0 for Home, 1 for Profile, 2 for chat and so on.
    setActive (type) {
    const list = document.querySelectorAll('.list')
    const indicator = document.querySelector('.indicator')
    list.forEach((element, index) => {
    if (index === type) {
    element.classList.add('active')
    return indicator.style.transform = `translateX(${70 * type}px)`
    }
    element.classList.remove('active')
    })
    }

    • @testchannel3265
      @testchannel3265 2 ปีที่แล้ว

      let prev = 0;
      list.forEach((item, i) => item.addEventListener('click', () => {
      [list[prev], item].forEach(x => x.classList.toggle('active'));
      indicator.style.transform = `translateX(${70 * i}px)`;
      prev = i;
      })
      );

    • @sm123Ash
      @sm123Ash 2 ปีที่แล้ว +1

      Type parameter is basically an index, 0 for Home, 1 for Profile, 2 for chat and so on.
      How do you do that? Do you assign type as an attribute?

  • @bloodhunter1107
    @bloodhunter1107 3 ปีที่แล้ว

    you are absolutely Genius man....

  • @Lazy4444
    @Lazy4444 2 ปีที่แล้ว

    The before and after trick was very smart!

  • @tldw8354
    @tldw8354 2 ปีที่แล้ว

    I am sure, this will come in handy by some day in the future. thanks for that tut!

  • @abelcolmenarez8776
    @abelcolmenarez8776 3 ปีที่แล้ว +3

    Está buenísimo el efecto 😲😲😲😲

  • @sethheinzman5823
    @sethheinzman5823 2 ปีที่แล้ว +2

    I was like oh that’s nothing special, looks clean though and then you moved it and I was like oh never mind that’s sick 😂

  • @nguyenthanhat1422
    @nguyenthanhat1422 3 ปีที่แล้ว

    It's beautiful, I've watched the whole video.

  • @TheNazbul
    @TheNazbul 9 หลายเดือนก่อน

    this navigation bar is just another level

  • @yc815mc
    @yc815mc 2 ปีที่แล้ว

    看著網頁一步步成行的樣子,好舒壓

  • @abhikksaha
    @abhikksaha 2 ปีที่แล้ว

    It was visually so pleasing...!!

  • @czscratt
    @czscratt 2 ปีที่แล้ว +4

    I wonder if you could do this with CSS only and transparent background. I think you could use a clip-path property to cut out the white rectangle. If clip-path supports var(), you could even make it dynamic by using a radio button in front of each item to set a CSS variable like --activeIndex.

  • @willexco2001
    @willexco2001 3 ปีที่แล้ว +3

    Great effect ! I just have some things to point out to begginers here :
    - Don't use pixels. Never. They are not a valid unit of meeasurement on the web where aspect ratios, screen sizes and pixel density varies so much.
    - Prefer %, vmin, em or rem.
    - The ::before and ::after outer curve effect should be done with border and not box-shadow
    - The ::before and ::after positionning should be right: 100%; to position on the outer left of the parent and left 100%; to position on the outer right.
    This is good enough for prototyping, but it all falls down when you try to implement it elsewhere.

    • @alehchyzhyk5603
      @alehchyzhyk5603 3 ปีที่แล้ว

      Exactly this. And i don't think it's even a good idea for such things to exist on someone's website. Looks beautiful but not more than that. That's exactly why i don't like frontend, even thouh that's what my job is

    • @anubislockward3750
      @anubislockward3750 3 ปีที่แล้ว

      I have been trying for hours to make the curve using border instead of box-shadow, and can't make it work. Care to provide an example?, I managed to make it work with left: 100% and right: 100% as you suggested, but can't get rid of box-shadow for saving my life.

  • @Lets_develop_it
    @Lets_develop_it ปีที่แล้ว +1

    In 2022 i thinks whats going on this is so hard but today i came back on this video and today i will make this design without watching video

  • @titix4468
    @titix4468 2 ปีที่แล้ว +1

    Very clean but isnt there another method to do the css movement? Like if you have 20 nav (that is not good but just an exemple) will you do it one by one?

  • @suryanicholas
    @suryanicholas 2 ปีที่แล้ว

    Wuuuoooh.. Keren..
    Terimakasih sudah berbagi

  • @oneminuteislam1817
    @oneminuteislam1817 2 ปีที่แล้ว

    Deserve a million of likes

  • @eugenekannou
    @eugenekannou 3 ปีที่แล้ว +3

    What if there will be content behind this nav? Border on the circle will look weird, I think. Is there any way to make it transparent?

  • @Gabke2h2
    @Gabke2h2 3 ปีที่แล้ว +5

    Good effect and widget. I would suggest using classes instead of tag selectors and use less especification. In this case wont affect but on a large scale the miss use of tag selectors and especification will affect performance. Browsers read from right to left the selectors. Good tutorial, but would be nice to see it with good practices.

    • @yuioyup
      @yuioyup 3 ปีที่แล้ว +1

      Probably did it this way because it was on a much smaller scale

  • @jamesknight0001
    @jamesknight0001 ปีที่แล้ว

    I just love this song, I fall asleep while learning how to design.

  • @e-berry
    @e-berry 2 ปีที่แล้ว +1

    "Mesaage" x) Amazingly done tho

  • @theman7050
    @theman7050 2 ปีที่แล้ว

    Genius! Masha Allah

  • @ZeeWolfed
    @ZeeWolfed ปีที่แล้ว

    Hello I've just finish your tuto and it's awesome thanks

  • @KnaveKaiser
    @KnaveKaiser 2 ปีที่แล้ว +3

    nice work. can you make it transparent instead of matching the background color?

  • @ashishm4356
    @ashishm4356 3 ปีที่แล้ว

    Sir , u r the real coder.

  • @quoccuong1733
    @quoccuong1733 2 ปีที่แล้ว

    Lmao and here I was trying it out first before watching the video only to realized i had taken the unnecessarily complicated approach by using getBoundingClientRect and all that crap to achieve the same thing. That use of the calc function is really concise, modern and smart

  • @EDreyer
    @EDreyer 2 ปีที่แล้ว +1

    The fact that the dip in the menu was done with a black border and the two rounded corners ticked me off. I thought it is going to be some kind of insane information. I am mad because it is so simple and elegant. My solution was overkill.

  • @karma999ld
    @karma999ld 7 หลายเดือนก่อน +1

    I'm just beginning to learn code, for a personal project, and your design is epic, but it was hard for me to make the objects that divide the navbar and the circle, match the different background colors i have, i think i fixed it but would you have a tutorial for that, or give it in your course?

  • @AcademiaCS1
    @AcademiaCS1 9 หลายเดือนก่อน

    Very nice job. Of course s(he) likes maths and geometry. Congrats

  • @charlesoroko4253
    @charlesoroko4253 3 ปีที่แล้ว

    I learnt quite a bit. Thanks! It seems I need to learn how to leverage CSS selectors.

  • @redcherry_1010
    @redcherry_1010 2 ปีที่แล้ว

    This is an AWESOME channel

  • @smartview4113
    @smartview4113 3 ปีที่แล้ว

    how a person be creative like that? amazing

  • @mhombach3035
    @mhombach3035 2 ปีที่แล้ว +1

    Nice, but I would have loved a solution where this works even with a non-colored background, like a gradient or some image. This "hack" to draw over certain areas with the background-color only works in limited usecases, right?

  • @twrkhanasparukh
    @twrkhanasparukh 3 ปีที่แล้ว +3

    Amasing! Have had similar design and couldn figure out how to make such curve and made it with image, but your approach is way better. Simply inginious!

    • @UniqueTBG
      @UniqueTBG 3 ปีที่แล้ว

      It's css bro
      Code: border-radius: 50px;

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  3 ปีที่แล้ว +1

      th-cam.com/video/a3rofqqrTBE/w-d-xo.html

    • @notinla
      @notinla 3 ปีที่แล้ว

      @@OnlineTutorialsYT the script dosnt work, any ideeas why?
      Nvm i got it to work eventually, still dont know what is had though. Probably a bug in VSCode

  • @Monk2s
    @Monk2s ปีที่แล้ว +1

    Bro, I've been studying programming for a week. I'm thinking you're some kind of god.

  • @rodolphelesueur4354
    @rodolphelesueur4354 2 ปีที่แล้ว +1

    Very clear and clever. Well done.

  • @TrGeorgeOgilo
    @TrGeorgeOgilo 2 ปีที่แล้ว +3

    Great tutorial. I just noticed that it's limited to a fixed number of menu items so I instead of moving the indicator using css you can use JavaScript by just adding
    // get the navigation container
    let navigation = document.querySelector('.navigation')
    // get the coordinates of navigation and the clicked menu
    let navRect = navigation.getBoundingClientRect()
    let rect = this.getBoundingClientRect()
    //Calculate the new left position for the indicator
    left += rect.left - navRect.left
    //move the indicator to the center of the current/clicked menu item
    document.querySelector('.indicator').style.transform = `translateX(${left}px)`
    this allows you to add more items to your menu without worrying about updating your css file every now and then.

  • @thefaulenzer677
    @thefaulenzer677 2 ปีที่แล้ว

    I love how Mesaage made it through the entire Video

  • @mathewsjoby6455
    @mathewsjoby6455 2 ปีที่แล้ว

    I really loved the tutorial. I was using react. So technically, I used my logic for the script part.

  • @djgi7215
    @djgi7215 2 ปีที่แล้ว

    i tried this today, took me like 2h cause i tried to understand, didnt understand eall, but this is amazing

  • @SamuelNasta
    @SamuelNasta 2 ปีที่แล้ว

    That's almost exactly what I was looking for

  • @pauljohn3898
    @pauljohn3898 3 ปีที่แล้ว +1

    So creative and amazing design😍

  • @soumyadipmajumder902
    @soumyadipmajumder902 2 ปีที่แล้ว

    This lesson is outstanding...