jQuery Slide Menü - Website X5 Hilfe - Die Helpsite

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

jQuery Slide Menü

Scripte > Menü Navigation

Ein schönes Bilder-Slide Menü mit jQuery

Hier eine horizontale Bildergallery als Slide-Menü zur Navigation. Beim Klick auf die Beschreibung oder dem Bild öffnet sich die neue Seite, die im Code unter href="..." noch definiert werden muss.  
Dieses Slide basiert auf drei Imagedateien je Aufruf, die entsprechend gestaltet werden können. Somit kann man die Größe des Menüs selbst bestimmen und weiter ausbauen. Die im Ordner "img" enthaltenen Image-Dateien sind als Vorlage zur Gestaltung bestimmt. Mit ein wenig Geschick und Erfahrung im Umgang mit Bildbearbeitung, kann das eigene Menü perfekt gestaltet werden.

Nur erfahrene Nutzer sollten Textänderungen an den CSS-Definitionen vornehmen, da viele Funktionen über die Datei "slide.js" namensgleich gesteuert werden.

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. 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!
Startseite Startseite
Über uns Über uns
Bildergallerie Bildergallerie
Links Links
Gästebuch Gästebuch
Impressum Impressum
Download Download
Code für den <HEAD> Bereich
<!-- Hinweis: Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj61_0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj61_0/menu_style.css" />
<script type="text/javascript" src="wsX5Obj/Obj61_0/slide.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj61_0/include.html"; ?>

alternative Einbindung:
<div id="slide">
<div id="slideboundary">
<div class="slidediv slidecurrent">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_1.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/startseite_v.gif" width="50" height="300"
class="slide_v" alt="Startseite" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/startseite_h.gif" width="500" height="50"
class="slide_h" alt="Startseite" border="0"/></a>
</div>
<div class="slidediv">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_2.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/ueber-uns_v.gif" width="50" height="300"
class="slide_v" alt="&Uuml;ber uns" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/ueber-uns_h.gif" width="500" height="50"
class="slide_h" alt="&Uuml;ber uns" border="0"/></a>
</div>
<div class="slidediv">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_3.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/gallery_v.gif" width="50" height="300"
class="slide_v" alt="Bildergallerie" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/gallery_h.gif" width="500" height="50"
class="slide_h" alt="Bildergallerie" border="0"/></a>
</div>
<div class="slidediv">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_4.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/links_v.gif" width="50" height="300"
class="slide_v" alt="Links" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/links_h.gif" width="500" height="50"
class="slide_h" alt="Links" border="0"/></a>
</div>
<div class="slidediv">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_5.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/guestbook_v.gif" width="50" height="300"
class="slide_v" alt="G&auml;stebuch" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/guestbook_h.gif" width="500" height="50"
class="slide_h" alt="G&auml;stebuch" border="0"/></a>
</div>
<div class="slidediv">
<a href="#"><img src="wsX5Obj/Obj61_0/img/img_6.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/impressum_v.gif" width="50" height="300"
class="slide_v" alt="Impressum" border="0"/></a>
<a href="#"><img src="wsX5Obj/Obj61_0/img/impressum_h.gif" width="500" height="50"
class="slide_h" alt="Impressum" border="0"/></a>
</div>
<div class="slidediv">
<a href="#" target="_blank"><img src="wsX5Obj/Obj61_0/img/img_7.jpg" width="500" height="300"
class="slideimg" alt="" border="0"/></a>
<a href="#" target="_blank"><img src="wsX5Obj/Obj61_0/img/download_v.gif" width="50" height="300"
class="slide_v" alt="Download" border="0"/></a>
<a href="#" target="_blank"><img src="wsX5Obj/Obj61_0/img/download_h.gif" width="500" height="50"
class="slide_h" alt="Download" border="0"/></a>
</div>
</div>
</div>
Code Datei "menu_style.css"
#slide { width: 100px; height: 300px; background-color: #A3A5A2; }
#slideboundary { width: 950px; height: 300px; overflow: hidden; position: relative; }
#slideboundary .slidediv {
display: block;
position: absolute;
width: 500px;
height: 300px;
top: 0;
left: 0;
background-color: #A3A5A2;
border-left: 2px solid #ffffff;
border-top: none;
border-bottom: none;
border-right: none;
}
#slideboundary .slide_v {
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 300px;
margin: 0;
padding: 0;
}
#slideboundary .slide_h {
display: block;
position: absolute;
top: 250px;
left: 0;
width: 500px;
height: 50px;
margin: 0;
padding: 0;
}
Feedbacks zu ""

Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 36 Heute
» 131 Gestern
» 804 Woche
» 5197 Monat
» 121519 Jahr
» 449275 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt