CSS Navigation nur mit einem Bild?
Hallo,
weiß jemand wie ich eine Grafik (in dem Fall ein Logo) als Navigationsleiste einbaue? Wenn man über das Logo fährt soll sich eine Art Dropdown-Menü öffnen.
Schonmal danke im Voraus
1 Antwort
Vom Beitragsersteller als hilfreich ausgezeichnet
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
Packe dein Bild (am besten als Schaltfläche) mitsamt Linkliste in einen Container. Die Liste wird absolut zu ihrem Container positioniert, sodass darunterliegender Inhalt überdeckt werden kann. Außerdem wird sie, so lange der Nutzer die Maus nicht über den Container/den Button bewegt (hover) oder den Button/einen Link via Tastatur fokussiert (focus/focus-within), ausgeblendet.
HTML:
<div class="dropdown-container">
<button aria-controls="menu" aria-haspopup="true" class="dropdown-button" id="menu-button">
<img alt="Open certain navigation" class="dropdown-logo" height="200" src="logo.png" width="200">
</button>
<ul aria-labelledby="menu-button" class="dropdown-list" role="menu">
<li role="presentation"><a class="dropdown-link" href="#" role="menuitem">Link 1</a>
<li role="presentation"><a class="dropdown-link" href="#" role="menuitem">Link 2</a>
<li role="presentation"><a class="dropdown-link" href="#" role="menuitem">Link 3</a>
</ul>
</div>
CSS:
.dropdown-container {
position: relative;
width: 200px;
}
.dropdown-button {
background: none;
border: 0;
cursor: pointer;
}
.dropdown-logo {
height: auto;
width: 100%;
}
.dropdown-list {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;;
}
.dropdown-container:focus-within .dropdown-list,
.dropdown-container:hover .dropdown-list {
display: block;
}
.dropdown-link {
display: block;
}