Unter Asp.Net Core
MVC, Webforms und Webpages gibt es keine direkten Elemente zum Erstellen eines
DropDown Menüs.
Die Erstellung von
Menüs, Dropdown, Hamburger Menüs, und Listen findet man aber immer und Css und
JQuery in Plattformen wie W3Schools.
Es ist hierfür
nicht notwendig auf Telerik Paralles, DevExpress oder ComponentOne auszuweichen.
Hier die Lösung für
das DropDown-Menü in einer Asp.Net MVC Core Anwendung.
Das Menü in der
standard Asp.Net Core Anwendung eingebettet sieht wie hier aus.
Die Anpassung findet
rein über CSS Casscaded Styles Stylsheets statt.
In Asp.Net einfügen
Zum Einbetten in
Asp.Net gibt man den Css Style Block in der Datei Views/_Layout.cshmtl im
<head> bereich ein.
Styles einfügen
Die Style Tags
wurden mit dem mynav_ Kürzel erweitert, da ansonsten mit der standard- navbar
eine Überlagerung stattfindet.
Diesen Style Code
muss man vor der Navigationbar einfügen. Normalerweise fügt man diese Css
Anweisungen in den Head Bereich ein
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.mynav_navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.mynav_navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mynav_dropdown {
float: left;
overflow: hidden;
}
.mynav_dropdown .mynav_dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.mynav_navbar a:hover, .mynav_dropdown:hover .mynav_dropbtn {
background-color: red;
}
.mynav_dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.mynav_dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.mynav_dropdown-content a:hover {
background-color: #ddd;
}
.mynav_dropdown:hover .mynav_dropdown-content {
display: block;
}
</style>
|
Div Classes
anwenden
Und die Menü-Punkte in der Navigationsbar tauscht man mit
dem neuen Code aus.
Wichtig ist dabei, dass alle Elemente, die auf das neue
Navigation Menü reagieren sollen, das kleine Kürzel mynav_ vorangestellt haben.
In der Standard Asp Anwendung ist schon unter css eine
Navigationbar navbar vorhanden. Man kann auch diese anpassen.
|
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">AspNav</a>
</div>
<div class="mynav_navbar">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
<a href="#news">News</a>
<div class="mynav_dropdown">
<button class="mynav_dropbtn">
..
<i class="fa fa-caret-down"></i>
</button>
<div class="mynav_dropdown-content">
<a asp-area="" asp-controller="Home" asp-action="About">About</a>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
</div>
</div>
</div>
</div>
</nav>
|
Ein Video Tutorial hierzu
https://www.youtube.com/watch?v=LOgs-fvImV0
Den Css Code zur Navigation Dropdown Menü findet man
unter
https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp