Projekte-Tree

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Folder Tree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
    <style>
        /* General styles */
        body {
            font-family: Arial, sans-serif;
            margin: 30px;
            top: 100px;
        }

        h1 {
            text-align: center;
        }

        #folderTree {
            border: 10px solid lightgrey;
            padding: 10px;
            margin: 20px auto;
            width: 70%;
            background-color: transparent;
            border-radius: 50px;
        }

        /* Custom style for selected nodes */

        .jstree {
            background-color: white !important; /* Set background to yellow */
            padding: 2px 4px; /* Add some padding for better visuals */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Optional: subtle shadow */
            color: black !important; /* Ensure text is visible */
            border-radius: 80px; /* Add rounded corners */
        }


        .jstree-clicked {
            background-color: yellow !important; /* Set background to yellow */
            padding: 2px 4px; /* Add some padding for better visuals */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Optional: subtle shadow */
            color: black !important; /* Ensure text is visible */
            border-radius: 80px; /* Add rounded corners */
        }

            /* Optional: adjust hover effects */
            .jstree-clicked:hover {
                background-color: gold !important; /* Slightly darker yellow on hover */
                border-radius: 80px; /* Add rounded corners */
...