Sidebar Menu Using Html CSS & Javascript | Curved Outside in Active Tab
HTML-код
- Опубликовано: 29 июн 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
------------------
Also Wath
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 ...
------------------
image source : www.pexels.com/
------------------
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
Click For More : ruclips.net/user/OnlineTutorials4Designersvideos?sub_confirmation=1
🎩
To be honest, everyday I start watching one of your random/latest video to get inspiration. I want to be a Full Stack Developer and for the Front-end I always want to imitate you for beautiful animations and designs. You're the best 💯
you can achieve the same thing with before and after instead of adding extra b tags
Will you please discribe your trick in little shott note? Ty in advance
@@usmanraja126 the owner of this channel has published a new video using before and after you can just go ahead and watch that
@@namhoang5550 okay, buddy. 👍👏
@@namhoang5550 did he post it before or after?
@@riccello please check the pinned comment
stunning art from this god of css, keep doing this georgeous designs. I've seen all your videos since two years ago until today and i will continue to wacht them. Greetings for you, i love your work
This is the only channel i like about programming, esthetics and etc 💖💖💖💖
Glad you liked my channel
Watching it changing from a text to extraordinary is amazing
i think you can make it better, for example using ::before / ::after with position: absolute to make the rounded corners of the selected element of the menu, to avoid using extra html elements cause they are just styleshy feature and not part of the page content, or make the toggle menu button work with a checkbox input, and make the list menu manage the selected element with radio inputs, to avoid using js features related just with visual
I like the fact that I can easily understand your coding without you saying a single word.
GENIUS. You never cease to amaze me. THANK YOU!
I´m so glad for this channel
how elegant it turned out
you're a big lad!!
You are amazing sir.
Apse inspire hoke mene bhi aapna channel open kiya h pr subscribers hi nahi ate
Give me heart sir 😊♥️
Mind blowing coding sir Zakas 🔥
I am in love with it tutorial bro, keep going pls.
Thank you for sharing - it will help me. I also think that you should put the burger menu in navbar, first position (before profile).
Very amazing
Thinking from Thumbnail
I really like your videos, thank you ❤️
Am really impressive. So many details for menu. tag in the end was unexpected decision.
Great job. Thanx for video
Without having a separate tag you can use the pseudo tags "::before" and "::after" to get the outside curve.
yes, it's the same i thought
Congrats bro.And thx for the tutorial 👏
Keep going bro...We will support u
Wonderful tutorial! Thanks! 😁😁
just put :: after :: before
why using two s
Watch here ruclips.net/video/pubrK_AmqRg/видео.html
Your UI work is always brilliant, I'm learning a lot
Glad to hear that!
Pro Players
I love this channel ❤️
Stunning! 🤩
Thank you!! 😊
Thanks for your work 💓💓💓
شرح رائع 👏🏻🌹
god-level skills 🚀
Another Way : ruclips.net/video/pubrK_AmqRg/видео.html
Use material theme in the editor. The dark pink color of html tags look bad and very hard to read. Use contrast or material theme.
Where is your telegram link?
Why you dont use your voice for making this tutorial easy ?
and link all files from lessons
the piano name ????
Well that's one way of doing it... what a journey
That's spectacular 😱
is there any sample for the same in React?
Super bro, up to now i have no idea that we can do outside curves border
what theme are you using on the visual studio code
that's amazing
thanks bro ❤
Nice video, new to coding. Quick Question: The Menu works great when there are dead links all the transitions are smooth icon to icon, but when I link to another page/html file within the same directory the menu no longer functions. It becomes static on one icon, any help or examples of a two page layout would would be greatly appreciated.
i am also facing the same problem ,please help
this is vary helpful for me...
Active element, before element and after element condition css simple
AMAZING BRUH 🔥
This is very nice but can you do it with an animation when you switch the active list item?
THANK YOU FOR COMMENTS WITHOUT VOICE =)
I LIKE IT !
That's amaaazingggg !!!
I wanted to subscribe, but i'm already subscribed. Seems like the old me was wise.
What is your vscode the???
Div's in 2021?
Not better, when we will be using the HTML5 selectors such as: nav, section etc. ?
I think we use semantic elements interchangeably with non semantic elements
No point in tutorials, most of those other selectors are really just for SEO.
Div is very versatile
I learned best practice: it’s much better to copy-paste word “list” than writing it
I'd understand a lot more if he could explain while coding. Anyways good job brother, love your grind.
I think these tutorials are meant to people who already know HTML, CSS and JS, so the mark-up, classes and code should be easily understood, and it's more about how to put a solution together.
@@OneAndOnlyMe I have just started learning front-end development last month only. You know CSS can get a bit overwhelming at times . Maybe, I have to put in more time beore I can fully understand the concepts watching just once. Any tips for me (a newbie)?
I don’t know if you read the comments, but you could use
for (let listItem of list) {
listItem.addEventListener(“click”, () => list
.filter(li => li !== listItem)
.forEach(li => li.classList.remove(“active”))
listItem.classList.add(“active”)
)
}
It would be simple, understandable, and more useful in further js code. Also, sorry for text formatting, I’m typing it on phone at 3 AM literally
You can skip filter...
list.forEach(item => item.addEventListener('click', () => { list.forEach( li => li.classList.remove('active')); item.classList.add('active'); }));
This is gonna be good mark my words 🙂
You guys are legends
This is superb 👌
*Nice bro well done..!*
Awesome Sir Ur are Great (y)
good, solo es paciencia y ver bien
Please can you upload the recordings on RUclips.
Wow, a ma zing, love for this video
How about dealing with textured background image instead of solid blue color?
You should start a free of cost css tutorial. YOU WILL GROW EVEN FASTER SIR PLZ.
Wow amazing thank you so much
No speaking, no explanation, we can't learn just by watching it!!!
It's like seeing a magic trick, we need to know how and why you arrived at such a result.
This is less of learning and more of projects making channel. For learning u can watch many beginners videos on youtube and after that u can start making projects from this channel.
Thank you very much my friend!!!
I don't care the comments where they say "You can do this better", I really tahnk you for this!!
I love how he uses the mouse to communicate with the audience
How come this music sounds really good no matter how much you increase or decrease speed? Is this the beauty of this particular piece or all piano piece have this intrinsic property???
if you change the white-space = normal to nowrap the sing out will look better
thank you so much !
Your Fan is here ❤️😊
very detail thank creator very much
YEYEYEYEYEYE😍😍😍😍
Hello,
The app design is nice, but the b tags are bordered in mobile view.
King online tutorials Nice kanal
You are so close to 500K sub lets goooooooooooo
These tutorials would be more clear and better with your voice or some sorta subtitles, plz explain while doing these tutorials.....otherwise your vidoes are really great
You gained a sub
galing naman
Perfect.
Telegram group : t.me/onlinetutorialsYTb
Can you make a next lavel about us page in html and css????
Sir,, I didn’t found your app link. Please send me your app link😭😭😭
Sir please make a video on making colourful code box.
15:26 why de Sing Out text goes down when it closes?
Sir, if I want to be a front end developer with your channel, where do I start?
That’s really awesome 😍
I very like this channel sir
thank you bro
Nice one Sir
how can I make the menu to the right fit the remaining width of the screen
Eres adictivo 😍
Awesome Video. Thanks alot.
AMAZING
you are the best
Awesome,,, really nice 👍👍👍
Thank you! Cheers!
I like you man ❤️
Cool, it would be cooler with animations
Amazing video bro, but this music scares me especially when I watch these videos, during the night || xD
If I may ask, what app/program are you using for your coding?
VsCode with the extension live server(what you make in the vscode shows on the browser)
Thank you sir.
Nice work bro
amazing creative;)!!!
How do you autoload the right page?
What is the name of first effect on your intro
I would like to see more video lessons about jquery
How to add text next to image like that