Zusätzliche individuelle Navigation mit Greasemonkey auf beliebigen Webseiten anzeigen

15.04.2008 14:14 Uhr | Kommentare: 0 | Kommentar hinterlassen
Einsortiert in Internet, Software

Mit der Firefox-Erweiterung Greasemonkey lässt sich relativ einfach jede beliebige Webseite um eine ganz individuelle zusätzliche Navigation oder Menüleiste erweitern.

Die hier vorgestellte Variante erzeugt eine Navigationsleiste, die fest im oberen Browserfenster eingeblendet wird. Sie bleibt dank der CSS-Eigenschaft position: fixed; immer sichtbar. Also auch dann wenn im Browserfenster nach unten gescrollt wird.

Die folgenden zwei Beispiele zur Verdeutlichung. Zuerst die Webseite von Technorati, ganz nach oben gescrollt:

Die zusätzliche Navigationsleiste auf Technorati

Und die Webseite “im web gefunden”, bis etwa zur Mitte gescrollt:

Die zusätzliche Navigationsleiste bleibt immer sichtbar

Den Navigationsbereich habe ich in den Beispielen nicht mit Links versehen, sondern mit dem Text:: “Neuer Navigationsbereich …”.

Hier der Quelltext des Userscripts, um auf Webseiten diese zusätzliche Möglichkeit der Informationsdarstellung und/oder Webseiten-Navigation zu erhalten:


// ==UserScript==
// @name           Extra NavBar
// @namespace      iwg
// @description    creates an extra menubar on webpages
// @include        *
// ==/UserScript==

var gm_topLineHeight = '2em';
var gm_topLineColor = '#FFF';
var gm_topLineBackground = '#3A3C69';
var gm_topLineFontSize = 'small';
var gm_topLineTextAlign = 'left';

var gm_topLineStyle = 'style="'+
                'height :' + gm_topLineHeight + ';' +
                'background: transparent; ' +
                'color: '+ gm_topLineColor + ';"'

var gm_topLineInnerStyle = 'style="' +
                'margin: 0px auto 0px auto; ' +
                'padding: 5px; ' +
                'position: fixed; ' +
                'width: 100%; ' +
                'z-index: 100; ' +
                'height :' + gm_topLineHeight +
                'border-bottom: 1px solid #000000; ' +
                'margin-bottom: 5px; ' +
                'font-size: ' + gm_topLineFontSize + '; ' +
                'text-align: ' + gm_topLineTextAlign + ';' +
                'background: ' + gm_topLineBackground + '; ' +
                'color: '+ gm_topLineColor + ';"'

var gm_topLine = document.createElement("div");
gm_topLine.setAttribute('id', 'myGM_topLine');

gm_topLine.innerHTML = '<div '+ gm_topLineStyle + '>' +
        '<div ' + gm_topLineInnerStyle + '>'+
        "Neuer Navigationsbereich ..." +
        '</div></div>';

document.body.insertBefore(gm_topLine, document.body.firstChild);

Bei Bedarf kann man dieses hier gezeigte Greasemonkey-Script auch direkt herunterladen und sofort ausprobieren.

 

Hinterlasse einen Kommentar

Bitte beachten: Mit der Abgabe eines Kommentares oder dem Senden eines Trackbacks erklärst Du Dich mit den Kommentar- und Trackbackrichtlinien einverstanden!

XHTML: Diese Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Du kannst Deinen Kommentar nach dem Abspeichern noch 30 Minuten bearbeiten.

Kurznavigation

Featured Story

WordPress-Plugins

Tags

Kategorien

Empfehlungen

Hilfen und mehr ...

Kommerzielle Angebote

Anderes