Tutorial Responsive Navigation
Guckt Euch zum besseren Verständnis auch diese Seite von www.w3schools.com einmal an.
Diese responsive Navigation wird hier ab einer Display-Größe von 800 Pixeln in eine vertikale Navigation über die CSS dieser Seite geändert und eignet sich nur zum Einbau in eine responsive Seite, da ja eine Standard-Seite von NOF Pixel-Angaben hat und die Navigation zwar beim Zusammenschieben des Browser-Fensters auch reagieren würde, allerdings nicht am Handy, da ja bei einer Standard-Seite mit Pixel-Angaben die Seitenbreite (hier 990px) angezeigt werden würde - hier ein Beispiel.
Beschäftigt Euch also zuerst mit meinem Tutorial zu dieser responsiven Seite hier.
Für diese Navigationsleiste habe ich folgende Style-Anweisung in die HTML vom Layout geschrieben.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
<style>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #202E51;
/* unten optionaler Schatten an der Navigation */
box-shadow: 5px 5px 5px #888888;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #DC8A32;}
ul.topnav li a.active {background-color: #3C5A9A;}
ul.topnav ul.right {
float: right;
list-style-type: none;
}
@media screen and (max-width: 800px){
ul.topnav ul.right,
ul.topnav li {float: none;}
}
</style>
... stellt dabei das @media Query auf die gewünschte Breite (hier 800px), nach der die vertikale Navigation erscheinen soll.
Nun erstellt Ihr lediglich eine Text-Navigation mit den entsprechenden CSS-Klassen aus der CSS oben. Hier als Beispiel meine Navigation dieser Tutorialseite hier. Gebt der jeweils aktiven Seite die class="active" und fügt den Code in die HTML vom Textfeld ein.
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML”
<ul class="topnav">
<li><a href="../index.html">Responsive</a></li>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/Tutorial/tutorial.html" target="_blank">Tutorial Seite</a></li>
<li><a class="active" href="./tutorial.html">Tutorial Navigation</a></li>
<li><a href="../Slick-Navigation/slick-navigation.html">Slick Navigation</a></li>
<li><a href="../Nur-Slicknavi/nur-slicknavi.html">Klappleisten</a></li>
<ul class="topnav right">
<li><a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php" target="_blank">Gästebuch</a></li>
<li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" target="_blank">Themen</a></li>
</ul>
</ul>
Hier noch eine Ansicht vom Handy, nachdem sich die Navigation durch die CSS auf vertikal angepasst hat.
Viel Erfolg!
