Navigation Menu Using Html CSS & Javascript | Curved Outside in Active Tab

Рет қаралды 93,783

Күн бұрын

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
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.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
#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

Пікірлер: 112

@OnlineTutorialsYT 3 жыл бұрын

Trick 1 : kzfaq.info/get/bejne/hsVxZc5_1d-1cqc.html

@anirbanmiddya Жыл бұрын

Hii can u please make it using tailwind

@abasop5946 3 жыл бұрын

iam in coding class learning basics css/js and we see your videos everybody: "whoaaaa c'est génial" (awesome in french)

@Rien62 3 жыл бұрын

C'est vrai que c'est tuto sont incroyable

@AyushKumar-vp1fl 3 жыл бұрын

Is It insane? Such a Beautiful Design only using HTML and CSS, No images👍👍👍❤️❤️

@OnlineTutorialsYT 3 жыл бұрын

Yes, it is!

@sntxrrr 3 жыл бұрын

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.

@JB-iz8bi 3 жыл бұрын

your the sort of person who would program their intros in css instead of using some templates online; you're very skilled, indeed.

@holiqibrahim 3 жыл бұрын

The best channel for web development tips and tricks

@hackerbuddy873 3 жыл бұрын

Waiting for 1 million subscribers

@shuvroroy2540 3 жыл бұрын

500k Congratulation

@AyushKumar-vp1fl 3 жыл бұрын

Best Channel of India❤️❤️❤️

@dt5824 3 жыл бұрын

so so great but can you change the music, it's make me sleepy :))

@fahd4007 3 жыл бұрын

yeah i was wondering why u not using after before in other video

@user-kz6cz6fx8i 5 ай бұрын

thanku so much for your this kind of help

@ammrr9137 3 жыл бұрын

❤️🇳🇵🇳🇵😃👌👌 congratulations for 500k sir

@joanny1710 3 жыл бұрын

Your background music is completely awesome!!

@letslearnwithjosh8027 3 жыл бұрын

Congratulations 🎉👏 for 500k subscribers

@OnlineTutorialsYT 3 жыл бұрын

Many many thanks

@letslearnwithjosh8027 3 жыл бұрын

Can you build this website

@letslearnwithjosh8027 3 жыл бұрын

If you do you are genuis

@shubhamsingh-fk2is 3 жыл бұрын

congo for 500k . keep it up

@OnlineTutorialsYT 3 жыл бұрын

Thanks

@abdullahzulfiqar112 3 жыл бұрын

Love from Pakistan sir❤️ Your channel help me alot Thank you so much for give us such informational content

@mdkeyes4161 2 жыл бұрын

Best code have i seen. Thanks for this video. Its very appreciable

@harshsinha17 3 жыл бұрын

Hello sir, can you make a registration and login form with localStorage only, it would be a great help if you do

@ZahidKhan-th8pz 3 жыл бұрын

Yes Irshad sir 🙌🙌 please make it with local storage JavaScript

@whatamiwitnessing1003 3 жыл бұрын

Why would you want that to be local storage. So many security flaws its insane.

@arjix8738 3 жыл бұрын

@@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

@whatamiwitnessing1003 3 жыл бұрын

@@tylercs8750 I don't see the relevance of your comment.

@whatamiwitnessing1003 3 жыл бұрын

@@tylercs8750 Someone already said that tho, making your comment unneeded.

@decay6591 3 жыл бұрын

Why you put horror bg music? background-music: none;

@comoyun 2 жыл бұрын

Nice

@abdullahshafiq2840 3 жыл бұрын

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.

@williamsbron2686 3 жыл бұрын

hi sir I have a question I wanna use it for mobile size. is it possible??

@mfaiz6 3 жыл бұрын

beautiful for ui designing

@OnlineTutorialsYT 3 жыл бұрын

Thanks a lot

@jayrajsingh5283 3 жыл бұрын

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

@chriswatts923 Жыл бұрын

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

@iReqenYT 3 жыл бұрын

Hey, Everything works well besides the icons, I cannot see the icons and I do use the proper form.. Any advice?

@radmon_ 2 жыл бұрын

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?

@prakharsoni6406 3 жыл бұрын

Nice one!

@ZahidKhan-th8pz 3 жыл бұрын

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

@babayaga6172 3 жыл бұрын

Sir Can u add your own voice instead of Back ground music! It will helped us a lot to understand some logics.. Please Sir

@krishnachoubey8648 3 жыл бұрын

It can be that he don't have a good mic or don't want to do it and still it's his choice.

@comoyun 2 жыл бұрын

@@krishnachoubey8648 Or doesn't know the language well :/

@abdullahshahzadofficial4739 3 жыл бұрын

This was amazing navbar.

@desanavik 3 жыл бұрын

Интересное решение, спасибо 👍

@ulbolsynzh 3 жыл бұрын

А как сделать чтобы в право выдвигалась выпадающее меню

@ulbolsynzh 3 жыл бұрын

На оставшуюся ширину экрана как сделать меню выпадающим

@lapetitesouris6808 2 жыл бұрын

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

@matthw8441 2 жыл бұрын

What do I do if I want the letter and the bar to change color when I select it?

@vinaymathrubai1244 3 жыл бұрын

This is super good ⭐⭐ ⭐⭐⭐

@huyentranuc8621 3 жыл бұрын

Thank you for your great videos

@Mayanksingh-qp6dy 3 жыл бұрын

Awesome tutorial

@tekrak585 2 жыл бұрын

thanks brother This is amazing ❤

@JuanCarlos-ox3dc 3 жыл бұрын

Amazing.

@OnlineTutorialsYT 3 жыл бұрын

Thank you! Cheers!

@user-te4gn9yq5c 2 жыл бұрын

great video but I dont like so many "magical value" it make the page vulnerable

@ashraf_sajid 3 жыл бұрын

it would be great if you could use a seperate .js file for the script

@hafizjavaid 3 жыл бұрын

Sir, please add drop-down menu in it also, it will be great Thanks

@anjoafiliado2186 3 жыл бұрын

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?

@huyentranuc8621 3 жыл бұрын

you can make a menu bar like a video, but can that menu show more submenu . Thaks

@myblogginglab 3 жыл бұрын

Please Launch KZfaq Video series for Beginners in Website Developments from Scratch

@luiselias8127 2 жыл бұрын

What is the topic you have in VSCode?

@z_ari9247 3 жыл бұрын

Timestamp: 4:06 (ignore)

@gamerdunia18 3 жыл бұрын

Sir it is awesome but can you make the transition smooth?

@jass__0 3 жыл бұрын

Ease-out Should be settled

@Danorally 2 жыл бұрын

@@jass__0 Ease-in Works better in this case I think

@moviesflixer4307 3 жыл бұрын

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

@MuhammadMustafa-uz2bf 3 жыл бұрын

please tell me best channal for learn

@admiral5340 3 жыл бұрын

Sir, if I want to be a front end developer with your channel, where do I start?

@jijojoseph8721 3 жыл бұрын

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

@philheathslegalteam 3 жыл бұрын

Yes

@ArifMatubber-km4nv 3 жыл бұрын

Beautifull

@user-ls4nn4jn9q 3 жыл бұрын

Wow man ❤❤❤👌

@kurohuagaming6652 2 жыл бұрын

why the last script wont work for me

@ignacioarancibia1682 2 жыл бұрын

The sublink?

@saikumarduggana2877 2 жыл бұрын

how to make curves for horizontal nav tabs

@GetFreeBitcoin 3 жыл бұрын

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 ......

@ambarsaxena7687 3 жыл бұрын

Fan request please clone TypeForm only front-end please 🙏🙏🙏🙏 Big fan 😢

@islamabdelhakiim7258 3 жыл бұрын

sir, may I ask you for this awesome background music's name?

@kishorep2325 3 жыл бұрын

will you claim copycat claim If i use this theme in my project and publish it.

@eh4756 3 жыл бұрын

I didnt understand what happened when you did overflow-x:hidden 7:42

@urellapoojitha8681 3 жыл бұрын

Sir when we code last javascript code it's not working can u pls explain

@TYLER-ol8fe 3 жыл бұрын

nice

@OnlineTutorialsYT 3 жыл бұрын

Thanks

@bunheng8553 3 жыл бұрын

first 1 minute commend

@zhen_00 Жыл бұрын

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.