CSS: Создание горизонтального прокручиваемого меню

Я хочу добавить меню в свои экраны приложений. Меню будет иметь значки меню, которые имеют горизонтальное прокручиваемое меню в то время, когда нажата стрелка влево или вправо. На экране меню меню должно быть прокручено до этого значка меню для этого экрана меню.CSS: Создание горизонтального прокручиваемого меню

Ex .:

< menu1  | menu2 | menu3 >

Say есть 6 иконок меню и 3 открыты одновременно. при нажатии стрелки вправо он должен прокручивать по одному элементу за раз.

, и если мой экран связан с меню 4, необходимо установить меню 4.

< menu4  | menu5 | menu6 >

А также каждый пункт меню должен быть интерактивным.

Пожалуйста, дайте мне знать, как я могу это достичь.

Update есть для MouseOver расслоение плотной

<script type="text/javascript"> 
    $(function() { 
     var div = $('div.sc_menu'), 
      ul = $('ul.sc_menu'), 
      ulPadding = 15; 
     var divWidth = div.width(); 
     div.css({ overflow: 'hidden' }); 
     var lastLi = ul.find('li:last-child'); 
     div.mousemove(function (e) { 
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 

      var left = (e.pageX - div.offset().left) * (ulWidth - divWidth)/divWidth; 
      div.scrollLeft(left); 
     }); 
    }); 
</script>

JSFiddle

Check here

Update3

Yahoo's Navigation

Update 4

Это динамическое меню, полученное из БД строить с ул & Ли. Если есть больше Li, чем ширина экрана, я просто хочу, чтобы стрелка оставила & правой стороной, чтобы прокрутить лишние лики, если они есть.

источник

2013-11-30 صفي

@Mohsen Пожалуйста, смотрите обновление, которое я имею для Hover эффект. Но Iwant это для onClick, если есть переполнение. –

если вы можете добавить JSFiddle будет отличным ..http: //jsfiddle.net/ "добавить javascript html css code" – Muath

Вот [jsfiddle] (http://jsfiddle.net/QdJvb/) –

Смотрите эту скрипку:

http://jsfiddle.net/kzQFQ/49/

$(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' 
    }); 
    } 
});  
});

источник

2013-11-30 06:30:19 Zword

Как вы уже упоминали при щелчке по левому или правому кругу. Используя эту идею, вы можете создать свой нижний колонтитул для своей страницы. – Zword

Решена ли ваша проблема или я должен опубликовать другое обновление? – Zword

Не разрешено @Zword. –

хоп это должно быть помочь вам увидеть ссылку

http://jquery.malsup.com/cycle/int2.html

см Non-Image Content на последней страницы

увидеть эту скрипку: http://fiddle.jshell.net/vac9x/1/

источник

2013-11-30 07:00:39

Уважаемый @Aliana, Как я могу видеть видимость стрелки при переполнении? –

см. Это http://fiddle.jshell.net/vac9x/1/ –

Я хочу, чтобы стрелки на стороне были условно, если произошло переполнение. –

Хорошая статья о горизонтальной прокруткой меню here

И DEMO (Примечание: Уменьшение размера браузера)

источник

2014-02-25 10:28:19 isxaker

Спасибо @Mikhail, но мне точно нужно то, что я спросил. –

@ صفي добро пожаловать =) – isxaker

CSS: Создание горизонтального прокручиваемого меню

ответ

Смежные вопросы