schwebendes menu


#1
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
 
#3
ne leider nicht wirklich. habe das menu als ul menu wie folgt eingerichtet

HTML:
<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!
 
#5
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

Erfahrenes Mitglied
#6
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:
Code:
ul#navigation li:hover > a {
    background: #fff;
    color: black;
}
 

EuroCent

Erfahrenes Mitglied
#7
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

Erfahrenes Mitglied
#8
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:
Code:
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);
}
 
#9
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

Erfahrenes Mitglied
#10
Freut mich, dass es jetzt funktioniert. Aber jetzt ist die weiße Fläche im Ausklappmenü zu klein. Der Grund ist, dass Du jetzt
Code:
* {
    box-sizing: border-box;
}
hast, damit erübrigt sich die Rechnerei mit calc und du kannst die Breite einfach auf 100% setzen.