Dropdownmenü automatisch erweitern lassen.

[Beer]

Hallo zusammen,

ich arbeite zurzeit an einer Intranetseite. Dabei habe ich zunächst ein Dropdownmenü wie im folgenden Video erstellt: https://www.youtube.com/watch?v=G1DJqPmp4ZU.

Nun Möchte ich die Möglichkeit, mehrere Menüpunkte hinzuzufügen ohne diese in HTML schreiben zu müssen. Also eine Art Formular, in dem ich Menüpunkt, Untermenü, Name, und bestenfalls Link einfügen kann, und dann automatisch die Menüpunkte angepasst/hinzugefügt werden.

Mein Gedanke wäre dabei gewesen (kenne mich aber nicht wirklich aus), dass durch ein Formular eine .html Datei erzeugt wird, welche die neue Unterseite wird. (Würde dabei mein Grundgerüst einfügen) Zusätzlich soll eine .txt oder .js Datei mit den, für das Menü relevanten Informationen (Link usw.) erstellt werden. Diese Datei wird anschließend über ein script ausgelesen und in meine menu.js Datei eingefügt, in welcher das HTML-Script für das Menü liegt.

Der Hauptgrund dafür ist, dass die Seite auch von Personen erweitert werden soll, welche keine Kenntnisse in HTML haben.

Ich hoffe ich habe alles verständlich beschrieben.

Danke im vorraus.

hier meine menu.js datei, welche ich in meine Unterseiten lade, um bei Veränderungen am Menü nicht jede .html seite einzeln anpassen zu müssen. (Benennung wurde verändert da Privat und so.)

document.write(`
<p>


<!--Sidebar-Menü-->

<div class="wrapper">
            <nav>
            <ul class="menu-area">
                <li><a href="index.html"><strong>Startseite</strong></a></li>                 

                <li><a href="#"><strong>Punkt1</strong></a>                                       
                    <ul>
                        <li><a href="Übersicht1.html">Übersicht1</a></li>
                        <li><a href="#">Übersicht2</a>
                            <ul>
                                <li><a href="Unterseite.html">Unterseite</a></li>
                            </ul>
                    </ul>
                </li>


                <li><a href="#"><strong>EG</strong></a>                                                     
                    <ul>
                        <li><a href="Übersicht2.html">Übersicht2</a></li>
                        <li><a href="#">OPD</a>
                            <ul>
                                <li><a href="Kamera_OPD1.html">Kamera OPD 1</a></li>
                                <li><a href="Kamera_OPD2.html">Kamera OPD 2</a></li>                                               
                            </ul>
                        </li>
                    </ul>
                </li>


                <li><a href="#"><strong>1.OG</strong></a>                                                   
                    <ul>
                        <li><a href="#">Bau1</a></li>
                        <li><a href="#">Bau2</a>
                            <ul>
                                <li><a href="#">OPD1</a></li>
                                <li><a href="#">OPD2</a></li>
                                <li><a href="#">OPD3</a></li>                        
                            </ul>
                        </li>
                    </ul>
                </li>


                <li><a href="#"><strong>2.OG</strong></a>                                                   

                </li>

                <li><a href="Formular" style="font-size: 20px">Formular</a></li>          
<!--Hiermit soll sich ein PopUP o.ä. öffnen, über welches ich die Informationen eingeben kann.-->


            </ul>
            </nav>
        </div>
</p>

`);