Hallo zusammen,
ich komme aktuell nicht so richtig voran... In einem neuen Projekt möchte ich eine Startseite für die Mitarbeiter erstellen, die Sie "erblicken" wenn Sie ihren Browser starten.
In dieser Startseite soll eine Navigationsleiste mit unterschiedlichen Menüpunkten, darunter auch Dropdowns und in den Dropdowns auch noch Dropright.
Die Nav-Bar an sich ist kein Problem, auch ein Dropdown in der Navbar stellt jetzt nicht die Probleme dar, aber innerhalb einer Dropdown kann ich keinen Eintrag zu einem Dropright machen mit weiteren Menüpunkten.
Was ich also machen möchte ist, eine Menüleiste mit Dropdown und verschachtelten Dropright Einträgen, welche aber immer auf der Startseite als "Tab" geöffnet wird, so dass die Navigationsleiste immer da bleibt.
Hier ist mein funktionierende Code mit Dropdown, aber ohne Dropright
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Startseite</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Exo+2&display=swap" rel="stylesheet">
<style>
body {
background-color: #E4E8F1;
font-family: 'Exo 2', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Intern</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Extern</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
<script>
</script>
</body>
</html>
Alles anzeigen
Frage ist, wie kann ich jetzt beispielsweise den Eitnrag Link 1 auch als dropright erstellen, mit weiteren Einträgen??
Danke,
MfG
Erik