با استفاده از JQuery کلاسیک، مقالات زیادی در این زمینه نوشته شده است. من سعی کردم با اضافه کردن قابلیت باز گذاشتن بخش های منو (یا بسته، بسته به انتخاب کاربر) هنگام حرکت در سایت، کار را کمی پیچیده کنم.
برای حل این مشکل تصمیم گرفتم از افزونه کوکی جی کوئری استفاده کنم. مزیت این افزونه این است که عملیات در سمت کلاینت انجام می شود که به نوبه خود بار روی سرور را کاهش می دهد. منهای - اگر کاربر JS را غیرفعال کرده باشد، افزونه کار نخواهد کرد. اما من این گزینه را در نظر نمی گیرم، از آن زمان تمام نکته منوی کشویی ناپدید می شود. بنابراین، بیایید شروع کنیم.
ابتدا باید خود فریم ورک JQuery و افزونه کوکی JQuery را به هم وصل کنیم:
کد: HTML
بعد علامت گذاری است. مانند یک لیست ساده به نظر می رسد، هیچ چیز ماوراء طبیعی نیست. تنها چیزی که باید به آن توجه کنم این است که برچسب باید حاوی یک عنوان باشد، وقتی روی آن کلیک می کنید یک منو باز می شود:
کد: HTML
عنوان اول
- لینک اول
- لینک دوم
- لینک سوم
عنوان دوم
- لینک اول
- لینک دوم
- لینک سوم
عنوان سوم
- لینک اول
- لینک دوم
- لینک سوم
عنوان چهارم
- لینک اول
- لینک دوم
- لینک سوم
خوب، و غیره تا بی نهایت. حالا جالب ترین قسمت می آید. من چند نظر در کد اضافه می کنم تا تقریباً واضح باشد.
کد: 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"); // یک کلاس برای تغییر سبک به کلاس باز اضافه شد
setTimeout (fncookie، 600)؛ //ضبط خود را با تاخیر به کوکی تبدیل می کند، به طوری که اسکریپت قبل از ضبط زمان داشته باشد تا کار خود را کامل کند (500 میلی ثانیه - سرعت، تاخیر - 600 میلی ثانیه)
});
تابع fncookie())( // خود تابع ضبط
var number_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);
padding: 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";
نمایش: بلوک؛
رنگ: #918871;
padding: 3px;
background-color: #ffe3e0;
border-bottom: 1px solid #fff;
text-decoration: هیچ;
}
#navigation a:hover (
رنگ: #585858;
پس زمینه رنگ: #ffb6cc;
}
اگر کسی متوجه شد، در اینجا سعی کردم از محتوا استفاده کنم: ویژگی +/- زمانی که منو بسته/باز است، اما می توانید یک تصویر یا هر ساختار دیگری اضافه کنید. شما می توانید نمونه ای از آنچه را که به آن رسیدیم را در اینجا مشاهده کنید
مثل همیشه آماده گوش دادن به سوالات و پاسخگویی به آنها هستم. بهترین ها، بهترین ها.
در این مقاله ما یک منوی کشویی ساده با استفاده از jQuery ایجاد می کنیم. ابتدا به فایل دمو نگاهی بیندازید. امیدواریم حداقل کمی از jQuery و CSS را بدانید. جنبه های کلیدی ایجاد این منوی کشویی اعمال پارامترهای CSS است: موقعیت، بالا، چپ، z-index.
با استفاده از این پارامترها، می‌توانیم مطمئن باشیم که منوی ما دقیقاً در زیر پیوندی که ماوس را روی آن قرار داده بودیم ظاهر می‌شود و تمام عناصر دیگر را با دقت پوشش می‌دهد. ما همچنین باعث می‌شویم که منو در حالت شناور ظاهر شود و وقتی مکان‌نما از آن دور شد ناپدید می‌شود. برای پیاده سازی این رویدادها، از توابع jQuery استفاده می کنیم: mouseenter و mouseleave. و این تمام چیزی است که برای ایجاد یک منوی کشویی نیاز داریم!
فایل دمو نتیجه نهایی و لینک دانلود
کد HTML
کد HTML منوی کشویی را بررسی کنید:
همانطور که می بینید، در اینجا از لیست های نامرتب برای پیاده سازی آیتم های منو استفاده می کنیم. به هر پیوند منو یک کلاس منوی کشویی اختصاص داده می شود و خود منوی کشویی توسط یک کلاس زیر پیوند پوشش داده می شود. نام کلاس ها توسط jQuery برای تعیین اینکه کدام منو نمایش داده می شود استفاده می شود.
کد CSS
کد CSS را بررسی کنید:
/* CSS برای شروع منوی کشویی */
ul
{
list-style:none;
padding: 0px;
حاشیه: 0 پیکسل
}
اولی
{
نمایش: درون خطی;
شناور به سمت چپ؛
}
اولی الف
{
color:#ffffff;
پس زمینه:#990E00;
margin-right: 5px;
font-weight:bold;
اندازه فونت: 12px;
font-family:verdana;
text-decoration:none;
display:block;
عرض: 100 پیکسل؛
ارتفاع: 25 پیکسل
ارتفاع خط: 25 پیکسل.
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
حاشیه: 1px جامد #560E00;
}
ul li a: شناور
{
color:#cccccc;
پس زمینه:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
عرض: 100 پیکسل؛
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
حاشیه: 1px جامد #000000;
}
ul li.sublinks a
{
color:#000000;
پس زمینه:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
عرض: 100 پیکسل؛
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover
{
color:#000000;
پس زمینه:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
عرض: 100 پیکسل؛
text-align:center;
}
ul li.sublinks
{
نمایش: هیچ
}
/* CSS برای پایان منوی کشویی */
بیشتر کدهای CSS برای قالب‌بندی منوها استفاده می‌شود (شما می‌توانید ظاهر منو را هر طور که می‌خواهید شخصی‌سازی کنید)، اما چند نکته مهم در اینجا نیز وجود دارد:
1 – حذف برگه ها با استفاده از list-style:none.
2 - می دانیم که لیست ها عناصر بلوکی هستند و همیشه به ترتیب عمودی نمایش داده می شوند. برای اینکه آنها را به صورت افقی قرار دهیم، پارامتر عناصر درون خطی را به آنها می دهیم و با استفاده از کد آنها را به سمت چپ تراز می کنیم:
نمایش: درون خطی;
شناور به سمت چپ؛
3 - به طور پیش فرض، پیوندها عناصر درون خطی هستند. ما آنها را با استفاده از display:block به عناصر بلوک تبدیل می کنیم (بنابراین اکنون می توانیم مقدار عرض به آنها بدهیم).
4 - مخفی کردن کل منو با استفاده از:
Ul li.sublinks
{
نمایش: هیچ
}
جی کوئری
روزهای قدیم را تصور کنید که منوهای کشویی با استفاده از کد خام جاوا اسکریپت و تعداد زیادی کد غیر ضروری پیاده سازی می شدند. اما امروز تنها چیزی که نیاز داریم جی کوئری است:
$(تابع())(
Submenu.css((
موقعیت: "مطلق"،
zIndex: 1000
});
Submenu.stop().slideDown(300);
$(this).slideUp(300);
});
});
});
یک چیز بسیار جالب و ساده. بگذارید برای شما توضیح دهیم که چگونه کار می کند. برای شروع، و طبق معمول، کد خود را در یک کنترلر jQuery قرار می دهیم:
$(تابع())(
...
});
کد ما زمانی فعال می شود که نشانگر ماوس (عملکرد ماوس) روی عنصری که کلاس منوی کشویی ($(.dropdown)) به آن اختصاص داده شده است، فعال می شود. در مورد ما، این یک پیوند در منو است:
$(تابع())(
$(".dropdown").mouseenter(function())(
........
});
});
بیایید مطمئن شویم که قبل از اینکه نشانگر ماوس به پیوند بعدی بپرد، همه منوهای باز قبلی را hide() کنیم:
$(".sublinks").stop(false, true).hide();
به ویژگی توقف توجه کنید، که به ما کمک می‌کند زمانی که مکان‌نمای ماوس روی پیوندهای مختلف در منو حرکت می‌کند، تنها یک منوی کشویی را نمایش دهیم. اگر از این تابع استفاده نکنیم، هر منوی کشویی باز می‌ماند تا زمانی که نشانگر ماوس را کاملاً از منو دور کنیم. این مقداری همپوشانی ایجاد می کند، بنابراین باید از این امر اجتناب کنیم. در مرحله بعد، ما منوی کشویی گسترش یافته را می گیریم و آن را به یک متغیر اختصاص می دهیم:
زیر منوی Var = $(this).parent().next();
این چیزی است که در کد HTML اتفاق می افتد:
وقتی نشانگر ماوس روی پیوندی با کلاس کشویی قرار می‌گیرد، با استفاده از ()parent به عقب برمی‌گردیم و روی «li» توقف می‌کنیم، و سپس با استفاده از next ()، خود را در منوی کشویی مورد نظر می‌بینیم و «li» را می‌بینیم. قبلاً با پیوندهای زیر کلاس (پیوندهای فرعی) خواهد بود. به این ترتیب، jQuery پیدا کردن منوی کشویی برای نمایش زمانی که ماوس روی یک پیوند خاص قرار می‌گیرد، آسان‌تر می‌کند.
Submenu.css((
موقعیت: "مطلق"،
top: $(this).offset().top + $(this).height() + "px",
چپ: $(this).offset().left + "px"،
zIndex: 1000
});
کد بسیار مهم است زیرا تضمین می کند که منوی کشویی دقیقاً در زیر پیوند خاص نمایش داده می شود. اگر موقعیت روی مطلق تنظیم شده باشد، می توانیم عنصر را در هر قسمت از صفحه خود قرار دهیم. در مرحله بعد، با استفاده از $(this).offset().top، موقعیت شناور بالای پیوند را تعیین می کنیم (این به آیتم منوی فعلی اشاره دارد) و یک مقدار ارتفاع به آن اضافه می کنیم تا منو دقیقاً در زیر پیوند ظاهر شود. با پارامتر سمت چپ کاری مشابه انجام می دهیم. سپس از z-index استفاده می کنیم تا مطمئن شویم منوی ما در بالای عناصر دیگر ظاهر می شود.
Submenu.stop().slideDown(300);
البته، می توانید از گزینه های انیمیشن دیگری مانند fadeIn، انیمیشن با استفاده از سبک های خود و غیره استفاده کنید.
اکنون باید از مفهوم نمایش یک منوی کشویی دور شویم و آن را مخفی کنیم. ما به این قطعه کد نیاز داریم:
Submenu.mouseleave(function())(
$(this).slideUp(300);
});
برای مخفی کردن یک منوی کشویی، از slideUp، متضاد slideDown استفاده می کنیم. به خاطر داشته باشید که منوی فرعی متغیری است که برای تعریف یک منوی کشویی خاص ایجاد کرده ایم.
بنابراین، ما یک منوی کشویی تک سطحی جذاب در jQuery داریم.
امروز می خواهم مجموعه ای از نسل نسبتاً جدید ناوبری سایت را انتخاب کنم - منوهای تمام صفحه. آنها در مواردی استفاده می شوند که خود ناوبری در صفحه وجود ندارد، فقط یک دکمه وجود دارد، با کلیک کردن، یک منو باز می شود. یک اصل مشابه را می توان در چارچوب - مشاهده کرد: وقتی نوار ناوبری دیگر جا نمی شود، بلوک با لیست آیتم های منو به سادگی پنهان می شود. به جای آن یک دکمه با تصویری از، به عنوان یک قاعده، سه راه راه ظاهر می شود. با فشار دادن، منوی کامل ظاهر می شود. در بسیاری از وب سایت های مدرن، منو همیشه پنهان است، حتی در صفحه های بزرگ. این کار برای لود نشدن صفحه انجام شد. اگرچه اکنون نباید این کار را در همه پروژه های خود انجام دهید. اگر منو در درجه دوم اهمیت قرار دارد، می توانید آن را مخفی کنید، اما اگر یک سایت بزرگ با ساختار پیچیده دارید، بهتر است از این گزینه استفاده نکنید. بنابراین. ما اصل کلی عملکرد را فهمیدیم، اما این نوع منو کاملاً استاندارد است، من چیز جدیدی می خواهم. چندی پیش، متوجه سایت هایی شدم که در آنها پیمایش نه تنها حذف نمی شود، بلکه به طور کامل در یک پنجره پاپ آپ به صورت تمام صفحه باز می شود. چیزی شبیه به پانل های اسلاید محبوب، اما این همه چیز کل منطقه کار را اشغال می کند. پلاگین های جداگانه جی کوئری و راه حل های css3 در پشت سایت ها ظاهر شدند که این موضوع در واقع در مورد آن است.
من شخصاً این اجرای منوی ناوبری را دوست دارم، زیرا برای کاربران با دستگاه های تلفن همراه راحت است و در مانیتورهای بزرگ بسیار چشمگیر به نظر می رسد. سایت‌های بیشتری با منوهای تمام صفحه ظاهر می‌شوند، افزونه‌های رایگان jQuery نیز بیشتر می‌شوند و این مفهوم به تدریج در حال تبدیل شدن به یک روند است.
بنابراین. ما 20 افزونه jQuery را برای منوهای تمام صفحه در یک پنجره بازشو مورد توجه شما قرار می دهیم.
یک افزونه بسیار زیبا به طراحی پنجره، نماد SVG متحرک است. به طور پیش فرض مانند سه نوار به نظر می رسد، اما با کلیک بر روی آن، نماد به یک فلش تبدیل می شود که نشان می دهد منو می تواند پنهان شود. این اسکریپت جلوه ظاهری بسیار جالب و غیرعادی دارد. هنگامی که روی دکمه منو کلیک می کنید، یک موج از نماد با استفاده از css3 در کل مانیتور منتشر می شود که در پس زمینه آیتم های منو رشد می کند. همان اثر پنهان.
این ناوبری روی دستگاه های تلفن همراه عالی عمل می کند، اما با توجه به اینکه جلوه ظاهری آن بسیار سنگین است، فکر می کنم همه چیز در گوشی های قدیمی کند خواهد بود (من آن را تست نکرده ام، بنابراین خوشحال می شوم اگر تجربه خود را در نظرات بنویسید) .
متأسفانه، در تلفن های همراه به درستی کار نمی کند: اگر آیتم های منو زیادی وجود داشته باشد و روی صفحه قرار نگیرند، پیمایش عمودی ظاهر نمی شود و ناوبری به سادگی قطع می شود.
پس از دریافت چندین درخواست، تصمیم گرفتم مقاله ای در مورد نحوه ایجاد یک منوی کشویی بنویسم. بهترین و ساده ترین راه برای ایجاد چنین منوی تکیه بر jQuery است.
بیایید ابتدا به نشانه گذاری HTML نگاه کنیم
منوی کشویی ساده بر اساس jQuery منوی کشویی ساده
- صفحه اصلی
- محصولات
- خدمات
- با ما تماس بگیرید
محتوا
یک لیست ساده و نامرتب از ul وجود دارد، برچسب های li آن اساس منوی پیمایش هستند. بعد، کد زیر را به تگ li مناسب اضافه کنید، این فهرست کشویی را ساختار می دهد.
اگر دقت کنید دو چیز را متوجه می شوید:
1. تگ li یک کلاس کشویی دارد.
2. پیوند والد دارای کلاس ddIcon است.
کلاس کشویی در jQuery برای نمایش/پنهان کردن یک منوی کشویی استفاده می شود. کلاس دوم، ddIcon، برای نمایش یک اشاره گر به منوی کشویی استفاده می شود.
هیچ چیز خاصی در مورد سبک های منو وجود ندارد - سبک های معمول عبارتند از:
ظرف (عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک بالا: 50 پیکسل؛ ) .کانتینر h1 (اندازه قلم: 30 پیکسل؛ رنگ: #666؛ حاشیه پایین: 1em؛ ) .پیمایش کانتینر ( شعاع حاشیه: 4 پیکسل. رنگ پس‌زمینه: #fff؛ ارتفاع: 37 پیکسل؛ ) .container nav ul li (موقعیت: نسبی؛ شناور: سمت چپ؛) پررنگ؛ تبدیل متن: بزرگ؛ رنگ: #545454؛ بالشتک: 13 پیکسل 15 پیکسل؛ نمایشگر: بلوک؛ حاشیه سمت راست: 1 پیکسل توپر #f9f9f9؛ ) .container nav ul li a.ddIcon ( پس زمینه: url شفاف ") بدون تکرار 86% 52%؛ بالشتک: 13px 25px 13px 15px؛ ) .container nav ul li a:hover (background-color: #cc333f; color: #fff; ) .container nav ul li.active a ( پس زمینه -color: #cc333f؛ رنگ: #fff؛ .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( موقعیت: absolute; background-color: # cc333f؛ بالشتک: 15px 15px 20px؛ عرض: 172px؛ سمت چپ: 0px؛ بالا: 38px؛ صفحه نمایش: هیچکدام؛ .container nav ul li .subNav .navSection ( padding: 5px 0; ) .container nav ul li .subNav h4 ( margin-bottom: 0.5em; ) .container nav ul li .subNav h4 a (اندازه قلم: 11px؛ رنگ: #edc951؛ تبدیل متن: بزرگ؛ حاشیه-پایین: 1px جامد #D33B47؛ padding: 7px 10px؛ ) .container nav ul li .subNav h4 a:hover ( color: #edc951; ) .container nav ul li .subNav h4 a span ( float: right; font-size; font-size; . ؛ نمایش: بلوک؛ تبدیل متن: بزرگ کردن؛ رنگ: #fff؛ بالشتک: 7 پیکسل 15 پیکسل؛ -moz-transition: رنگ 0.5 ثانیه سهولت 0 ثانیه؛ ارتفاع خط: 1.3؛ .container nav ul li .subNav:hover (رنگ : #390206; ) .container .section ( واضح: هر دو؛ padding: 10px; ) .container .section article p (اندازه قلم: 16px؛ رنگ: #488fb8؛ ارتفاع خط: 1.3؛ .container .section header p ( بالشتک: 20 پیکسل؛ اندازه قلم: 20 پیکسل؛ رنگ: # 333؛ ارتفاع خط: 1.3؛ حاشیه پایین: .4em؛ )
حالا باید احیا کنیم فهرست کشویی. ساده ترین تابع jQuery در این امر به ما کمک می کند.
$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))($(".subNav").css(( "نمایش":"هیچکدام"))؛ $(".subNav"، this).css(("نمایش":"block")); $("nav ul li").css(("موقعیت":" نسبی ", "z-index":"1001")); $(this).addClass("فعال"); ) ), function())($(".subNav").css(("نمایش": "هیچ "))؛ $(this).removeClass("فعال")؛ $("nav ul li").css(("position":"نسبی"، "z-index":"1")); )) ;))
برای هر عنصر لیست، می توان منوی کشویی خود را ایجاد کرد: در داخل عنصر li، یک بلوک با کلاس .subnav قرار دهید، و همچنین کلاس .dropdown را به خود li اختصاص دهید.
