Floating Menü - Website X5 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-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.
Download Button
Downloads:
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="http://com.home-wiekau.de/pj_LinkCounter/click.php?id=X5-Obj8_0"
target="_blank">Download Script</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.
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 46 Heute
            » 105 Gestern
            » 680 Woche
            » 1044 Monat
            » 42258 Jahr
            » 266464 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt