jQuery Slide Menü - Website X5 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 HTML-Code unter href="..." angepasst 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 Bilder 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 Ä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. 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 beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Download Button
Downloads:
Code für den <HEAD> Bereich
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj61_0/jquery.js"></script>
<link rel="stylesheet" href="wsX5Obj/Obj61_0/menu_style.css" />
<script src="wsX5Obj/Obj61_0/slide.js"></script>
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj61_0/menu_inc.html"; ?>

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

Ralf Wegner

02.12.2014, 13:07

+0 -0  

Hallo, das jQuery Slide Menü sieht wirklich sehr gut aus. Natürlich wollte ich es testen.Leider gelingt es mir nicht das Menu zum Laufen zu bringen. Kann mir jemand einen Rat geben?Habe nach dem Download wie oben in der Beschreibung alles gemacht, aber es geht nicht. Weder Variante 1 noch 2.Vielen Dank im Voraus

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 66 Heute
            » 93 Gestern
            » 159 Woche
            » 1222 Monat
            » 42436 Jahr
            » 266642 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt