Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.06.2015, 09:35
peter15 peter15 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2015
Beiträge: 4
peter15 befindet sich auf einem aufstrebenden Ast
Standard CSS: horizontal scrollbares Menu erzeugen

Das Menü soll in der Lage sein "horizontal Scrollen" über Pfeile zuzulassen (jedoch kein horizontaler Scroll-Balken!).

Bedingungen:
1. Das Menu soll sich beim drücken des Pfeils jeweils um 1 Element nach links "<" oder nach rechts ">" bewegen, um weitere Elemente (z.B. menu1 bzw. menu5, menu6) zu sehen.
2. Ist der Anfang bzw. das Ende der Liste erreicht, soll das scrollen stoppen bzw. der entsprechende Pfeil ausgeblendet werden (kein Umlauf!)
3. Jedes Menüelement sollte anklickbar sein.
4. Wenn beim Aufruf der Seite diese z.B. mit einem Menüpunkt zusammenhängt, sollte auch dieser Menüpunkt sichtbar (positioniert) sein.
5. Sind weniger Menu-Elemente (li) als die vorgegebene Breite des scrollbaren Feldes, so sollen die Pfeile (< und >) ausgeblendet werden.


Bsp.: < menu2 | menu3 | menu4 >

In diesem Beispiel gibt es 6 Menü-Icons und 3 sind gleichzeitig sichtbar.

Hat jemand eine Idee, (evtl. auch mit JS), bzw. ein Code-Beispiel um zu sehen, wie dies umgesetzt werden kann?

Update: Habe JS für < und > Click:

HTML-Code:
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
    $('.right').click(function () {
        var position = $('.container').position();
        var r=position.left-$(window).width()
        $('.container').animate({
            'left': ''+r+'px'
        });
    });    
    
    $('.left').click(function () {
        var position = $('.container').position();
        var l=position.left+$(window).width()
        if(l<=0)
        {
        $('.container').animate({
            'left': ''+l+'px'
        });
        }
    });    
});

Geändert von peter15 (04.06.2015 um 11:21 Uhr) Grund: Update
Mit Zitat antworten
Sponsored Links