CSS Responsive Navigationsmenü - Web Designer Wall - Design-Trends und Tutorials

Die Absicht

Der Zweck dieser Übung ist es, Ihnen zu zeigen, wie ein regelmäßiges Listenmenü in ein Dropdown-Menü auf kleineren Display drehen.

CSS Responsive Navigationsmenü - Web Designer Wall - Design-Trends und Tutorials

Dieser Trick ist nützlicher für die Navigation mit vielen Links wie der Screenshot unten. Sie können alle Tasten in einem eleganten Drop-Down-kondensieren.







CSS Responsive Navigationsmenü - Web Designer Wall - Design-Trends und Tutorials

Die CSS für die Navigation (Desktop-Ansicht) ist ziemlich geradlinig, also werde ich nicht in die Details zu bekommen. Beachten Sie, dass ich angegeben display: inline-block statt float: für das nav links

  • Element. Dies ermöglicht es die Menütasten links, mittig oder rechts auf dem durch die Angabe Text ausrichten zu können, auszurichten
      Element.







      Mitte und Rechts-Ausrichtung

      Wie oben erwähnt, können Sie die Ausrichtung der Tasten ändern, indem text-align Eigenschaft.

      Internet Explorer Unterstützung

      HTML5