منوی درگ شدنی و دیو محصولات به صورت افقی با جی کوئری

[hbsoft]

136227

سلام دوستان عزیز و برنامه نویس
دوستانی که جی کوئری کار هستن کمکم کنن لطفا، من می خوام یه منو مثل منوی که تو عکس مشاهده می کنین ایجاد کنم چون خیلی طولانی هست می خوام وقتی کاربر اومد و منو رو درگ کرد و به سمت چپ و راست کشید منو حرکت کنه
لطفا اگه کسی میتونه کمکم کنه الان دو روزه درگیرشم :اشتباه::ناراحت::ناراحت::اشت� �اه::افسرده::افسرده:

[frednasri]

سلام.

می تونید از jQuery UI (https://jqueryui.com/draggable/) استفاده کنید.

موفق باشید.

[hbsoft]

مرسی از پاسخ
ولی اینو منم میدونم از اون استفاده میشه چطوری باید تگ های ul li رو حرکت بدم

[frednasri]

منوتون رو تو یه div بذارید و بعد اون div رو draggable کنید.

می خواین نمونه اش رو براتون بسازم؟

[hbsoft]

لطفا همین منو رو بسازین مرسی

[frednasri]

سلام.

براتون اینجا (http://jsfiddle.net/frednasri/nme72bgL/) ساختم.

البته خود منوش رو از اینجا (http://www.inmotionhosting.com/support/edu/website-design/using-css/simple-css-drop-down-menu) استفاده کردم. تمام منو رو تو یه div گذاشتم و بعد اون رو draggable کردم.

امیدوارم همون چیزی باشه که می خواستید.

موفق باشید.

[hbsoft]

این چیزی که شما لینک دادی رو خودم با css3 می تونم بنویسم این drop down menu هستش نه این چیزی که من گذاشتم عکسشو گذاشتم کاملا معلومه دیگه نمی دونم چطوری توضیح بدم
بی خیال داداش

[frednasri]

سلام.

عذر می خوام که هم منظورتون رو متوجه نشدم و هم وقتتون رو گرفتم.

به هر حال ببخشید و موفق باشید.

[hbsoft]

پدرم دراومد ولی بالاخره خودم پیدا کردم اینجا میزارم شاید یکی مثل من دنبالشه
html code:


<div class="categories">
<ul>
<li><span><a href="">ABC</a></span></li>
<li><span><a href="">DEF</a></span></li>
<li><span><a href="">GHI</a></span></li>
<li><span><a href="">JKL</a></span></li>
</ul>
</div>



JQuery Mobile:


$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;


$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");


$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});


$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});