Animated Nested Accordion | Tree View | Side Navbar | UI Design

Animated Nested Accordion | Tree View | Side Navbar | UI Design | HTML, CSS & JavaScript

Рет қаралды 5,336

Күн бұрын

Пікірлер: 20

@myrinaDM 7 ай бұрын

Again, YOU are the best of the best!!! You are very dedicated, competent and kind. I wish to rich your level one day! Tank you for your help.

@CodingDesign 6 ай бұрын

I'm not that great as you think I'm still learning and more ahead of me. But I do appreciate you think so.

@derekjscott1 4 ай бұрын

outstanding!

@CodingDesign 4 ай бұрын

Glad you like it!

@itspawanpoudel Жыл бұрын

Congrats bro for 1k subs!

@CodingDesign Жыл бұрын

Thank you 😀. It was all possible because SUBSCRIBERS (like you) who ❤ & supported my content kept me motivating to create more content. Once more thank you so much 🙏🙏.

@HulkNeon 3 ай бұрын

Amazing! How many hours have you spent to write all this code?

@CodingDesign 2 ай бұрын

In KZbin, its seems just few minutes. But It takes lots of time and energy. I Think it took several hours and to create video, few days.

@eunicegabayan8781 6 ай бұрын

Can you try in a long text with a small width like 250px only, if the line are still connected on the 2nd submenu.

@CodingDesign 5 ай бұрын

If you have long text then there are 2 options: You can use 1️⃣option: text-overflow: ellipsis; 2️⃣option: white-space: nowrap; 🙏 Please try these CSS properties.

@manojkalal7110 Жыл бұрын

How can I add hyperlink to the last level of the hierarchy? (i.e. add a hyperlink to user.jpg)

@CodingDesign Жыл бұрын

If you want to use hyperlinks instead of "Plain Text" you can give text you wanna give And with CSS, you need to give separate styles for anchor tag ().

@booraqpegazus1002 Жыл бұрын

hi, euh please how to delete the part of vertical ligne after the last child witch is in plus? I explain: here is the | folder (ul) | |----here is the last file(li) |

@CodingDesign Жыл бұрын

For that we need totally different approach & need to change overall codes. We can watch this KZbin video. 🎬 kzbin.info/www/bejne/qKeudKZ-iJpsZtE

@jorgeaugusto30 Жыл бұрын

The animation has unexpected behavior, to improve this part of the code, replace this line: target_list.style.maxHeight = target_list.style.maxHeight ? null : '100vh'; with this one: target_list.style.maxHeight = (target_list.style.maxHeight ? '' : target_list.scrollHeight + 'px'); Also keep in mind that while this will make the animation smoother, it will also create problems with subfolders. But I leave this logic exercise for you guys to work out. :)

@CodingDesign Жыл бұрын

I'm sorry to say this but When I was creating this video I did try same "scrollHeight" code. Although you'll be able to get smooth animation but there arise another problem. ⚠When you click specific folders you won't be able to get proper height. 📢So I did try this code in this video & sacrifice smooth animation. If you guys have any better solutions then let me know.