Hilfe:Navigationsleiste am oberen Bildschirmrand

Zur Navigation springen Zur Suche springen

Diese steile super-dupa-hyper-über-drüber-turbo-mega-ober-affen-geile Navigationsleiste habe ich im Snap Wiki gefunden und nicht gerastet und geruht, bis ich sie nachbauen konnte.

Man nehme die nachfolgenden Zutaten, schüttle sie gut und füge sie dem Wiki hinzu. Für jeden installierten Skin müssen die Dateien im MediaWiki-Namensraum entsprechend angepasst werden.

Vector.js · Topnav.html · Vector.css

Vector.js Snap! · Topnav.html Snap! · Vector.css SNap!

MediaWiki:Vector.js · MediaWiki:Topnav.html · MediaWiki:Vector.css

Vector.js

In die Datei Vector.js fügt man folgenden Code ein
/* Das folgende JavaScript wird für Benutzer der Vector-Benutzeroberfläche geladen. */
/* Credit to @GrahamSH for this */
$(function() {
var myurl = window.location.protocol + "//" + window.location.host;
var myadr = window.location.href
var pfad = 'kein Pfad';
var ichselber = '';
var subme = myadr.replace('action=edit','action=submit');
var header = $("#firstHeading").text();

if ( mw.config.exists( 'wgArticlePath' ) ) {
pfad = mw.config.get( 'wgArticlePath' ) ;
wielange = mw.config.get( 'wgUserRegistration');
}
//ichselber = myurl + pfad.replace('$1', header);
//subme = ichselber + '?action=submit';

console.log('Version 8');
//console.log('Das sollte die eigene URL sein: ' + ichselber);
console.log(subme);

var topBar='<div id="top-bar">\
  <div style="display: flex; flex-direction: row; position: relative; top: 0; margin-left: 13em;">\
    <div class="dropdown">\
    	<a href="http://lilypond.org/" aria-label="Lilypond home page">\
    		<img height="25" src="https://static.miraheze.org/lilypondwiki/c/c6/Lilywiki.jpg" />\
    	</a>\
    	<div class="dropdown-content">\
 			<a target="_blank" href="https://mail.gnu.org/archive/html/lilypond-user/">Mailing list</a>\
    		<a target="_blank" href="https://gitlab.com/lilypond/lilypond">Source</a>\
    		<a target="_blank" href="https://mail.gnu.org/archive/html/lilypond-user/">Mailing list</a>\
    		<a target="_blank" href="http://lilybin.com/">Online testen</a>\
    		<a target="_blank" href="http://lilypond.org/website/manuals.de.html/">Handbücher</a>\
			<a target="_blank" href="https://lilypondforum.de/">Forum</a>\
			<a class="separator-top" href="/wiki/Lilypond_Links">Lilypond Links</a>\
			<a href="/wiki/Kategorie:Lilypond_Tipps">Lilypond&nbsp;Tipps</a>\
			<a href="/wiki/LSR">Code Snippets</a>\
		</div>\
    </div>\
    <div class="dropdown unter-1000"">\
    	<div class="dropbtn has-children">\
    		<a href="/wiki/Kategorie:Noten" target="_blank">Noten</a>\
    	</div>\
    	<div class="dropdown-content">\
    		<a href="/wiki/Kategorie:Klaviernoten">Klaviernoten</a>\
    		<a href="/wiki/Kategorie:Orgelnoten">Orgelnoten</a>\
    		<a href="/wiki/Kategorie:Lieder">Lieder</a>\
			<a href="/wiki/Kategorie:Akkordeonnoten">Akkordeonnoten</a>\
			<a href="/wiki/Kategorie:Komponisten">Komponisten</a>\
			<div class="dropdown-submenu"><a href="/wiki/Geistliche_Lieder" target="_blank">Geistliches &#x25BA;</a>\
				<ul class="sub-menu" >\
					<li><a href="/wiki/Gotteslob">Gotteslob</a>\
					<li><a href="/wiki/Gottesdienst">Gottesdienst</a>\
					<li><a href="/wiki/Kategorie:Orgelnoten">Orgelnoten</a>\
					<li><a href="/wiki/Kommunion">Kommunion</a>\
					<li><a href="/wiki/Kategorie:Gottesdienst ohne Gesang">Gottesdienst ohne Gesang</a>\
				</ul>\
    		</div>\
    	</div>\
    </div>\
    <div class="dropdown">\
      <div class="dropbtn has-children">\
        <a href="/wiki/AEUe" target="_blank">Übungsstücke</a>\
      </div>\
      <div class="dropdown-content">\
        <a href="/wiki/AEUe#La_Valse_.27d_Am.C3.A9lie">La Valse \'d Amélie</a>\
        <a href="/wiki/AEUg#La_Boite_a_Bois_.28Schottisch.29">La Boite a Bois</a>\
        <a href="/wiki/AEUe#Boeve.27s_Psalm">Boeve\'s Psalm</a>\
        <a href="/wiki/AEUm#Marinette.27s_An_Dro">Marinette\'s An Dro</a>\
        <a href="/wiki/AEUe#Kulsko_Horo">Kulsko Horo</a>\
        <a href="/wiki/AEUe#Pelerinenwalzer">Pelerinenwalzer</a>\
        <a href="/wiki/AEUf#Robin.27s_.28Wals.29">Robin\'s Wals</a>\
        <a href="/wiki/AEUf#Zahnfee">Zahnfee</a>\
        <a href="/wiki/AEUf#Ozhidanje">Ozhidanje</a>\
        <a href="/wiki/AEUh#La_Petite">La Petite</a>\
        <a href="/wiki/AEUh#D.27Accord">D\'Accord</a>\
        <a href="/wiki/Waltz_for_Franny#Partitur">Waltz for Franny</a>\
        <a href="/wiki/Konterfei#Partitur">Konterfei</a>\
      </div>\
    </div>\
    <div class="dropdown">\
      <a href="#mw-page-base" title="Seitenanfang">\
        <div style="margin-left: 2em; position: relative; top: 12px; width: 30px; height: 30px; border-top: 3px solid ; padding: 1px ">\
          <div style="width: 0; height: 0; border-bottom: 20px solid; border-left: 15px solid transparent; border-right: 15px solid transparent;"></div>\
        </div>\
      </a>\
    </div>\
    <div class="dropdown">\
      <a href="#footer" title="Seitenende">\
        <div style="margin-left: .4em; position: relative; bottom: 0; width: 30px; height: 33px; border-bottom: 3px solid ; padding: 1px ">\
          <div style="position: relative; width: 0; height: 0; border-top: 20px solid; border-left: 15px solid transparent; border-right: 15px solid transparent; top: 12px"></div>\
        </div>\
      </a>\
    </div>\
  </div>\
</div>';

//$( "body" ).prepend( topBar );
});
Die Url im $.get-Statement $.get( "https://wikiurl/w/index.php?title=Mediawiki:Topnav.html muss angepasst werden!
Das JavaScript holt sich die aktuelle URL mittels var newURL = window.location.protocol + "//" + window.location.host automatisch und braucht daher nicht mehr angepasst zu werden.

Topnav.html

Damit das Javascript funktioniert, muss die Seite MediaWiki Topnav.html passend befüllt werden. Etwa so
<div><div  style="display: inline-block; margin: 0; width: auto">'"`UNIQ--syntaxhighlight-0000000C-QINU`"'</div></div>

Vector.css

Die CSS-Datei für die Benutzeroberfläche MediaWiki Vector.css MediaWiki:Vector.cssmuss um etliche Klassendefinitionen ergänzt werden.
This is the vector.css of a different wiki, there the colors are not the same
/* Das folgende CSS wird für Benutzer der Vector-Benutzeroberfläche geladen. */

Links