Pure CSS tree view with custom tree icons

Рет қаралды 18,278

Жыл бұрын

In this tutorial we'll be creating a pure CSS solution to implement a tree view structure. This is a very common structure and typically requires javascript in order to fully complete. In this CSS only solution we'll have customizable tree icons, use pseudo elements for the 'tier' legs and arms along with several tricks along the way!
💖 SUBSCRIBE (Please) 💖
kzfaq.info?s...
🔗 Links 🔗
Pseudo Elements Tutorial: • Before & After CSS Pse...
CSS Positioning: • CSS Positioning Tutori...
⌚Timestamps⌚
00:00 Intro
00:01 Setting up the HTML
05:05 The magic of details & summary
12:30 Adding the styles for the arms and legs with pseudo elements
23:30 Setting up custom icons for the collapsed and open states
31:26 Reminding you to SUBSCRIBE ALREADY
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #html #treeview

Пікірлер: 43

@tri5431 Жыл бұрын

Thanks so much ! I needed an additional line in the css, summary {list-style: none;}, to make the disclosure triangle go away, but otherwise, worked like a charm. Very much appreciated.

@ayushkushwaha171 8 ай бұрын

I had this same scenario come into my work today, your tutorial really helped, thanks Andrew!

@hulooloo 6 ай бұрын

The perfet tutorial I'v search for tree UI! Thanks Andrew.

@enkiimuto1041 27 күн бұрын

You're such a good teacher that I don't even need to do this on css but i watched it anyway. PS: good music on the intro

@JustMe-zu2ml Жыл бұрын

Very cool. Thanks Andrew!

@shubhamambhore7207 Жыл бұрын

Thanks for all the helpful information 😍

@user-zl6zm9xe5b Жыл бұрын

Great video and explanation. Thanks

@NedumEze Жыл бұрын

Amazing creativity. Thanks Andy

@FollowAndrew Жыл бұрын

My pleasure!

@tanaysurya Жыл бұрын

This was helpful!

@IAmOxidised7525 4 ай бұрын

Man you are a life saver

@Levendo 3 ай бұрын

This video helped me a great deal. Thanks a lot, good sir.

@wtdosama Жыл бұрын

You are the best for me thanks

@vishaljaiswal5346 5 ай бұрын

Really helpful

@antonbrianfejervilchez3507 Жыл бұрын

great video!

@FollowAndrew Жыл бұрын

Thanks!

@pazir_r 5 ай бұрын

thank you

@aerkain 6 ай бұрын

good work

@GerritforBazeja Жыл бұрын

Thank you for the nice video, again and your calm way of explaining. Can you make it also suitable for mobile.

@NedumEze Жыл бұрын

Sorry Andy, did you forget to make the code available for download? I'll be helpful if you do

@DeepakNegiSunny Жыл бұрын

Hello sir, is there any way we can make that recursive by note repeating the template (li), which repeats itself until last child 😊

@abidrahim7607 Жыл бұрын

This. is. amazing. I would have gone the hard way with JavaScript, but this is so so much better. Thank you sir!

@abidrahim7607 Жыл бұрын

Subb'd

@FollowAndrew Жыл бұрын

Nice!

@user-hc3cn8jw1o 6 ай бұрын

How well does this approach support screen-readers and accessibility?

@kajalmondal9745 Жыл бұрын

Please upload regularly sir. Miss your videos

@FollowAndrew Жыл бұрын

I do plan on more regular uploads!

@wtdosama Жыл бұрын

We need more full website with css grid (grid-template-areas)

@edsonperycles5581 Жыл бұрын

How would we do this in React ?

@balex259 Жыл бұрын

Can you share the code from intro?

@anonimus11236 Жыл бұрын

Source code? I cant get rid of the summery::marker

@blackguy-ij7ij 10 ай бұрын

Is this ada friendly?

@rayyanabdulwajid7681 4 ай бұрын

I have done this without css checkbox or javascript using only html details and summary

@stevecarter8810 2 ай бұрын

Including the lines and icons?

@wikituby 8 ай бұрын

source code please

@MateStier-hd4nv Жыл бұрын

Can i get the code?:)

@jeweltalukder3296 Жыл бұрын

source code?

@brotinbiswas8348 Жыл бұрын

This is amazing and so simple. I like it....👍👍👍👍 But one thing :- Turn off the default triangle " details summary::-webkit-details-marker { display:none; }" didn't work for me. I believe the following approaches will work. ul summary::marker { content: none; }

@josevelez6865 Жыл бұрын

I found this also worked: .tree summary{ list-style: none; }

@Gyannea Жыл бұрын

I had the same issue. But the content:none; worked. Disturbing for standardization. I am using the latest Chrome browser, too.

@Kennerdoll 4 ай бұрын

same here

@ai_serf 3 ай бұрын

MDN is pretty bad too. the documentation on summary doesn't cover this....