Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects
Vložit
- čas přidán 30. 11. 2021
- Click For More : czcams.com/users/OnlineTutor...
------------------
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
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.
The fact that I think I can do this without watching the video is giving me hope.
Iam watching itnand can't do it there is no hope for me
Haha I thought the same thing. Going to give it a try before finishing the video
@@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
same here. I looked up css animations just an hour before this.
Yes same
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.
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.
Bra i don wanna kill ur dreams, but coding not that exciting
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 ..
@@dennisbarzanoff9025 nah bruh coding is exciting as hell
@@dennisbarzanoff9025 i've been coding for like a year and a half and i still get excited
@@dennisbarzanoff9025 Depends on the person who is coding
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!
This one surprised me! Very clean, modern and it's truly magic to see. Keep the good job, you're amazing!
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
I come back after 11 months, I UNDERSTAND EVERYTHING !!! and that work is realllyyy good !
Another Effects : czcams.com/video/a3rofqqrTBE/video.html
Thank you I love your video
I love your video, Wats the song music?
Where is link to worked example? May be it don’t works at many browsers...
sir links ni chal rahy
@@mq_tv7009 There are NO demo with this menu.
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.
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
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
Incredible. As a huge fan of pseudoelements I love this video. Good job. Awesome.
I didn't even know you could do all this with almost just CSS! This is very inspiring, thank you!
Bro, I've been studying programming for a week. I'm thinking you're some kind of god.
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.
Doesn't really matters 😉
@@themagicartroll8961 Semantics absolutely do matter, it's important for assistive technologies, for one. Search indexing is another.
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.
Also me I'm beginner
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 :)
I'm not getting it I followed all the explanation in the video but the icon are not displaying, please I need help.
As a person who is really new at programming i have really excited that. Keep it up bro you give us inspiration. Nice work
I would rate it 10/10, excellent design and color picking.
Wow that was amazing to me. I am beginner at HTML and CSS. That piece of art gave me big motivation to continue.
Shifu has done it again. Respect!!!
After some times watching these tutorials I am now able to create my very own website thank you for your help very much
Bro !!!!!!!!!!!!!! You are so genius ! All of your designs are mind-blowing.
That border-radius and box-shadow was brilliant! thx
OH MY GOD . You're always blowing my mind with such awesome ideas.. Thanks very much bro.
Damn this guy is awesome...always bring a mind new blowing impressive creative UI design
You're one of the best youtuber that I follow and I have a good level today thanks to your videos
Your tutorial always amazed me. So clean
wow... Always inspired from you to do Something New ... Like special 😊😊
I really loved the tutorial. I was using react. So technically, I used my logic for the script part.
i liked the video before i watch , you are amazing man ♥
Mind-blowing bhai 🙀
I see in figma I thought tht i never design this but u mske me confident ..... intelligent bruh😊
lol - I'd never put that much effort into CSS. But this is just really great!
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!
could you please share a sandbox or pen?
Me encantó. Estoy empezando con esto y es muy didáctico y simple. Muchas Gracias!!
We are thankful to you for sharing such a great knowledge and ideas
You are efficient coder with out any error.
Wow such a great tutorial!!! Thanks bro
большое спасибо за оригинальную реализацию ! превосходно!
It's beautiful, I've watched the whole video.
I learnt quite a bit. Thanks! It seems I need to learn how to leverage CSS selectors.
im addicted to your chanel with this video
Eres una Bestia !!!
Genial, Saludos humildemente desde Cuba
He never disappointed in his videos
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
Literally Shocked bro Amazing 👌👌👌👌
sem duvidas vc e um dos melhores mano, parabens vc e top, se possivel na proxima va falando fica mais facil acompanhar
Always deliver best videos 😃
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.
I am sure, this will come in handy by some day in the future. thanks for that tut!
Nice creation idea! You've made me spirit want to learn programming more deep
So creative and amazing design😍
Very clear and clever. Well done.
This video needs an deep explanation to understand how it is working other then that video is crazy 🤩
using the box-shadow for the corners is smart, thanks for the tip
Genius! Masha Allah
Honestly i don't know what to say haha, like, this was amazing, i can only imagine being able to do this kind of things one day.
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! 👍🏼
Sign up to the course and you won't be a newbie.
@@cryptocheech well noticed.
Could you link a vid showing best practices plz? Asking for a friend who is a total noob.
@@CaptainShanko I think it's not quite right doing that on someone's channel, sorry about that.
finally we made it🙌 awesome
love that design, simple and awesome
you are absolutely Genius man....
It was visually so pleasing...!!
Hello I've just finish your tuto and it's awesome thanks
Awesome! Very clean and interesting solution
This lesson is outstanding...
It is simply awesome...! Many thanks
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
Simple, lovely navigation menu! 😀
Amazing! Thanks you for the tutorials
Wuuuoooh.. Keren..
Terimakasih sudah berbagi
The before and after trick was very smart!
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.
와 … 천재십니까ㅠ
Fantastic effect, thanks for the tutorial
ohhh line 54 was javascript, nicely done though. super awesome how you show what each line does so flawlessly, and the music is chill.
crazy skills. Good job very impressive
Simple and practice! Thanks
Awesome bro, I will continue uploading my tutorials too, you inspire me
Yeahhhhh!!! So cool!!!! Thanks a lot for this magic))))
this guy is a model who never leaves online classes at all
This is an AWESOME channel
Such an amazing tutorial, thank u so much.
YOUR VIDEOS IS VERY NICE.... MAI AAPKI HAREK VIDEO DEKHATI HU.... VERY NICE EXPLATION OF YOUR VIDEO....
wow amazing work....impressive❤❤
Great job, thanks for sharing! 👍👍
Animation is brilliant.
I got it, i do this after some struggle, thanku
Bro you are SUPER good!!
Good work you are very professional
I'm just beginning to learn CSS it's very hard,🤔🤔🤔🤔🤔
Keren..
Bagus banget, Dinamis
Very nice job. Of course s(he) likes maths and geometry. Congrats
Gerçekten başarılı ve yararlı bir video olmuş teşekkürler :)
Looks good and there is even better way that let’s you have any background.
With SVG shape morphing you get it even better.
Wow. I impressed. Like... Just wow
It's very good and useful for me. Thank you bro
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 :-)
with input radio it will be better
Have you tried the way that you suggested to see if it works?
@@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
Great Tutorial!! Thanks a lot!
This is pretty nice!!
Literally, nice ❤
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.
Probably did it this way because it was on a much smaller scale
Your projects are so useful and amazing 🙏🏻