Floating Menü - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Floating Menü

Scripte > Listen Navigation
Das fliegende Navigations Menü



Download Button
Downloads:
Dieses Menü wandert optisch stetig mit. Das ist aber nur optisch der Fall, da das Menü auf eine Position mit dem Parameter "fixed" fest verankert ist.
Die Link-Liste ist beliebig erweiterbar, wo wir einige Beispiele angeführt haben.
Die Anpassungen der Verlinkungen erfolgen im HTML-Objekt, der Style in der zugehörigen CSS-Anweisung im Head-Bereich.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken.
HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der ausführenden Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Code für den <HEAD> Bereich
<style type="text/css">
.Obj8 {
font-family: tahoma;
background: #EEF6E9;
padding: 5px;;
width: 150px;
z-index: 100;
position: fixed;
border: 1px solid #7C6031;
/* left: 0px; = Abstand des Menüs vom linken Rand */
/* right: 0px; = Abstand des Menüs vom rechten Rand */
/* bottom: 0px; = Abstand des Menüs vom unteren Rand */
}
.Obj8 a,
.Obj8 h3 { font-size: 12px; display: block; margin: 0 0.5em; color: #7C6031; }
</style>
Code für den <BODY> Bereich
<div align="left">
<nav class="Obj8">
<h3>Floating Menu</h3>
<a href="site_1.html">Webseite 1</a>
<a href="site_2.html">Webseite 2</a>
<a href="site_3.html">Webseite 3</a>
<a href="http://domain.tld">Webseite</a>
</nav>
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 1 Online
» 145 Heute
» 445 Gestern
» 1267 Woche
» 6670 Monat
» 6670 Jahr
» 477338 Gesamt
Record: 1396 (02.01.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt