zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS: horizontal scrollbares Menu erzeugen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2015, 09:35
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
  #2 (permalink)  
Alt 04.06.2015, 11:02
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dein Javascript erzeugt eine Fehlermeldung - du weißt wo du diese findest?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2015, 11:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.06.2015
Beiträge: 4
peter15 befindet sich auf einem aufstrebenden Ast
Standard fehlerhaftes JS

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Dein Javascript erzeugt eine Fehlermeldung - du weißt wo du diese findest?
Ja ich habe es jetzt angepasst. Habe das Script so von einem anderen Forum erhalten. Hoffe es passt jetzt.

Geändert von peter15 (04.06.2015 um 11:22 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
css, menu horizontal, scrollbar

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation Horizontal bei Zoom "Zeilenumbruch" Aslof CSS 13 29.11.2010 17:34
CSS Flyout Menu funktioniert im IE nicht deXx CSS 9 07.10.2010 17:01
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Horizontale Leiste mit Css und xhtml formatieren bettina CSS 1 06.01.2007 13:49
CSS Hilfe gesucht für Blindenseite johnjdoe CSS 30 17.02.2005 18:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:39 Uhr.