|
|||
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 |
Sponsored Links |
|
|||
fehlerhaftes JS
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) |
Stichwörter |
css, menu horizontal, scrollbar |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |