• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigations-Menü für Smartphone erstellen

marcelgerard

Mitglied
Moin Leute,

ich würde gerne auf meiner neuen Seite für Desktop und Smartphone die typische Navigation einbauen. Da die Smartphones die Nase vorne haben, würde ich auch die Desktop Version mit so einem Icon bei dem sich die Navigation ausklappt einbauen. Sieht zudem auch nicht schlecht aus. Genauso wie hier.

Hab aber gelesen das die meisten Navigationen dieser Art mit JavaScript umgesetzt werden und das kann ich leider noch gar nicht. Hab schon gegoogelt und paar Tipps mit CSS gefunden, aber so wirklich durchgeblickt habe ich da nicht. Vielleicht hat jemand einen Tipp für mich oder Vorlage oder sonst was. Ist es mit JavaScript den schwer?

LG Marcel
 
Werbung:
Hier mal ein einfaches Beispiel. Mit :focus und :active Funktionalität als Singlepage.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin:0;
padding:0;
}
nav {
position:relative;
}
nav  ul  {
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-99999em;
width:100%;
background:#333;
}
nav:before {
  display: block;
  content:"|||" ;
  padding: 10px; 
  background:#a33;
  color:#fff;
cursor:pointer;
font-weight:bold;
}
nav:focus ul , ul:active  {
left:auto;
}
nav:focus ~ p:before , nav:active ~ p:before {
content:"X";
display: block;
position:absolute;
top:0;
left:0;
right:0;
background:#a33;
color:#fff;
font-weight:bold;
cursor:pointer;
padding: 10px; 
}
nav a {
display:block;
padding:5px;
color:#fff;
text-decoration:none;
}
nav a:hover {
background:#a33;
}
nav a:active {
background:#09c;
}
p { padding:250px;}
</style>
<title></title>
</head>
<body>
<nav tabindex="0">
<ul>
  <li><a tabindex="0" href="#home">Home</a></li>
  <li><a tabindex="0" href="#kontakt">Kontakt</a></li>
  <li><a tabindex="0" href="#impressum">Impressum</a></li>
</ul>
</nav>
<h2 id="home">Startseite</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
<h2 id="kontakt">Kontakt</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
<h2 id="impressum">Impressum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</body>
</html>
 
Hi @djheke, ich hab da jetzt nicht so durchgeblickt, konnte aber eine andere Seite finden, bei dem es fast geklappt hat. Also die Grundstruktur steht und wenn ich am Desktop und am Smartphone auf den Button klicke, öffnet sich das Menü. Einzigen beiden Probleme sind die bisher aufgetaucht sind, dass sich das Menü nicht scrollen lässt. Wenn es also mehr Inhalt als der Bildschirm hat, geht es nicht scrollen und das beim Öffnen des Menüs der gesamte Hintergrund der Navigations-Leiste mit aufgeht Also "as-nav-background" ist immer der Hintergrund. Wäre aber besser, wenn sich das Navi ohne das öffnen könnte. Da ich lokal baue, kann ich die Seite nicht zeigen, aber hier gerne mal der Code:

Vielleicht hast du oder jemand eine Idee oder erkennt den Fehler oder was man ändern muss.

HTML:
HTML:
<header class="as-nav-background">

<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label"><span>&#9776;</span> Navigation</label>

<nav>
  <ul>
    <li><a href="#" title="Nach Hause">Home</a></li>
    <li><a href="#" title="Nach Hause">Produkte</a></li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
    <li><a href="#" title="Nach Hause">Home</a></li>
    <li><a href="#" title="Nach Hause">Produkte</a></li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
  </ul>
</nav>

CSS:

Code:
.as-nav-background {
        background-color: #fff;
        width: 100%;
        position: fixed;
        z-index: 999;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
}

input#responsive-nav,
label.responsive-nav-label {
        display: none;
}

label.responsive-nav-label {
        position: relative;
        display: block;
        cursor: pointer;
}

nav {
        position: absolute;
        top: -9999px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
    position: relative;
    top: 0;
  }
 
Werbung:
Hmm, also an sich geht natürlich "absolute" aber die Navigation soll schon fixiert bleiben, dann wäre diese Variante nicht so geeignet, zu dem sie ja dann ja auch nicht am Ende des Navigation endet sondern die Seite weiter endlos scrollt. Ich denke mal um es so ähnlich wie hier hinzubekommen, hilft nur JavaScript, aber davon hab ich leider keine Ahnung :-(

Vielleicht gibt es da Ne Vorlage oder ähnliches?
 
Hab ich natürlich alles schon getestet und die Seite mir einem langen Text gefüllt, aber ist genauso. Ist nicht das was ich gerne hätte. Ich hab mir schon die Finger wund gegoogelt, aber eine Lösung hab ich nicht richtig gefunden. Finde aber auch keine Vorlagen mit JavaScript. Bezweifle zwar das ich da dann durchblicken würde, aber ich lerne immer gerne dazu.
 
Aber um das Thema was unter der Navigation ist geht es ja an sich gar nicht. Ich will ja einfach nur eine Navigation bauen, die wie auf dieser Seite ist. Ich klicke auf das Menü-Zeichen und es öffnet sich ein Menü. Das sollte natürlich scrollbar sein, wenn es länger als die Bildschirmfläche ist und das scrollen darf gerne enden, wenn das Menü zu Ende ist. Wie eben auf der verlinkten Seite.

Das was du jetzt vorschlägst löst in meinen Augen ja nicht das Problem oder bewirkt das Ziel was ich habe. Oder reden wir jetzt völlig aneinander vorbei?
 
Werbung:
Also dein letzter CSS-Code hat schon mal deutlich mehr bewirkt, aber ist leider noch nicht das gewünschte Ergebnis. Jetzt hab ich zwar das aufklappbare Menü und es scrollt auch, aber ist noch nicht perfekt. Wenn ich z.B scrolle, dann scrollt auch das Menü-Icon mit, welches aber stehen bleiben soll. Und was natürlich blöd ist, dass jetzt eine Scrollbar zu sehen ist, die soll natürlich nicht zu sehen sein. Hier nochmal mein aktueller neuer Code:

HTML:
HTML:
<header class="as-nav-background">
  
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label"><span>&#9776;</span> Navigation</label>

<nav>
  <ul>
    <li><a href="#" title="Nach Hause">Home</a></li>
    <li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
      <ul>
        <li class="submenu"><a href="#" title="Unser Obstsortiment">Obst</a>
          <ul>
            <li><a href="#" title="Unsere Ananasauswahl">Ananas</a></li>
            <li><a href="#" title="Unsere Apfelauswahl">Äpfel</a></li>
            <li><a href="#" title="Unsere Birnenauswahl">Birnen</a></li>
            <li><a href="#" title="Unsere Bananenauswahl">Bananen</a></li>
          </ul>
        </li>
        <li class="submenu"><a href="#" title="Unser Gemüse">Gemüse</a>
          <ul>
            <li><a href="#" title="Unsere Kartoffelauswahl">Kartoffeln</a></li>
            <li><a href="#" title="Unsere Salatauswahl">Salat</a></li>
            <li class="submenu"><a href="#" title="Unser Rübensortiment">Rüben</a>
              <ul>
                <li class="submenu"><a href="#" title="Unsere Mohrrüben">Mohrrüben</a>
                  <ul>
                    <li><a href="#" title="frisch vom Feld">frisch</a></li>
                    <li><a href="#" title="aus dem Lager">nicht so frisch</a></li>
                  </ul>
                </li>
                <li><a href="#" title="Unsere Steckrüben">Steckrüben</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
    <li><a href="#" title="Unsere Ananasauswahl">Ananas</a></li>
            <li><a href="#" title="Unsere Apfelauswahl">Äpfel</a></li>
            <li><a href="#" title="Unsere Birnenauswahl">Birnen</a></li>
            <li><a href="#" title="Unsere Bananenauswahl">Bananen</a></li>
  </ul>
</nav>

</header>

CSS:
Code:
.as-nav-background {
  position: fixed;
  top: 0px;
  display: inline-block;
  background-color: #fff;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}

input#responsive-nav,
label.responsive-nav-label {
  display: none;
}

label.responsive-nav-label {
  position: relative;
display: block;
padding: 20px;
background: #222;
cursor: pointer;
color: #fff;
}

label.responsive-nav-label span {
margin-right: 10px; 
}

nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}

nav {
position: absolute;
top: -9999px;
padding: 10px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}

nav a:after {
display: none;
}

nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}

nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: #4a4a4a;
}

nav ul li:hover {
background: none;
}

nav ul li a:hover {
background: #4096ee;
}

nav ul ul {
position: relative !important;
width: 100%;
left: 0 !important;
top: 0 !important;
background: none !important;
box-shadow: none;
}

nav ul ul li {
padding-left: 20px;
}
 
@Sempervivum - Man kann seit den Smartphones auch scrollen ohne Scrollbar. Sowas habe ich für andere Funktionen schon auf meiner aktuellen Seite z.B hier die Shop Icons oder ganz unten die Song-Cover lassen sich ohne Scrollbalken scrollen bez. wischen. Geht an sich auch beim Desktop.

@scbawik - stimmt aber so nicht, weil mein Smartphone (Galaxy S8) zeigt einen an, wenn es um spezielle Sachen geht wie eben jetzt die Navigation. Die erweist sich einfach als schweres Ding - für mich jedenfalls.

Ich hab jetzt mal was anderes gemacht und von der Seite bei der mich die Navigation so anspricht versucht Code und CSS nachzuvollziehen. Hab einfach Stück für Stück den Code kopiert und den Weg dort hin analysiert. Mir geht auch nicht um das Kopieren deren Navigation, sondern nur darum, den Weg so etwas zu bauen zu verstehen. Da gibt es ja anscheinend hunderte Möglichkeiten. Allerdings komme ich da auch nicht richtig weiter.

Ich verstehe nicht, wie der Code an einer bestimmten Stelle aufgebaut ist, weil sich im Quellcode beim Google Chrome beim öffnen des Menüs die CSS Anweisungen beim div Container ändern. Irgendwo muss der ja im Code platziert sein, damit er den Unterschied weiß.

Handelt sich um die Stelle "navbar--closed" und "navbar--open". Ich glaube muss man sich aber mal im Code auf der Seite angucken. Sorry für den langen Code, ist jetzt deren Navigation ohne Inhalt außer dem Wort "Test".

HTML:
HTML:
<div class="site-header site-header--home site-header__container dsp-flex-xs col-12-xs grd-algn-center-xs p-l-4-xs p-l-5-m p-r-4-xs p-r-5-m">
    <div class="site-header__menu-toggle col-3-xs">
        <img class="icon icon-menu" src="https://vice-web-statics-cdn.vice.com/icons/menu-black.svg">
    </div>
</div>
<div class="navbar navbar--closed">
    <div class="navbar__header navbar__header__inner dsp-flex-xs p-l-4-xs p-l-5-m">
        <div class="icon-close__wrapper m-b-aut-xs m-t-aut-xs dsp-none-xs">
            <img class="icon icon-close dsp-block-xs" src="https://vice-web-statics-cdn.vice.com/icons/close-navigation-menu-dark.svg">
        </div>
    </div>
    <nav class="navbar__body--wrap p-b-4-xs p-b-5-m">Test</nav>
</div>

CSS:
Code:
.site-header {
  top: 0;
  position: fixed;
  size: 100% 60px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  color: #000000;
  z-index: 100;
}

.site-header__container {
  height: 60px;
}

.site-header--home, .site-header--default, .site-header--article {
  background: #ffffff;
}

.dsp-flex-xs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col-12-xs {
  width: 100%;
}

.grd-algn-center-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

img.icon.icon-menu {
  width: 22px;
  height: 14px;
  cursor: pointer;
  position: relative;
}

.navbar--closed {
  -webkit-transform: translate(-100%,0);
  -ms-transform: translate(-100%,0);
  transform: translate(-100%,0);
}

.navbar--open {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  background-color: #000000;
  -webkit-transition: -webkit-transform 275ms cubic-bezier(0.5,0.08,0,1);
  -webkit-transition: transform 275ms cubic-bezier(0.5,0.08,0,1);
  transition: transform 275ms cubic-bezier(0.5,0.08,0,1);
}

.navbar__header {
  height: 60px;
  background-color: #ffffff;
}

.dsp-none-xs {
  display: none;
}

.m-b-aut-xs {
  margin-bottom: auto;
}

.m-t-aut-xs {
  margin-top: auto;
}

.navbar__header .icon-close__wrapper {
  cursor: pointer;
}

.navbar .icon.icon-close {
  width: 16px;
}

img.icon.icon-close, img.icon.icon-triangle {
  width: 13px;
  cursor: pointer;
}

.dsp-block-xs {
  display: block;
}

.navbar .navbar__body--wrap {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
 
Werbung:
Alles gut, für mich ist das alles schon schwer genug, ich bin noch in der Lernphase bei vielem. Vielleicht kannst du ja mal über das was ich gerade gepostet habe schauen. Vielleicht kommst du ja dahinter. :S
 
Okay, hab es mir irgendwie schon gedacht, dass es doch mit JavaScript ist, hatte noch Hoffnung das es das nicht ist. Das Menü ist ja auch auf der Desktop Version so, muss man nicht zwingend mit dem Smartphone checken. Mit JavaScript kenne ich mich leider gar nicht aus. So auf den ersten Blick wüsste ich jetzt rein gar nicht was ich machen muss. Leider kann ich auch kaum Englisch, macht es nicht besser, aber ich übersetzt das mal nachher und mal sehen in wie weit ich es verstehe.
 
Ich hab mal drüber geschaut, im Beispiel von denen sieht es jetzt weniger danach aus? Jedenfalls kann ich da jetzt keine Funktion erkennen. Ich könnte den Code ja jetzt nicht für meinen html und CSS Code verwenden oder? Müsste ich jetzt den Code nehmen. Ich hab schon so viele Navigations-Codes versucht, dass ich schon etwas durch den Wind bin ^^

Ah! In deinem Link ist das ja nicht schlecht. Vielleicht muss ich das mal testen.
 
Werbung:
Moin @Sempervivum - ich hab erst heute gesehen das dein Link ja mein Code ist. Hatte ich erst gar nicht gesehen.

Was mich komischerweise verwirrt, das Aufklappen und Scrollen geht mit deinem Code jetzt auch ohne JavaScript. Hab es mehrfach getestet und funktioniert. Der einzige Unterschied ist, dass mit JavaScript eben die Scrollbalken weg sind. Aber die hab ich jetzt bei der Version ohne JavaScript mit folgender CSS Anweisung entfernt:

Code:
nav::-webkit-scrollbar {
  display: none;
}

Den Code nutze ich auch bei meiner aktiven Seite und bisher hat sich da noch niemand beschwert. Die CSS Anweisung ist wohl noch nicht so gängig, soll wohl auch nicht bei allen Browsern gehen, aber hauptsächlich ältere. Aktuell wäre es fast so wie ich will, noch nicht ganz, auch ohne JavaScript. Paar Details fehlen mir noch z.B das wenn man das Menü öffnet, dass ein X erscheint statt weiterhin das Menü. Aber ich glaube das sind jetzt nur noch CSS Einstellungen. Solange das Aufklappen und Scrollen geht bin ich schon mal happy.

UPDATE: Okay, beim Firefox scheint es wohl nicht zu funktionieren mit meiner CSS Anweisung. Dann muss ich wohl doch mit Javascript arbeiten :S

Ist die JavaScript Datei nur für die Scrollbalken zuständig? Weil wie gesagt, der Swipe funktioniert auch ohne.
 
Zuletzt bearbeitet:
Werbung:
Hab es selbst nach geguckt, Thema hatte ich noch nicht. Ist immer ein Reflex danach zu fragen. Aber ich glaube meine Freude hält nicht lange @Sempervivum , denn anscheinend passiert bei dem JavaScript doch nichts. Bei mir sind die Scrollbalken trotzdem da. Ist mir erst nicht aufgefallen, weil du nur so wenig Menüpunkte hast. Pack in dein Beispiel mal so viele rein, damit man auch bei einem PC Scrollen muss. Dann sehen wir ob es funktioniert oder nicht.
 
Hmm, damit ist mein Problem immer noch nicht gelöst. Beim Smartphone taucht die Scrollbar auch auf, bei manchen gibt es das jedenfalls noch. Fassen wir mal zusammen: Mit deinem Code funktioniert der Swipe und das Menü lässt sich auch wie gewünscht scrollen. Dass schon mal mehr als ich vorher hatte. Das einzige Problem was noch vorhanden ist, sind die Scrollbalken.
 
Ich hab am Wochenende noch eine Menge ausprobiert und komme so langsam dahinter. Basierend auf dem Code den du mir geschickt hast in deinem Beispiel. Ich hab festgestellt, dass meine Beispielseite das mit dem Scrollen auch nicht 100%ig gelöst bekommen hat. z.B beim Firefox ist bei denen auch die Scrollbar zu sehen. Die Scrollbar lässt sich nur bei Google/Android und IOS Systemen 100% entfernen. Im Moment hab ich den Code so geändert und angepasst, dass es immer mehr meiner Vorstellung nahe kommt. Ich probiere noch ein bisschen rum, melde mich dann nochmal.
 
Werbung:
Ich hab jetzt mal die Test-Seite von mit online gestellt: Siehe hier

Im Grunde macht es jetzt das was ich möchte. Beim Firefox ist die Scrollbar nicht zu verhindern. Allerdings ist jetzt was anderes komisch am Firefox. Wenn man bei dem auf die Navigation klickt erscheint das "X Navigation" nicht. Erst wenn man nach dem Menü klicken die Seite refresht taucht es auf. Laut Code sollte das allerdings nicht passieren. Hab es extra jetzt online gestellt, kann man vielleicht die Fehler besser finden.
 
Hab es eben mal getestet. Das mit der ID sollte natürlich nicht sein, aber der Fehler ist es nicht. Es ist diese CSS Anweisung. Mit dem fixed kommt Firefox als einziger Browser nicht klar. Wenn ich da relative schreibe klappt es. Aber ich möchte ja das das "X Navigation" stehen bleibt, wenn man in der Navigation scrollt. Ob es da noch eine andere Möglichkeit gibt?

Code:
.nav-label-pos {
  position: fixed;
  top: 0;
  z-index: 999;
}
 
Zurück
Oben