Back to Browse

Pure CSS tree view with custom tree icons

27.5K views
Nov 28, 2022
31:33

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) 💖 http://www.youtube.com/FollowAndrew?sub_confirmation=1 🔗 Links 🔗 Pseudo Elements Tutorial: https://www.youtube.com/watch?v=0eyCgyWbcHE CSS Positioning: https://www.youtube.com/watch?v=UO8ed-JB4So ⌚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) ➞ https://twitter.com/followandrewedu #css #html #treeview

Download

0 formats

No download links available.

Pure CSS tree view with custom tree icons | NatokHD