A lightweight and easy-to-use CSS & jQuery plugin to generate a tree view navigation menu from HTML nested unordered list.
How to Create Tree View Navigation
1. Load the jQuery and Font Awesome into an HTML document.
<!--jQuery--> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!--Font Awesome--> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
2. Also include Tree Nav javascript and CSS files.
<!--Tree Nav CSS--> <link rel="stylesheet" href="css/tree-nav.css" /> <!--Tree Nav Js--> <script src="js/jquery.treenav.js"></script>
3. Create HTML nested unordered list for tree nav. Add the attribute data-type=”folder” to the parent li that has child ul.
<nav class="tree-nav default"> <ul class="main-items"> <li data-type="folder"> <a href="#1"> Main Item </a> <ul> <li><a href="#1"> Sub Item </a> </li> <li><a href="#1"> Sub Item </a> </li> --------------------------- --------------------------- </ul> </li> </ul> </nav>
4. Call the plugin into the jQuery document ready function to active the tree navigation.
$(document).ready(function(){ $(".tree-nav").treeNav(); });
That’s all! hopefully, you have successfully integrated this jQuery tree view navigation into your project. If you have any questions or facing any issues, feel free to comment below.
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.