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ü
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.
Download Button
x runter geladen!
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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 200 Heute
» 828 Gestern
» 3117 Woche
» 10567 Monat
» 50243 Jahr
» 377999 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt