Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects
Рет қаралды 1,992,595
2 жыл бұрынClick For More : kzfaq.info...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
CSS Infinity Course : www.udemy.com/course/infinity...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutorialsweb.com
Buy Me A Coffee : www.buymeacoffee.com/onlineTu...
------------------
#csseffect #topcsseffects
------------------
give proper credit if you repost this on other social media platform
------------------
Also Watch These
CSS Icon Hover Effects | Animated Menu Indicator using CSS & Javascript
• CSS Icon Hover Effects...
Navigation Menu Using Html CSS & Javascript | Curved Outside in Active Tab
• Navigation Menu Using ...
Sidebar Menu Using Html CSS & Javascript | Curved Outside in Active Tab
• Sidebar Menu Using Htm...
Glassmorphism Hover Effects with Magic Line Indicator using CSS & Javascript | CSS Glassmorphism
• Glassmorphism Hover Ef...
CSS Magic Line Icon Fill Hover Effects | Social Media Buttons
• CSS Magic Line Icon Fi...
------------------
icon source : ionic.io/ionicons
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use
@OnlineTutorialsYT 11 ай бұрын
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.
@MRMOTOFOTO 2 жыл бұрын
The fact that I think I can do this without watching the video is giving me hope.
@AanAntheroNo1 2 жыл бұрын
Iam watching itnand can't do it there is no hope for me
@brxndxnpx 2 жыл бұрын
Haha I thought the same thing. Going to give it a try before finishing the video
@crimsonwolf4490 2 жыл бұрын
@@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 2 жыл бұрын
same here. I looked up css animations just an hour before this.
@crispydonut7404 2 жыл бұрын
Yes same
@robertuszrobi 2 жыл бұрын
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 2 жыл бұрын
Bra i don wanna kill ur dreams, but coding not that exciting
@sagarshabadi3375 2 жыл бұрын
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. 2 жыл бұрын
@@dennisbarzanoff9025 nah bruh coding is exciting as hell
@CloudyyYT 2 жыл бұрын
@@dennisbarzanoff9025 i've been coding for like a year and a half and i still get excited
@unjakx 2 жыл бұрын
@@dennisbarzanoff9025 Depends on the person who is coding
@WrokkerGaming Жыл бұрын
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.
@LordKosmux 2 жыл бұрын
This one surprised me! Very clean, modern and it's truly magic to see. Keep the good job, you're amazing!
@edenmaimon6983 2 жыл бұрын
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!
@ethlny6093 2 жыл бұрын
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 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
@OnlineTutorialsYT 2 жыл бұрын
Another Effects : kzfaq.info/get/bejne/l5miosmi1ti4cnk.html
@tenzinpesangdompatsang369 2 жыл бұрын
Thank you I love your video
@your-dad 2 жыл бұрын
I love your video, Wats the song music?
@user-rd3lj4gn4s 2 жыл бұрын
Where is link to worked example? May be it don’t works at many browsers...
@mq_tv7009 2 жыл бұрын
sir links ni chal rahy
@user-rd3lj4gn4s 2 жыл бұрын
@@mq_tv7009 There are NO demo with this menu.
@mrCetus 2 жыл бұрын
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.
@themagicartroll8961 Жыл бұрын
Doesn't really matters 😉
@Polanopyle Жыл бұрын
@@themagicartroll8961 Semantics absolutely do matter, it's important for assistive technologies, for one. Search indexing is another.
@dunai2012 2 жыл бұрын
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 Жыл бұрын
Also me I'm beginner
@yassinesafraoui Жыл бұрын
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 Жыл бұрын
I'm not getting it I followed all the explanation in the video but the icon are not displaying, please I need help.
@watidev 2 жыл бұрын
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 Жыл бұрын
I come back after 11 months, I UNDERSTAND EVERYTHING !!! and that work is realllyyy good !
@yassinesafraoui Жыл бұрын
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.
@jankrupinski1162 2 жыл бұрын
Incredible. As a huge fan of pseudoelements I love this video. Good job. Awesome.
@RaveKev 2 жыл бұрын
That border-radius and box-shadow was brilliant! thx
@SamerLOLOfficial 2 жыл бұрын
I would rate it 10/10, excellent design and color picking.
@BigBennyO 2 жыл бұрын
Shifu has done it again. Respect!!!
@FrancoNSosa 3 ай бұрын
I didn't even know you could do all this with almost just CSS! This is very inspiring, thank you!
@viallymboma9874 2 жыл бұрын
Damn this guy is awesome...always bring a mind new blowing impressive creative UI design
@hadiozturk 2 жыл бұрын
As a person who is really new at programming i have really excited that. Keep it up bro you give us inspiration. Nice work
@jessesandvik4458 2 жыл бұрын
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 2 жыл бұрын
could you please share a sandbox or pen?
@SergeyMik 2 жыл бұрын
большое спасибо за оригинальную реализацию ! превосходно!
@Iamzota 29 күн бұрын
Crazy cool. So clean. I love it!
@Monk2s Жыл бұрын
Bro, I've been studying programming for a week. I'm thinking you're some kind of god.
@balramraika7763 2 жыл бұрын
Your tutorial always amazed me. So clean
@ed1nh0 2 жыл бұрын
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 2 жыл бұрын
Sign up to the course and you won't be a newbie.
@ed1nh0 2 жыл бұрын
@@cryptocheech well noticed.
@CaptainShanko 2 жыл бұрын
Could you link a vid showing best practices plz? Asking for a friend who is a total noob.
@ed1nh0 2 жыл бұрын
@@CaptainShanko I think it's not quite right doing that on someone's channel, sorry about that.
@anilshukla3.14 2 жыл бұрын
Mind-blowing bhai 🙀
@codingcrush2.0 2 жыл бұрын
You're one of the best youtuber that I follow and I have a good level today thanks to your videos
@HarryEdwards-zk6ok 2 ай бұрын
Bro !!!!!!!!!!!!!! You are so genius ! All of your designs are mind-blowing.
@mathewsjoby6455 2 жыл бұрын
I really loved the tutorial. I was using react. So technically, I used my logic for the script part.
@manuelquiero Жыл бұрын
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
@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
@faiqangra876 2 жыл бұрын
He never disappointed in his videos
@GHOSTBRSERVER 2 жыл бұрын
sem duvidas vc e um dos melhores mano, parabens vc e top, se possivel na proxima va falando fica mais facil acompanhar
@kingsleyeshun_ 2 жыл бұрын
OH MY GOD . You're always blowing my mind with such awesome ideas.. Thanks very much bro.
@user-tr8pq2sm8c 2 ай бұрын
Wow that was amazing to me. I am beginner at HTML and CSS. That piece of art gave me big motivation to continue.
@CreativeTutorialsWeb 2 жыл бұрын
Always deliver best videos 😃
@estebanpedroguerravidal8336 2 жыл бұрын
Me encantó. Estoy empezando con esto y es muy didáctico y simple. Muchas Gracias!!
@rodolphelesueur4354 2 жыл бұрын
Very clear and clever. Well done.
@wov2004 2 жыл бұрын
Cuti, nice!
@nextlevelcoding5834 2 жыл бұрын
wow... Always inspired from you to do Something New ... Like special 😊😊
@zainulislam1548 2 жыл бұрын
We are thankful to you for sharing such a great knowledge and ideas
@michalvonbargen6523 2 жыл бұрын
love that design, simple and awesome
@hirschheisstdermann 2 жыл бұрын
lol - I'd never put that much effort into CSS. But this is just really great!
@daironperezfrias7819 2 жыл бұрын
Eres una Bestia !!! Genial, Saludos humildemente desde Cuba
@brandormarquez3148 2 жыл бұрын
Wow such a great tutorial!!! Thanks bro
@El_Traficante 2 жыл бұрын
Bravo, sir.
@gedesherstyle 2 жыл бұрын
Simple, lovely navigation menu! 😀
@pauljohn3898 2 жыл бұрын
So creative and amazing design😍
@JustinDAMusic Жыл бұрын
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 Жыл бұрын
This is a mobile style UI....
@MrBrainTucker1079 Жыл бұрын
True, but the tip was good regardless imo
@godnyx117 Жыл бұрын
@@SmokinMesa Cool idea non the less!
@codewithsehran 3 ай бұрын
@@SmokinMesathat's not important
@Gabkets 2 жыл бұрын
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 2 жыл бұрын
Probably did it this way because it was on a much smaller scale
@suryanicholas 2 жыл бұрын
Wuuuoooh.. Keren.. Terimakasih sudah berbagi
@user-om1rn1cd7n Ай бұрын
Literally Shocked bro Amazing 👌👌👌👌
@xinye0123 Жыл бұрын
太厉害了🤩
@charlesoroko4253 2 жыл бұрын
I learnt quite a bit. Thanks! It seems I need to learn how to leverage CSS selectors.
@darck5240 2 жыл бұрын
using the box-shadow for the corners is smart, thanks for the tip
@InteligenciaJ 2 жыл бұрын
Top, Excellent
@hangoutmusic2566 2 жыл бұрын
You are efficient coder with out any error.
@alexandterfst6532 Жыл бұрын
Beautiful!
@WebDesignTuts 2 жыл бұрын
That's Impressive
@dthevenin 2 жыл бұрын
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 :-)
@bastiennavarri7252 2 жыл бұрын
with input radio it will be better
@furkanyildirim8380 2 жыл бұрын
Have you tried the way that you suggested to see if it works?
@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
@Sorahoh Жыл бұрын
와 … 천재십니까ㅠ
@razorjhon2622 2 жыл бұрын
i liked the video before i watch , you are amazing man ♥
@frontendninja8401 Жыл бұрын
wow, nice work!
@MrDa4ka 2 жыл бұрын
great concept, but in is not valid, other html and css structure needed
@4maxnechaev 2 жыл бұрын
Awesome! Very clean and interesting solution
@Nord-iq Жыл бұрын
والله حلوة النتيجة استمر
@DrOne-sw6oz 2 жыл бұрын
Fantastic effect, thanks for the tutorial
@theman7050 2 жыл бұрын
Genius! Masha Allah
@Anonim-im6ln 2 жыл бұрын
Круто!!))
@goofy7791 2 жыл бұрын
Simple and practice! Thanks
@twrkhanasparukh 2 жыл бұрын
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 2 жыл бұрын
It's css bro Code: border-radius: 50px;
@OnlineTutorialsYT 2 жыл бұрын
kzfaq.info/get/bejne/l5miosmi1ti4cnk.html
@notinla 2 жыл бұрын
@@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
@natsuuzhtte Жыл бұрын
Nice creation idea! You've made me spirit want to learn programming more deep
@godnyx117 Жыл бұрын
Amazing! Thank you!
@baolephamquoc5835 Жыл бұрын
So creative !
@linhcao8089 2 жыл бұрын
you're da best, bro! :D
@thedyslexicwebdev1654 2 жыл бұрын
Excellent!!!
@czscratt Жыл бұрын
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.
@WidianDAlbie 2 жыл бұрын
Amazing! Thanks you for the tutorials
@yusuf4815 2 жыл бұрын
Keren.. Bagus banget, Dinamis
@christophervradis7285 2 жыл бұрын
im addicted to your chanel with this video
@rajat-s-kale1771 2 жыл бұрын
Awesome bro
@user-qh4zv9qc9h 2 жыл бұрын
Yeahhhhh!!! So cool!!!! Thanks a lot for this magic))))
@mohammeddemmouchi2299 2 жыл бұрын
Great job, thanks for sharing! 👍👍
@drearystate 2 жыл бұрын
Thats pretty badass
@eeemihaeee Жыл бұрын
ns job men! Very cool!!!
@vedanshverma8626 7 ай бұрын
I see in figma I thought tht i never design this but u mske me confident ..... intelligent bruh😊
@aouxswantoro5432 2 жыл бұрын
It is simply awesome...! Many thanks
@abhishekbhardwaj578 2 жыл бұрын
finally we made it🙌 awesome
@u2160161 2 жыл бұрын
Awesome!!
@nguyenthanhat1422 2 жыл бұрын
It's beautiful, I've watched the whole video.
@kodosensei 2 жыл бұрын
I LOVE THAT !!!
@aritra3004 2 жыл бұрын
This is pretty nice!!
@julioalbertoaraniscontrera7941 2 жыл бұрын
Nice effect!
@tldw8354 Жыл бұрын
I am sure, this will come in handy by some day in the future. thanks for that tut!
@gustavoabrahamsulca6688 2 жыл бұрын
Wow that´s awesome!
@wasayyed70 2 жыл бұрын
Superb really impressed
@Amirkalateh_1380 2 ай бұрын
Literally, nice ❤
@widespectrumcreators4691 8 ай бұрын
Impressive!!!!
@shuvojitbiswas7525 2 жыл бұрын
wow amazing work....impressive❤❤
@abelcolmenarez8776 2 жыл бұрын
Está buenísimo el efecto 😲😲😲😲
Online Tutorials
Рет қаралды 110 М.
Gufee.medalin
Рет қаралды 10 МЛН
Codehal
Рет қаралды 26 М.