با کمک جی کوئری کلاسیک، مقالات زیادی در این زمینه نوشته شده است. من سعی کردم با اضافه کردن قابلیت باز نگه داشتن بخش های منو (یا بسته، بسته به انتخاب کاربر) هنگام حرکت در سایت، کار را کمی پیچیده کنم.
برای حل این مشکل تصمیم گرفتم از افزونه jQuery Cookie استفاده کنم. مزیت این افزونه این است که عملیات در سمت کلاینت انجام می شود که به نوبه خود بار روی سرور را کاهش می دهد. منهای - اگر کاربر JS را غیرفعال کرده باشد، افزونه کار نخواهد کرد. ولی این گزینهمن در نظر نمی گیرم، زیرا در این صورت کل موضوع منوی کشویی به طور کلی ناپدید می شود. بنابراین، بیایید شروع کنیم.
ابتدا باید خود فریم ورک جی کوئری و افزونه کوکی جی کوئری را به هم وصل کنیم:

کد: HTML





بعدی نشانه گذاری است. مانند یک لیست ساده به نظر می رسد، هیچ چیز ماوراء طبیعی نیست. تنها چیزی که باید به آن توجه کنید این است که در برچسب

باید یک عنوان وجود داشته باشد، وقتی روی آن کلیک کنید، یک منو خارج می شود:

کد: HTML


و غیره تا بی نهایت. در حال حاضر، جالب ترین. در کد من چند نظر اضافه خواهم کرد تا تقریباً واضح باشد، chopach

کد: JS

$(document).ready(function()(
if($.cookie("num_open_ul"))( // بررسی کنید آیا ورودی کوکی وجود دارد
if($.cookie("num_open_ul") != 0)( // و این ورودی برابر با 0 نیست
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function()( // وقتی کلیک کردید، این تابع کار خواهد کرد
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // اگر بقیه باز هستند، همه را ببندید به جز مورد فعلی
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // open یک کلاس برای تغییر سبک اضافه کرد
setTimeout (fncookie، 600)؛ //نوشتن روی خود کوکی ها با تاخیر، به طوری که اسکریپت قبل از نوشتن زمان داشته باشد تا کار را کامل کند (500 میلی ثانیه - سرعت، تاخیر - 600 میلی ثانیه)
});
تابع fncookie()( // خود تابع ضبط
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":visible"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (expires:3, مسیر:"/")); // 3 روز برای کل سایت ذخیره کنید.
});
}
});


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

کد: CSS

#جهت یابی(
حاشیه: 80 پیکسل خودکار؛
عرض: 250 پیکسل
}
#navigation h2, #navigation h2.navigation_head (
اندازه فونت: 18px;
font-weight: bolder;
پس زمینه رنگ: #ffb6c1;
پس‌زمینه-تصویر: -webkit-gradient (خطی، 50٪ 0.50٪ 100٪، توقف رنگ (0٪، #ffe9e9)، توقف رنگ (100٪، #ffb6c1)).
پس زمینه-تصویر: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
پس زمینه-تصویر: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);

بالشتک: 5px 3px 6px 3px
حاشیه: خودکار;
موقعیت: نسبی;
}
#navigation h2.navigation_head:after (
موقعیت: مطلق;
سمت راست: 5px;
رنگ: #550000;
محتوا: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
مکان نما: اشاره گر
}
.active_navigation(
پس‌زمینه-تصویر: -webkit-gradient(خطی، 50% 0.50% 100%, توقف رنگ (0%,#ffb6c1)، توقف رنگ (100%,#ffe9e9)) !مهم.
پس زمینه-تصویر: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
پس زمینه-تصویر: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
پس زمینه-تصویر: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
موقعیت: مطلق;
سمت راست: 5px;
محتوا: "cssd" !important;
}
.navigation_body(
نمایش: هیچ
}
#ناوبری ul (
حاشیه: 0;
بالشتک: 0;
list-style-type: هیچکدام;
}
* html #navigation ul li(
ارتفاع: 1%;
}
#navigation div.navigation_body ul li (
حاشیه سمت چپ: 10 پیکسل؛
}
#ناوبری a (
font-family: "Times New Roman";
display:block;
رنگ: #918871;
padding: 3px
background-color: #ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: هیچ;
}
#navigation a:hover (
رنگ: #585858;
پس زمینه رنگ: #ffb6cc;
}


اگر کسی توجه کرد، در اینجا سعی کردم از محتوا استفاده کنم: ویژگی +/- وقتی منو بسته است / باز است، اما می توانید یک تصویر یا هر طرح دیگری اضافه کنید. شما می توانید نمونه ای از کارهایی که ما انجام دادیم را در اینجا مشاهده کنید

مثل همیشه، آماده گوش دادن به سوالات و تلاش برای پاسخ به آنها. بهترین ها، بهترین ها.

اغلب در قالب ها می توانید عناصر ناوبری کشویی را پیدا کنید. توسعه دهندگان استفاده می کنند نوع داده شدهمنوهای مخفی برای نمایش پیوندهای مخفی اضافی که به صورت موضوعی مرتبط با آیتم اصلی هستند. می توانید نمونه هایی از پانل های کشویی یا منوهای مختلف به سبک آکاردئونی را بیابید که این اصل ناوبری را اجرا می کنند.

اما در این آموزش یک منوی کشویی ساده با آن می سازیم با استفاده از jQuery. این با یک روش انیمیشن برای ایجاد جلوه های تاخیری کار می کند. جلوه های انتقال CSS3 نیز همراه با کد جاوا اسکریپت اعمال می شود. نتیجه یک فضای خالی برای ناوبری سایت است.

HTML

بیایید ابتدا یک قالب اولیه HTML5 بسازیم. نیاز خواهد داشت آخرین نسخه jQuery، که ما از API گوگل دریافت می کنیم. فایل استایل را نیز اضافه کنید styles.cssکه در زیر نشان داده خواهد شد:

نوار پیمایش افقی | سایت مواد سایت

اکنون ساختاری را در نظر بگیرید که در بالای لیست نامرتب بالای صفحه ساخته شده است. کل لیست در یک عنصر HTML5 پیچیده شده است