Navigation Menu Using Html CSS & Javascript | Curved Outside in Active Tab
HTML-код
- Опубликовано: 3 июл 2021
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
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 #html #css
------------------
give proper credit if you repost this on other social media platform
------------------
Inspired By This
Sidebar Menu Using Html CSS & Javascript | Curved Outside in Active Tab
• Sidebar Menu Using Htm...
Also Watch
How to Create Responsive Sidebar Menu Using Html CSS & Javascript | Dashboard Sidebar Menu
• How to Create Responsi...
Pure CSS Sidebar Menu | Off Canvas Menu Effects with Smooth Page Scroll Using Html CSS Only
• Pure CSS Sidebar Menu ...
Responsive Navigation Bar With Html CSS and Javascript | Responsive Sidebar Menu For Mobile
• Responsive Navigation ...
------------------
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
Trick 1 : ruclips.net/video/P_A2kNpyQBs/видео.html
Hii can u please make it using tailwind
iam in coding class learning basics css/js and we see your videos everybody: "whoaaaa c'est génial" (awesome in french)
C'est vrai que c'est tuto sont incroyable
your the sort of person who would program their intros in css instead of using some templates online; you're very skilled, indeed.
The best channel for web development tips and tricks
There are still lots of ways to further optimize this, here's two:
- write shorter selectors, it's more efficient, easier to read and will reduce the risk of specificity wars. There is no need to write '.navigation ul li' or '.navigation ul li a .icon ion-con' when you can just write '.navigation li' and '.navigation ion-icon'. You can reduce that even further by using logical class names, typically in a BEM-like style so you could use .nav and .nav__item and .nav__link. This is a good habit to get in to.
- use flexbox for vertical centering, support is excellent so no need for display fallbacks. You can get rid of the two spans inside the link and simply use align-items: center on the link. If you need extra fine control over alignment between icon and text simplest way is to use a transform on the icon. There is no need to use line-height on the text, that's an old trick and can look ugly if you ever need to support wrapping text.
Is It insane? Such a Beautiful Design only using HTML and CSS, No images👍👍👍❤️❤️
Yes, it is!
Best Channel of India❤️❤️❤️
Your background music is completely awesome!!
500k Congratulation
Best code have i seen. Thanks for this video. Its very appreciable
Love from Pakistan sir❤️
Your channel help me alot
Thank you so much for give us such informational content
thanku so much for your this kind of help
Waiting for 1 million subscribers
Thank you for your great videos
This was amazing navbar.
❤️🇳🇵🇳🇵😃👌👌 congratulations for 500k sir
thanks brother This is amazing ❤
This is super good ⭐⭐ ⭐⭐⭐
Awesome tutorial
congo for 500k . keep it up
Thanks
Nice one!
so so great but can you change the music, it's make me sleepy :))
Wow man ❤❤❤👌
Nice
Beautifull
Congratulations 🎉👏 for 500k subscribers
Many many thanks
Can you build this website
??
If you do you are genuis
Amazing.
Thank you! Cheers!
beautiful for ui designing
Thanks a lot
Would this float over the page when opened or would it push age content across when the menu is opened? Cool menu though, very neat
Интересное решение, спасибо 👍
А как сделать чтобы в право выдвигалась выпадающее меню
На оставшуюся ширину экрана как сделать меню выпадающим
yeah i was wondering why u not using after before in other video
first 1 minute commend
Hello, thank you for this tutorial. Can you help me to understand why did you put dispaly: block and display: flex for the same element please? 4:59min
hi sir
I have a question
I wanna use it for mobile size.
is it possible??
Hey, Everything works well besides the icons, I cannot see the icons and I do use the proper form.. Any advice?
Hi sir..i have a problem, i've followed this video step by step but when i modify '.navigation ul li a .icon' line-height, it put the icon at the top and the text at the center..how can i fix it?
thanks :0
nice
Thanks
First here
AOA!
I have an idea for you.
I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly.
you are doing such a great job. your videos are really helpful and i am able to learn so much from you.
Sir, please add drop-down menu in it also, it will be great
Thanks
i'm a amateur in web design... i developer my websites with Wordpress/elementor.
I managed to copy this class in visual studio, but I couldn't import it to the site, and I also don't know how to place it aligned to one side of the page.
could you help me with this?
What is the topic you have in VSCode?
What do I do if I want the letter and the bar to change color when I select it?
Sir, can you help me, the problem is that in html I'm adding the video in video tag then I think so can one more thing have we added in this page. In video will have add a video preview gif, when we point cursor on the video so automatically Play video preview. and then after click Play button then play the original video. Sir PlZ help me can you make the video for this topic
Hello sir, can you make a registration and login form with localStorage only, it would be a great help if you do
Yes Irshad sir 🙌🙌 please make it with local storage JavaScript
Why would you want that to be local storage. So many security flaws its insane.
@@whatamiwitnessing1003 well, for educational purposes it kinda makes sense to only have localStorage
since what you want to learn is the design and not the security itself
@@tylercs8750 I don't see the relevance of your comment.
@@tylercs8750 Someone already said that tho, making your comment unneeded.
Most of your projects are not responsive, please make them responsive sir. They are amazing but when we make them they looks good but we fail to make them responsive. Please make such amazing projects responsive as well
sir, may I ask you for this awesome background music's name?
is it possible to add a fluid transition on click.? i mean when we click active fills with the color and previous active goes out of color to normal
Yes
it would be great if you could use a seperate .js file for the script
you can make a menu bar like a video, but can that menu show more submenu . Thaks
please tell me best channal for learn
Sir, if I want to be a front end developer with your channel, where do I start?
Hey, I need help. I replaced the "#" in , and i added about.html and others etc.. And i copied the all the code and pasted in the about.html and others... then i saved the file and i went to the website and clicked on the about me icon and the animation didnt show and the paged directed me to the about.html without animation, what can i do to fix this and epic tutorial, pls pls pls help me or someone else who knows how to fix this by tomorrow and thanks. epic turotial also nice.
Why you put horror bg music? background-music: none;
Irshad sir aap ko koun koun sa language aata h please introduce yourself a separate video apni college aur abhi tk ki journey bataye i am excited to listen
how to make curves for horizontal nav tabs
The sublink?
I note that him script has changed in 4 days from a dirty one using for, while and onclick to a modern one using forEach and addEventListener ......
Please Launch RUclips Video series for Beginners in Website Developments from Scratch
will you claim copycat claim If i use this theme in my project and publish it.
Fan request please clone TypeForm only front-end please 🙏🙏🙏🙏
Big fan 😢
brother can i have the url for the google fonts pls
Sir it is awesome but can you make the transition smooth?
Ease-out Should be settled
@@jass__0 Ease-in Works better in this case I think
i cant find the link for telegram group?
Sir when we code last javascript code it's not working can u pls explain
great video but I dont like so many "magical value" it make the page vulnerable
Sir Can u add your own voice instead of Back ground music!
It will helped us a lot to understand some logics..
Please Sir
It can be that he don't have a good mic or don't want to do it and still it's his choice.
@@krishnachoubey8648 Or doesn't know the language well :/
why the last script wont work for me
web developer : its impossible
muhammad : are you serious
You know that soon I will tell in my video how to make a super portfolio website. I would love to tell you when it's made
Please add sub menu in it
I didnt understand what happened when you did overflow-x:hidden 7:42
Pllease worpress totris
why that so many "Position relatives" if someone can explain
Sir , Can you teach php? ❤️
No...only Frontend
Timestamp: 4:06
(ignore)
Create a shopping website and give full code for free.
What u gonna do with that lol
Hey sir, can you change your music.. It feel so sad :(((
Nice render but bad way to do it !
Its not even animating switch items, what a lame
If you started animating one part, why did you left another?
Great coding ugly music. 😂
Nice
Thanks
AOA!
I have an idea for you.
I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly.
you are doing such a great job. your videos are really helpful and i am able to learn so much from you.