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.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei (incl.html) durchführen zu müssen. Hierbei muss beachtet werden, dass die aufrufende Datei die Dateiendung .php aufweist und der Server auch die Scriptsprache verarbeiten kann.
In der Zip-Datei befindet sich ein Verzeichnis "
jq_slide-menu", das so übernommen werden kann. Die Anpassung des Menüs erfolgt dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Die Datei "incl.html" ist das Menü der Variante 2.
Nur erfahrene Nutzer sollten Textänderungen an den CSS-Definitionen vornehmen, da viele Funktionen über die Datei "slide.js" namensgleich gesteuert werden.

Browser

Startseite Startseite
Über uns Über uns
Bildergallerie Bildergallerie
Links Links
Gästebuch Gästebuch
Impressum Impressum
Download Download

Code für den HEAD-Bereich:

[Vor dem /HEAD|Bereich CSS]

<link rel="stylesheet" type="text/css" href="jq_slide-menu/slide_style.css" />
<script type="text/javascript" src="jq_slide-menu/jquery.js"></script>
<script type="text/javascript" src="jq_slide-menu/slide.js"></script>

Variante 1
Code für das HTML-Objekt:

[Objekt HTML]

<div id="slide">
<div id="slideboundary">
<div class="slidediv slidecurrent">

<a href="#"><img src="jq_slide-menu/img/img_1.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/startseite_v.gif" width="50" height="300" class="slide_v" alt="Startseite" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/startseite_h.gif" width="500" height="50" class="slide_h" alt="Startseite" border="0"/></a>

</div>
    
<div class="slidediv">

<a href="#"><img src="jq_slide-menu/img/img_2.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/ueber-uns_v.gif" width="50" height="300" class="slide_v" alt="&Uuml;ber uns" border="0"/></a>
<a href="#"><img src="jq_slide-menu/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="jq_slide-menu/img/img_3.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/gallery_v.gif" width="50" height="300" class="slide_v" alt="Bildergallerie" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/gallery_h.gif" width="500" height="50" class="slide_h" alt="Bildergallerie" border="0"/></a>

</div>
    
<div class="slidediv">

<a href="#"><img src="jq_slide-menu/img/img_4.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/links_v.gif" width="50" height="300" class="slide_v" alt="Links" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/links_h.gif" width="500" height="50" class="slide_h" alt="Links" border="0"/></a>

</div>
    
<div class="slidediv">

<a href="#"><img src="jq_slide-menu/img/img_5.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/guestbook_v.gif" width="50" height="300" class="slide_v" alt="G&auml;stebuch" border="0"/></a>
<a href="#"><img src="jq_slide-menu/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="jq_slide-menu/img/img_6.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/impressum_v.gif" width="50" height="300" class="slide_v" alt="Impressum" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/impressum_h.gif" width="500" height="50" class="slide_h" alt="Impressum" border="0"/></a>

</div>
    
<div class="slidediv">

<a href="#"><img src="jq_slide-menu/img/img_7.jpg" width="500" height="300" class="slideimg" alt="" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/download_v.gif" width="50" height="300" class="slide_v" alt="Download" border="0"/></a>
<a href="#"><img src="jq_slide-menu/img/download_h.gif" width="500" height="50" class="slide_h" alt="Download" border="0"/></a>

</div>

</div>
</div>

Variante 2
Code für das HTML-Objekt (Einbindung per Include):

[Objekt HTML]

<?php include ("jq_slide-menu/incl.html"); ?>

Die aufrufende Seite muss die Dateiendung .php aufweisen und der Server muss PHP-Code auch ausfühen können.

Code der CSS-Datei (slide_style.css):

body {margin: 0px; padding: 0px;}
#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 ""
1 Kommentar
Durchschnittliche Bewertung: 115.0/5


Ralf Wegner
2018-11-13 07:37:52
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
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 175 Heute
» 529 Gestern
» 175 Woche
» 7043 Monat
» 76864 Jahr
» 323442 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt