Spaghetti Menü - Website X5 Hilfe - Die Helpsite

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 im Bereich CSS, wo auch der Style des gesamten Menüs für die Homepage angepasst werden kann:
width: 150px; //vertikales Menü
width: 600px; //horizontales Menü
Hier 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. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können. Bei Direkteinbindung kann auch eine .html als ausführende Datei genutzt werden.
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.
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj7_0/menu_style.css" />
<script type="text/javascript" src="wsX5Obj/Obj7_0/menu_function.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj7_0/index_v.html"; ?> <!-- für vertikales Menü -->
<?php include "wsX5Obj/Obj7_0/index_h.html"; ?> <!-- für horizontales Menü -->

alternative Einbindung:
<!-- für vertikales Menü -->
<div class="Obj7a">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7a_1');" onmouseout="cache1('Obj7a_1');">
Hauptmenü 1</a>
<ul id="Obj7a_1" onmouseover="montre1('Obj7a_1');" onmouseout="cache1('Obj7a_1');">
<li><a href="#x">Untermenü 1.1</a></li>
<li><a href="#x">Untermenü 1.2</a></li>
<li><a href="#x">Untermenü 1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7a_2');" onmouseout="cache1('Obj7a_2');">
Hauptmenü 2</a>
<ul id="Obj7a_2" onmouseover="montre1('Obj7a_2');" onmouseout="cache1('Obj7a_2');">
<li><a href="#x">Untermenü 2.1</a></li>
<li><a href="#x">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7a_3');" onmouseout="cache1('Obj7a_3');">
Hauptmenü 3</a>
<ul id="Obj7a_3" onmouseover="montre1('Obj7a_3');" onmouseout="cache1('Obj7a_3');">
<li><a href="#x">Untermenü 3.1</a></li>
<li><a href="#x">Untermenü 3.2</a></li>
<li><a href="#x">Untermenü 3.3</a></li>
<li><a href="#x">Untermenü 3.4</a></li>
<li><a href="#x">Untermenü 3.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7a_4');" onmouseout="cache1('Obj7a_4');">
Hauptmenü 4</a>
<ul id="Obj7a_4" onmouseover="montre1('Obj7a_4');" onmouseout="cache1('Obj7a_4');">
<li><a href="#x">Untermenü 4.1</a></li>
<li><a href="#x">Untermenü 4.2</a></li>
<li><a href="#x">Untermenü 4.3</a></li>
</ul>
</li>
</ul>
</div>

<!-- für horizontales Menü -->
<div class="Obj7b">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7b_1');" onmouseout="cache1('Obj7b_1');">
Hauptmenü 1</a>
<ul id="Obj7b_1" onmouseover="montre1('Obj7b_1');" onmouseout="cache1('Obj7b_1');">
<li><a href="#x">Untermenü 1.1</a></li>
<li><a href="#x">Untermenü 1.2</a></li>
<li><a href="#x">Untermenü 1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7b_2');" onmouseout="cache1('Obj7b_2');">
Hauptmenü 2</a>
<ul id="Obj7b_2" onmouseover="montre1('Obj7b_2');" onmouseout="cache1('Obj7b_2');">
<li><a href="#x">Untermenü 2.1</a></li>
<li><a href="#x">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7b_3');" onmouseout="cache1('Obj7b_3');">
Hauptmenü 3</a>
<ul id="Obj7b_3" onmouseover="montre1('Obj7b_3');" onmouseout="cache1('Obj7b_3');">
<li><a href="#x">Untermenü 3.1</a></li>
<li><a href="#x">Untermenü 3.2</a></li>
<li><a href="#x">Untermenü 3.3</a></li>
<li><a href="#x">Untermenü 3.4</a></li>
<li><a href="#x">Untermenü 3.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre1('Obj7b_4');" onmouseout="cache1('Obj7b_4');">
Hauptmenü 4</a>
<ul id="Obj7b_4" onmouseover="montre1('Obj7b_4');" onmouseout="cache1('Obj7b_4');">
<li><a href="#x">Untermenü 4.1</a></li>
<li><a href="#x">Untermenü 4.2</a></li>
<li><a href="#x">Untermenü 4.3</a></li>
</ul>
</li>
</ul>
</div>
Code Datei "menu_style.css"
ul, li { list-style-type: none; padding: 0px; margin: 0px; }
/* Einstellungen vertikales Menu */
.Obj7a {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   overflow: auto;
   padding: 10px;
   margin: 0px;
   position: absolute;
   z-index: 3;
   top: 10px;
   width: 140px;
   }
.Obj7a li { width: 135px; float: left; }
.Obj7a a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: left;
font-weight: bold;
cursor: default;
margin: 0px 2px;
padding-top: 5px;
padding-left: 5px;
display: block;
height: 25px;
color: #ff000;
}
.Obj7a a:hover { background-color: #ccc; }
#Obj7a_1, #Obj7a_2, #Obj7a_3, #Obj7a_4 { font-size: 12px; display: none; width: 140px; float: left; }
#Obj7a_1 a, #Obj7a_2 a, #Obj7a_3 a, #Obj7a_4 a {
font-weight: normal;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
}

/* Einstellungen horiales Menu */
.Obj7b {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   overflow: auto;
   padding: 10px;
   margin: 0px;
   position: absolute;
   z-index: 3;
   top: 10px;
   width: 550px;
   }
.Obj7b li { width: 135px; float: left; }
.Obj7b a {
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 0px;
padding-top: 5px;
padding-left: 5px;
display: block;
height: 25px;
color: #ff000;
}
.Obj7b a:hover { background-color: #ccc; }
#Obj7b_1, #Obj7b_2, #Obj7b_3, #Obj7b_4 { font-size: 12px; display: none; width: 140px; float: left; }
#Obj7b_1 a, #Obj7b_2 a, #Obj7b_3 a, #Obj7b_4 a {
font-weight: normal;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
}
Code Datei "menu_function.js"
function montre1(id) {
with (document) {
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache1(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.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 42 Heute
» 158 Gestern
» 200 Woche
» 3809 Monat
» 127179 Jahr
» 454935 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt