# schwebendes menu



## Sydney sina (1. Januar 2018)

hallo ich werde wahnsinnig für meine webseite wollte ich gerne eine menüeleiste wie auf folgender webseite

https://www.zella.de/code/schwebende-bilder.html

ich will lediglich diese menueleiste, den rest der seite wollte ich wenn möglich stur mit einer einfachen tabellenstruktur aufbauen die sich dann darunterschiebt aber ich finde nirgends infos wie ich das aufbaue!

könnte mir jemand helfen?

würde mich echt freuen, eure sydney sina


----------



## EuroCent (1. Januar 2018)

Wenn Ich das richtig sehe verwendet die Seite Bootstrap zumindestens was die Navigation angeht.

Vielleicht hilft dir das: https://getbootstrap.com/docs/4.0/components/navbar/


----------



## Sydney sina (1. Januar 2018)

ne leider nicht wirklich. habe das menu als ul menu wie folgt eingerichtet


```
<html>
<head>
<title>
</title>
</head>

<body>
       <ul>Home</ul>
      
       <ul>Die Spedition
          <li>über uns</li>
      <li>das Team</li>
          <li>History</li>
       </ul>

       <ul>Blog</ul>

       <ul>Galerie
          <li>Convoy</li>
      <li>Sonderlast</li>
          <li>Diverse</li>
       </ul>

       <ul>Galerie</ul>
</body>
</html>
```

was mir fehlt ist die css definition wie ich daraus ein ausklappmenue sowie die funktion des permanenten daseins und unterrutschens der rest der webseite beim scrollen mache!


----------



## EuroCent (1. Januar 2018)

Schau mal hier ob dass was für Dich ist: https://codepen.io/EuroCent/pen/NXgGmR


----------



## Sydney sina (1. Januar 2018)

so habe das mal auf den groben rahmen meiner webseite übertragen.
zu sehen hier

http://sydneysina.bplaced.net/

fehler 1: wenn ich auf die ausgeklappten links gehe sehe ich den übergeordenten link nicht mehr
fehler 2: der hover balken im ausklappmenü ist zu breit ich sehe allerdings nicht wo ich das einstelle
fehler 3: der wohl wichtigste die links bleiben nicht oben wenn ich scrolle. beim scrollen will ich ja nur die tabelle unter die links schieben und die links immer sichtbar haben


----------



## Sempervivum (1. Januar 2018)

Fehler 1: Beim Hover auf li gibst Du dem a-Element die Hintergrundfarbe weiß, daher ist die weiße Schrift nicht mehr sichtbar. Lösung: Gleichzeitig die Farbe der Schrift auf schwarz setzen:

```
ul#navigation li:hover > a {
    background: #fff;
    color: black;
}
```


----------



## EuroCent (1. Januar 2018)

1. Du musst dann entsprend die :active/:visited mit CSS anpassen 
2. :hover ist das Stichwort
3. Naja Ich habe dir Bootstrap gezeigt, dort kannst Du beispielsweise die die Sticky-Navigation verwenden und deren CSS nach deinen Wünschen anpassen.

Du solltest selbst einwenig mit Arbeiten 

Stichwort zum Fixieren dass die Navbar oben bleibt ist: position: fixed


----------



## Sempervivum (1. Januar 2018)

fehler 2: Wenn man einem Element eine Breite zuweist, wird ein Padding dazu addiert. Damit das Element genau in das Elternelement passt, musst Du das Padding subtrahieren:

```
ul#navigation ul li a {
    background: none;
    padding: 7px 15px;
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    border: 0 none;
    float: left;
    clear: both;
    width: calc(100% - 30px);
}
```


----------



## Sydney sina (2. Januar 2018)

Erstmal Danke für deine Geduld. Für mich ist CSS grösstenteils noch fremd so das ich ohne ein konkretes css quellcode bespiel nicht folgen kann. aber der tip mit fixed war das auschlaggebende element was ich gesucht habe. also noch mal erst mal vielen dank


----------



## Sempervivum (2. Januar 2018)

Freut mich, dass es jetzt funktioniert. Aber jetzt ist die weiße Fläche im Ausklappmenü zu klein. Der Grund ist, dass Du jetzt

```
* {
    box-sizing: border-box;
}
```
hast, damit erübrigt sich die Rechnerei mit calc und du kannst die Breite einfach auf 100% setzen.


----------

