Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
interaktive Dropdown Liste
#1
Question 
Hallo an alle da draußen,

ich sitze zurzeit an einer Dropdownliste, die sich für mich als Einsteiger als Herausforderung darstellt.
Da ich nun nach mehreren gescheiterten Versuchen nicht mein Glück gefunden habe, wollte ich mal fragen, ob mir hier einer helfen kann.

Und zwar geht es um folgendes:
ich habe mir eine Dropdownliste gebaut welche wie folgt aussieht:

   

Und hierzu der Code:

Code:
<div id="navi_rechts">
        <p></p>
        <p></p>
      
        <table>
                <tr>
                    <td>
                        <?php
                            echo "<a href=\"./index.php?id=0\" id=\"buttonstart\">Startseite</a>\n";   
                            echo '<br>';
                        ?>
                         
                        <?php
                            if(hasRight($link, "view_warenbestand"))       echo "<a href=\"./index.php?id=999\" id=\"button\">Warenbestand</a>\n";
                        ?>
                        <button class="dropdownbtn">Einbuchung
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="dropdowncontainer">
                        <?php
//                            if(hasRight($link, "create_einbuchung"))       echo "<li><a href=\"./index.php?id=1\">Einbuchung</a></li>\n";
                            if(hasRight($link, "create_einbuchung"))       echo "<li><a href=\"./index.php?id=9999\" id=\"ubutton\">Einbuchung</a></li>\n";
                            if(hasRight($link, "view_einbuchung"))         echo "<li><a href=\"./index.php?id=7\" id=\"ubutton\">Einbuchungsbewegung</a></li><li></li>\n";
                        ?>
                        </div>
                        <button class="dropdownbtn">Ausbuchung
                            <i class="fa fa-caret-down"></i>
                        </button>
                           
                            <div class="dropdowncontainer">
                            <?php
                           
                                if(hasRight($link, "create_ausbuchung"))      echo "<a href=\"./index.php?id=2\" id=\"ubutton\">Ausbuchung</a>\n";
                                if(hasRight($link,"view_ausbuchung"))        echo "<a href=\"./index.php?id=6\" id=\"ubutton\">Ausbuchungsbewegung</a>\n";
                                if(hasRight($link, "view_ausbuchung"))         echo "<a href=\"./index.php?id=45\" id=\"ubutton\">Ausbuchungsauswertung</a>\n";
                           
                            ?>
                            </div>

                           
                            <?php
                            if(hasRight($link, "create_einbuchung") && hasRight($link, "create_ausbuchung")) echo "<li><a href=\"./index.php?id=400\" id=\"button\">Korrekturbuchung</a></li>\n";
                            if(hasRight($link, "view_umbuchung"))          echo "<li><a href=\"./index.php?id=15\" id=\"button\">Umbuchung</a></li>\n";
                           
                            if(hasRight($link, "view_stellplatz"))         echo "<li><a href=\"./index.php?id=9\" id=\"button\">Stellplatzverwaltung</a></li>\n";
                          
//                            if(hasRight($link, "view_warenbestand"))       echo "<li></li><li><a href=\"./index.php?id=5\">Warenbestand</a>\n";
                         

                                if(hasRight($link, "view_geratemanager"))      echo "<a href=\"./index.php?id=10\" id=\"button\">Gerätemanager</a></li>\n";
                                if(hasRight($link, "betatester"))              echo "<a href=\"./index.php?id=42\" id=\"button\">Lieferschein</a></li>\n";
                                if(hasRight($link, "view_einbuchung") && hasRight($link, "view_ausbuchung")) echo "<a href=\"./index.php?id=43\" id=\"button\">Gegenüberstellung</a></li>\n";
                            ?>
                           
                           
                           
                            <button class="dropdownbtn">Tickets
                                    <i class="fa fa-caret-down"></i>
                            </button>
   
                            <div class="dropdowncontainer">
                           
                            <?php

                            if(hasRight($link, "betatester"))              echo "<li></li><li><a href=\"./index.php?id=300\" id=\"ubutton\">Ticket anlegen</a></li>\n";
                            if(hasRight($link, "betatester"))              echo "<li></li><li><a href=\"./index.php?id=301\" id=\"ubutton\">Offene Tickets anzeigen</a></li>\n";
                            if(hasRight($link, "betatester"))              echo "<li></li><li><a href=\"./index.php?id=302\" id=\"ubutton\">Ticket&uuml;bersicht</a></li>\n";
                            ?>
                            </div>
                           
                            <button class="dropdownbtn">Auswertungen
                                <i class="fa fa-caret-down"></i>
                            </button>

                            <div class="dropdowncontainer">

                            <?php  

                            if(hasRight($link, "view_auswertungen"))       echo "<li></li><li><a href=\"./index.php?id=500\" id=\"ubutton\">Auswertungen</a></li>\n";
                            if(hasRight($link, "view_kostenauswertung"))   echo "<li><a href=\"./index.php?id=8\" id=\"ubutton\">Kostenauswertung</a></li>\n";
                           
                            ?>
                            </div>
                            <?php
                            if(hasRight($link, "view_admin"))              echo "<li></li><li><a href=\"./administration/index.php?id=0\" id=\"button\">Administration</a></li>\n";
                            //if(hasRight($link, "view_ausbuchung"))         echo "<li><a href=\"./index.php?id=451\" id=\"button\">Test</a></li><li></li>\n";                   
                            ?>
                           
                       
                            <li><a href="https://www.myegv.de/lexicon/index.php?entry/43-anleitung-zur-verbrauchsmaterialverwaltung-it/" target="_blank" id="button">Hilfe</a></li>
                       </sl>
                    </td>
                </tr>
        </table>
    </div>

Und hier der JavaScriptteil:

Code:
<script>

var dropdown = document.getElementsByClassName("dropdownbtn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>


An sich funktionieren die einzelnen Dropdownmenüs schon ungefähr so, wie ich es haben will mit nur einer kleinen Ausnahme.

Es handelt sich nämlich darum, dass ich es gerne so haben will, dass wenn ich ein Dropdownmenü öffne sich das andere schließen soll sofern eins auf ist, also so gesagt, dass immer nur
ein Menü offen ist.
Aktuell sieht es nämlich noch so aus:

   

Wie man sieht, gehen die einzelnen Button über den Rand hinaus und ergeben somit kein schönes Gesamtbild.

Ich hoffe ihr versteht meine teils nicht professionelle Ausdrucksweise und verzeiht mir auch diese.

Vielen Dank im Vorraus. Big Grin
Zitieren
#2
Könntest du mir den Code posten der Im Browser ankommt , ohne den PHP Kram. Und dann bitte die CSS Datei auch. Wenn ich ein funktionierendes Beispiel habe ist es einfache dir zu helfen, weil so muss ich erst alles zusammen bauen, dass es so aussieht, wie bei dir
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste