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-Datei "floating.css"auf dem Webserver.
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
<link rel="stylesheet" href="wsX5Obj/Obj8_0/floating.css" />
Code für den <BODY> Bereich
<div align="left">
<nav class="Obj8_nav">
<h3><u>Floating Menü</u></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="site_4.html">target="_blank">Webseite 4</a>
</nav>
</div>
Code Datei "floating.css"
.Obj8_nav {
width: 150px;position: fixed;font-family: tahoma;line-height: 150%;background: #EEF6E9;border: 1px solid #7C6031;padding: 5px;;z-index: 100; /* = Ebene des Menüs siehe Erläuterung hier */body top: 250px; /* = Abstand des Menüs vom oberen Rand im body*/body left: 0px; /* = Abstand des Menüs vom linken Rand im body *//* body right: 0px; = Abstand des Menüs vom rechten Rand im body *//* body bottom: 0px; = Abstand des Menüs vom unteren Rand im body *//* top: 0px; = Abstand des Menüs vom oberen Rand im html *//* left: 0px; = Abstand des Menüs vom linken Rand im html *//* right: 0px; = Abstand des Menüs vom rechten Rand im html *//* bottom: 0px; = Abstand des Menüs vom unteren Rand im html */}
.Obj8_nav a,
.Obj8_nav h3 {
font-size: 12px;color: #7C6031;text-decoration: none;display: block;margin: 0 0.5em;}
a:hover { color: #0030BF; text-decoration: underline; }
Zu Demo-Zwecken wandert das Menü nun hinter die Kommentarbox, damit diese auch übersichtlich und ohne Einschränkungen genutzt werden kann.
» nach oben «