jQuery Slide Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

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 ""

es gibt insgesamt 1 Kommentar(e)


  1. Ralf Wegner schreibt am 02.12.2014, 14.07 Uhr

    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


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 4 Online
 » 18 Heute
 » 997 Woche
 » 3784 Monat
 » 53012 Jahr
 » 299590 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü