 |
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ü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. 
|
interaktive Dropdown Liste