CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.
HTML5, CSS3 and JavaScript
The Fine Art of Web Development by Martin Ivanov
This is a follow-up to one of my most popular posts, which I have been planning for quite some time. So, here it is – the new CSS3-only driven treeview, with updated looks and support for selection of nested nodes. And 5 lines of optional JavaScript in case you would like to use the checkbox nested nodes selection.
On this page you will find a working example, as well as the HTML, CSS3 and JavaScript source code listing.
The solution is CSS3-heavy, and has been tested on Firefox, Chrome, Opera and Internet Explorer 9+. In case you are interested in other atypical uses of checkboxes and radio buttons for building of interactive UI widgets, you may want to check this post.
Related Posts and Links
- Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets
- HTML5, CSS3 and JavaScript Pie Charts
- Animated HTML5 Windows8 Tiles
- HTML5, CSS3 and JavaScript Experiments and Insight
- Semtex HTML5, CSS3 and JavaScript UI Framework
- HTML and PHP Clicks, Hits and Downloads Counter System
- Animated CSS3 Notifications Bar
- Ribbon Bar Component
- CSS3 Treeview
- CSS3 Tabstrip
- CSS3 Slides Viewer
- Skinnable CSS3 Metro Form UI
- CSS3 Metro Dropdown Styling
- JavaScript Lazy Loader for Images
- Autocomplete and Autosuggest Widget
- Table Painter Widget for WYSIWYG Web-based Editors
Categories and Tags
Links
- Vuecidity - UI component library for VueJs
- Ribbon component for VueJs
- Ribbon component for jQuery
- Martin Ivanov portfolio and personal website
- HTML5, CSS3 and JavaScript experiments and insight
- RESTFul API for Encyclopaedia Metallum
- Avid Eleven Rack presets and rigs
© 2006 - 2023 Martin Ivanov