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

Answer 1

[regex9]

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;
}