Spaghetti Menü

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.:
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.
Download Button
Downloads:
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';
}
}
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 1 Online
» 29 Heute
» 180 Gestern
» 512 Woche
» 21775 Monat
» 32880 Jahr
» 503548 Gesamt
Record: 1679 (15.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt