Spaghetti Menü
Scripte > Menü Navigation
Ein zusätzliches simples Spaghetti Menü mit JavaScript
Das ist ein Menü das sich variable als vertikales und/oder horizontales sogenanntes "Spaghetti Menü" einsetzen lässt.
Die Einstellung des Menüs auf vertikale oder horizontale Ausführung richtet sich nach der Breiteneinstellungen in der CSS-Datei "style.css", wo auch des gesamten Menüs an die Homepage angepasst werden kann, z. B.:
Die Einstellung des Menüs auf vertikale oder horizontale Ausführung richtet sich nach der Breiteneinstellungen in der CSS-Datei "style.css", wo auch des gesamten Menüs an die Homepage angepasst werden kann, z. B.:
width: 150px; //vertikales Menü
width: 600px; //horizontales Menü
Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen.
Dann muss die ausführende Datei die Dateiendung .php aufweisen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese können aber auch durch einen Doppelklick ausgeführt werden.
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj7_0/style.css" />
<script src="wsX5Obj/Obj7_0/function.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj7_0/menu_ver.html"; ?> <!-- für vertikales Menü -->
<?php include "wsX5Obj/Obj7_0/menu_hor.html"; ?> <!-- für horizontales Menü -->
alternative Einbindung:
<!-- für vertikales Menü -->
<div class="Obj7_v">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('Obj7_v1');" onmouseout="cache('Obj7_v1');">Hauptmenü 1</a>
<ul id="Obj7_v1" onmouseover="montre('Obj7_v1');" onmouseout="cache('Obj7_v1');"><li><a href="http://com.home-wiekau.de/pj_LinkCounter/click.php?id=X5-Obj7_0">Download Script</a></li><li><a href="#">Untermenü 1.1</a></li><li><a href="#">Untermenü 1.2</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_v2');" onmouseout="cache('Obj7_v2');">Hauptmenü 2</a>
<ul id="Obj7_v2" onmouseover="montre('Obj7_v2');" onmouseout="cache('Obj7_v2');"><li><a href="#">Untermenü 2.1</a></li><li><a href="#">Untermenü 2.2</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_v3');" onmouseout="cache('Obj7_v3');">Hauptmenü 3</a>
<ul id="Obj7_v3" onmouseover="montre('Obj7_v3');" onmouseout="cache('Obj7_v3');"><li><a href="#">Untermenü 3.1</a></li><li><a href="#">Untermenü 3.2</a></li><li><a href="#">Untermenü 3.3</a></li><li><a href="#">Untermenü 3.4</a></li><li><a href="#">Untermenü 3.5</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_v4');" onmouseout="cache('Obj7_v4');">Hauptmenü 4</a>
<ul id="Obj7_v4" onmouseover="montre('Obj7_v4');" onmouseout="cache('Obj7_v4');"><li><a href="#">Untermenü 4.1</a></li><li><a href="#">Untermenü 4.2</a></li><li><a href="#">Untermenü 4.3</a></li></ul>
</li>
</ul>
</div>
<!-- für horizontales Menü -->
<div class="Obj7_h">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('Obj7_h1');" onmouseout="cache('Obj7_h1');">Hauptmenü 1</a>
<ul id="Obj7_h1" onmouseover="montre('Obj7_h1');" onmouseout="cache('Obj7_h1');"><li><a href="http://com.home-wiekau.de/pj_LinkCounter/click.php?id=X5-Obj7_0">Download Script</a></li><li><a href="#">Untermenü 1.1</a></li><li><a href="#">Untermenü 1.2</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_h2');" onmouseout="cache('Obj7_h2');">Hauptmenü 2</a>
<ul id="Obj7_h2" onmouseover="montre('Obj7_h2');" onmouseout="cache('Obj7_h2');"><li><a href="#">Untermenü 2.1</a></li><li><a href="#">Untermenü 2.2</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_h3');" onmouseout="cache('Obj7_h3');">Hauptmenü 3</a>
<ul id="Obj7_h3" onmouseover="montre('Obj7_h3');" onmouseout="cache('Obj7_h3');"><li><a href="#">Untermenü 3.1</a></li><li><a href="#">Untermenü 3.2</a></li><li><a href="#">Untermenü 3.3</a></li><li><a href="#">Untermenü 3.4</a></li><li><a href="#">Untermenü 3.5</a></li></ul>
</li><li><a href="javascript:void(0);" onmouseover="montre('Obj7_h4');" onmouseout="cache('Obj7_h4');">Hauptmenü 4</a>
<ul id="Obj7_h4" onmouseover="montre('Obj7_h4');" onmouseout="cache('Obj7_h4');"><li><a href="#">Untermenü 4.1</a></li><li><a href="#">Untermenü 4.2</a></li><li><a href="#">Untermenü 4.3</a></li></ul>
</li>
</ul>
</div>
Code Datei "style.css"
ul, li { list-style-type: none; padding: 0px; margin: 0px; z-index: 9999; }
/* Einstellungen vertikales Menu */
.Obj7_v {
font-family: Verdana, sans-serif;font-size: 12px;overflow: auto;padding: 10px;margin: 0px;position: absolute;z-index: 3;top: 10px;width: 140px; /* vertikale Breite */}
.Obj7_v li { width: 135px; float: left; }
.Obj7_v a {
border: 1px solid #888;background-color: #fff;text-decoration: none;text-align: left;font-weight: bold;cursor: default;margin: 0px 2px;padding-top: 8px;padding-left: 5px;display: block;height: 25px;color: #ff000;}
.Obj7_v a:hover { background-color: #ccc; }
#Obj7_v1, #Obj7_v2, #Obj7_v3, #Obj7_v4 { font-size: 12px; display: none; width: 140px; float: left; }
#Obj7_v1 a, #Obj7_v2 a, #Obj7_v3 a, #Obj7_v4 a {
font-weight: normal;padding-top: 5px;border-top: 0px;cursor: pointer;}
/* Einstellungen horiales Menu */
.Obj7_h {
font-family: Verdana, sans-serif;font-size: 12px;overflow: auto;padding: 10px;margin: 0px;position: absolute;z-index: 3;top: 10px;width: 550px; /* horizontale Breite */}
.Obj7_h li { width: 135px; float: left; }
.Obj7_h a {
border: 1px solid #888;background-color: #fff;text-decoration: none;text-align: center;font-weight: bold;cursor: default;margin: 0px 0px;padding-top: 8px;padding-left: 5px;display: block;height: 25px;color: #ff000;}
.Obj7_h a:hover { background-color: #ccc; }
#Obj7_h1, #Obj7_h2, #Obj7_h3, #Obj7_h4 { font-size: 12px; display: none; width: 140px; float: left; }
#Obj7_h1 a, #Obj7_h2 a, #Obj7_h3 a, #Obj7_h4 a {
font-weight: normal;padding-top: 5px;border-top: 0px;cursor: pointer;}
Code Datei "function.js"
function montre(id) {
with (document) {
if (getElementById) getElementById(id).style.display = 'block';else if (all) all[id].style.display = 'block';else layers[id].display = 'block';
}
}
function cache(id) {
with (document) {
if (getElementById) getElementById(id).style.display = 'none';else if (all) all[id].style.display = 'none';else layers[id].display = 'none';
}
}
» nach oben «