با کمک جی کوئری کلاسیک، مقالات زیادی در این زمینه نوشته شده است. من سعی کردم با اضافه کردن قابلیت باز نگه داشتن بخش های منو (یا بسته، بسته به انتخاب کاربر) هنگام حرکت در سایت، کار را کمی پیچیده کنم.
برای حل این مشکل تصمیم گرفتم از افزونه 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 پیچیده شده است برای بهترین نتایجسئو.
ساختار کد بسیار ساده است. هر آیتم لیست دارای یک افکت برجسته زمانی است که نشانگر ماوس در آن قرار دارد. تمام عناصر UL داخلی در آیتم فهرست اصلی قرار دارند، بنابراین هنگام انتقال به آیتم های منوی کشویی، تمرکز ورودی از بین نمی رود.
سبک های ناوبری
شیوه نامه حاوی کدی برای بازنشانی مقادیر ویژگی به پیش فرض است. بسیاری از توسعه دهندگان فایلی از Eric Meye را شامل می شوند، اما برای مورد ما این فایل بسیار سخت است. علاوه بر این، کد در سرور دیگری ذخیره می شود که به خودی خود همینطور است تصمیم بددر این مورد.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, big, cite, code, del, dfn, em، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، زیر، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلدها، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، عنوان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو (حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه؛ طرح کلی: هیچ؛ -webkit-font- صاف کردن: antialiased؛ -webkit-text-size-adjust: 100%؛ -webkit-box-sizing: border-box؛ -moz-box-sizing: border-box; box-sizing: border-box;) html ( ارتفاع : 101٪؛ ) بدن ( پس زمینه: #eaeaea url ("images/bg.png")؛ اندازه قلم: 62.5٪؛ ارتفاع خط: 1؛ فونت خانواده: Arial، Tahoma، sans-serif؛ padding-bottom : 60 پیکسل؛ ) مقاله، کنار، جزئیات، شکل، شکل، پاورقی، سرصفحه، h گروه، منو، ناوبری، بخش (نمایش: بلوک؛ ) ol، ul (لیست-سبک: هیچکدام؛ ) نقل قول، q ( نقل قول: هیچکدام؛ ) بلوک نقل قول:قبل، بلوک نقل قول:بعد، q:قبل، q:افتر ( محتوا: ""؛ محتوا: هیچکدام؛ ) قوی ( فونت -وزن: پررنگ؛ ) جدول (حاشیه-جمع کردن: جمع کردن؛ فاصله حاشیه: 0؛ ) img (حاشیه: 0؛ حداکثر عرض: 100%؛ )
یک ویژگی جالب در کد وجود دارد وب کیت-فونت-صاف کردن. این برنامه برای صاف کردن فونت ها هنگام اجرای کد در مرورگرهای زیر طراحی شده است کنترل مک OSX یا iOS.
حالا بیایید به منوی خود برویم.
#ddmenu (نمایش: بلوک؛ عرض: 100%؛ ارتفاع: 80 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 0 15 پیکسل؛ پسزمینه: #fff؛ شعاع حاشیه: 6 پیکسل؛ حاشیه: 1 پیکسل rgba جامد (0، 0، 0، 0.15 ؛ box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2)؛ مکان نما: اشاره گر؛ طرح کلی: هیچ؛ وزن قلم: پررنگ؛ رنگ: #8aa8bd؛ ) #ddmenu li (نمایش: بلوک؛ موقعیت: نسبی؛ شناور: سمت چپ؛ اندازه قلم: 1.45em؛ متن-سایه: 1px 1px 0 #fff؛ حاشیه سمت راست: 1px جامد #dae0e5; ) #ddmenu li a (نمایش: بلوک؛ شناور: چپ؛ بالشتک: 0 12px ؛ ارتفاع خط: 78 پیکسل؛ وزن قلم: پررنگ؛ متن تزئینی: هیچکدام؛ رنگ: #6c87c0؛ -webkit-transition: همه 0.2 ثانیه خطی؛ -moz-transition: همه 0.2 ثانیه خطی؛ -o-transition: همه 0.2 ثانیه خطی؛ انتقال: همه 0.2 ثانیه خطی؛ ) #ddmenu li:hover > a ( رنگ: #7180a0؛ پسزمینه: #d9e2ee؛ ) #ddmenu ul (موقعیت: مطلق؛ بالا: 88 پیکسل؛ عرض: 130 پیکسل؛ پسزمینه: # fff؛ نمایش: هیچکدام؛ حاشیه: 0؛ بالشتک: 7 پیکسل 0؛ سبک فهرست: هیچکدام؛ شعاع حاشیه: 3 پیکسل؛ حاشیه: 1 پیکسل rgba جامد (0، 0، 0، 0.2)، کادر سایه: 0 0 5px rgba(0، 0، 0، 0.2)؛ )
افزودن انتخابگر #ddmenuulبرای برجسته کردن تمام عناصر داخلی در هر آیتم فهرست، زیرا تعیین فاصله برای استفاده از آنها مهم است موقعیت یابی مطلق. ما همچنین یک انتقال خطی را برای همه پیوندها اضافه می کنیم، که وقتی ماوس را روی آنها نگه دارید ظاهر می شود.
حالا بیایید به ایجاد نشانگر عنصر بالا نگاه کنیم. با استفاده از ویژگی چرخش و یک جعبه جهانی با پس زمینه تیره برای سایه شکل می گیرد. با موقعیت افست، یک عنصر از ساختار ما بالاتر از دیگری قرار می گیرد و یک نمایش بصری از اشاره گر در منوی کشویی را تشکیل می دهد.
#ddmenu ul:after ( محتوا: ""؛ عرض: 0؛ ارتفاع: 0؛ موقعیت: مطلق؛ پایین: 100%؛ سمت چپ: 8 پیکسل؛ حاشیه-عرض: 0 8 پیکسل 8 پیکسل؛ سبک حاشیه: جامد؛ حاشیه-رنگ : #fff transparent; ) #ddmenu ul:before ( محتوا: ""؛ عرض: 0؛ ارتفاع: 0؛ موقعیت: مطلق؛ پایین: 100%؛ سمت چپ: 4 پیکسل؛ عرض حاشیه: 0 10 پیکسل 10 پیکسل 10 پیکسل؛ سبک حاشیه : جامد؛ رنگ حاشیه: rgba(0، 0، 0، 0.1) شفاف؛ ) #ddmenu ul li (نمایش: بلوک؛ عرض: 100%؛ اندازه قلم: 0.9em؛ متن-سایه: 1px 1px 0 #fff - o-transition: همه 0.2 ثانیه خطی؛ انتقال: همه 0.2 ثانیه خطی؛ ) #ddmenu ul li a:hover ( پس زمینه: #e9edf3; )
جاوا اسکریپت
بخش اول کد، کلیک روی پیوندها را قطع می کند و پردازش آنها را به طور پیش فرض متوقف می کند (بارگیری صفحات در URL).
قسمت دوم کد همه جادو را انجام می دهد. ما یک کنترل کننده رویداد را برای فرآیند شناور مورد فهرست پیوست می کنیم. کنترل کننده انیمیشن فعال فعلی را متوقف می کند و زیر جدید را با .slideDown() نمایش می دهد. ما همچنین یک تأخیر کوتاه را تنظیم کردیم تا فقط به انتخاب واقعی مورد پاسخ دهد.
اگر همه این موارد زیر یکدیگر قرار گیرند، ممکن است منو به قدری بزرگ شود که ارتفاع آن از ارتفاع محتوای اصلی بیشتر شود. از بیرون، خیلی زیبا نخواهد بود، علاوه بر این، یافتن چیزی در چنین لیست مداوم سخت است. برای گروه بندی و کاهش همه چیز، باید کاری به عنوان یک منوی کشویی انجام دهید.
اصل منوی کشویی این است که آیتم های منو به گروه ها تقسیم می شوند و این گروه ها مخفی هستند و فقط نام گروه قابل مشاهده است. با کلیک بر روی نام، لیستی از تعداد معینی از آیتم ها نمایش داده می شود.
چگونه یک منوی کشویی بسازیم؟ این به ما کمک می کند - جی کوئری. با آن، مانند مثال بالا، همه چیز به آرامی و زیبایی کار خواهد کرد. بیایید پیاده سازی منوی کشویی را شروع کنیم و چند کار را انجام دهیم.
اسکریپت جی کوئری
طبق معمول، هنگام کار با jQuery، باید کتابخانه آن را نیز اضافه کنید. همه چیز طبق معمول است، در هدر یا پاورقی ما متصل می شویم، مگر اینکه قبلاً این کار را برای اسکریپت های دیگر انجام داده باشید.
بعد از کتابخانه، اسکریپت را اضافه کنید. که انیمیشن را اجرا می کند 3 اسکریپت وجود دارد که هر کدام به صورت متفاوتی انیمیشن را اجرا می کنند.
این اسکریپت به گونه ای کار می کند که وقتی روی نام دسته کلیک می کنید، لیستی بیرون می آید، اما وقتی روی دسته دیگری کلیک می کنید شروع به بزرگ شدن می کند در حالی که دسته اول بسته می شود. یعنی فقط یک دسته همیشه باز است. اگر به دسته های باز نیاز دارید که بسته نشوند بطور خودکار، سپس اسکریپت را با اسکریپت جدید که در زیر نشان داده شده است جایگزین کنید.
اسکریپت دیگری وجود دارد که می توانید اسکریپت اصلی را با آن جایگزین کنید. ویژگی آن این است که منوی اسلاید در حالت شناوراتفاق می افتد. نیازی به کلیک نیست، فقط روی نام دسته نگه دارید و تمام. بنابراین انتخاب کنید که کدام اسکریپت برای شما مناسب تر است.
نشانه گذاری HTML
اکنون، در جای مناسبدر سایت خود، باید نمایش دهید HTML- نشانه گذاری خوب، یا کمی مال خود را تغییر دهید تا شبیه به مثال شود.
هیچ چیز پیچیده ای وجود ندارد، همه چیز با کمک سازماندهی شده است - ul-فهرست ها
سبک های CSS
و در نهایت، برای تنظیم ظاهر درست برای منو، باید استایل ها را ثبت کنیم. اگر این اولین بار نیست که با آن کار می کنید css، سپس می توانید به راحتی استایل ها را برای خود شخصی سازی کنید.
Ul#menu، ul#menu ul(list-style:none; margin: 0px; padding: 0px; width: 250px; -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2); - moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2)؛ box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);) ul#menu a,ul#u (نمایش: بلوک؛ تزیین متن: هیچکدام؛) ul#menu li (حاشیه بالا: 1px؛) ul#menu li a,ul#menu li span( پس زمینه: #1ba600؛ رنگ: #fff؛ بالشتک: 7px; ). منوی li ul li a:hover (پس زمینه: #ddd;)
هیچ چیز دیگری لازم نیست. این روشخیلی پیچیده نیست و چندین نوع پیاده سازی دارد، همه چیز به اسکریپتی که انتخاب می کنید بستگی دارد.
همین، از توجه شما متشکرم. 🙂
در این آموزش، ما به شما نشان خواهیم داد که چگونه یک منوی کشویی کناری برای ناوبری آسان تر وب سایت ایجاد کنید. این منو یک روند محبوب است طراحی وب مدرن. بسیاری از سایت ها از این نوع منو استفاده می کنند. با استفاده از آن، می توانید از شر هرج و مرج موجود در صفحات پروژه خلاص شوید، آن را خواناتر کنید و توجه کاربران را روی محتوای اصلی متمرکز کنید.
این یک راه عالی برای رسیدن به مینیمالیسم بدون حواس پرتی است. امروز ما خودمان چنین منویی ایجاد خواهیم کرد.
برای ایجاد یک منوی ناوبری، ابتدا نگاهی به تنظیمات بیندازیم:
ابتدا باید Normalize.css را بارگیری کنید و سبک های پیش فرض مرورگر را تنظیم کنید، مطمئن شوید که منو در همه مرورگرها یکسان به نظر می رسد. ما از FontAwesome برای نمایش یک فلش در مقابل آیتم های منو با آیتم های فرعی استفاده خواهیم کرد. برای جابهجایی کلاسها در منو، jQuery را بارگذاری میکنیم و همه کدهای سفارشی jQuery را به script.js منتقل میکنیم. آخرین لینک جدول اصلی پروژه وب است.
نماد همبرگر
نماد همبرگر یک ویژگی ناوبری رایج سایت است. اغلب با یک فونت آیکون مانند FontAwesome ایجاد می شود، اما در این آموزش ما کمی انیمیشن اضافه می کنیم، بنابراین آن را از ابتدا می سازیم. نماد همبرگر ما یک تگ span شامل سه کلاس div است که به صورت نوارهای افقی ارائه شده است.
سبک ها به شکل زیر هستند:
دکمه تغییر وضعیت (موقعیت: ثابت؛ عرض: 44 پیکسل؛ ارتفاع: 40 پیکسل؛ بالشتک: 4 پیکسل؛ انتقال: 0.25 ثانیه؛ شاخص z: 15؛ ) -bar (موقعیت: مطلق؛ شعاع حاشیه: 2 پیکسل؛ عرض: 80 درصد؛ انتقال: 0.5 ثانیه؛ ) .دکمه جابهجایی .menu-bar-top (حاشیه: 4 پیکسل توپر #555؛ حاشیه-پایین: هیچکدام؛ بالا: . -پایین (حاشیه: 4px جامد #555؛ حاشیه بالا: هیچ، بالا: 22 پیکسل؛ ) .button-open .menu-bar-top (transform: rotate(45deg) translate(8px, 8px); transition: 0.5s; ) .button-open .menu-bar-middle ( transform: translate(230px); transition: 0.1s ease-in; opacity: 0; ) .button-open .menu-bar-bottom (transform: rotate(-45 deg) ترجمه (8 پیکسل، -7 پیکسل)؛ انتقال: 0.5 ثانیه؛ )
نماد موقعیت ثابتی دارد و با پیمایش صفحه تغییر نمی کند. همچنین دارای z-index 15 است که به این معنی است که همیشه در بالای عناصر دیگر خواهد بود. از سه نوار تشکیل شده است که هر کدام دارای سبک های دیگری هستند. بنابراین، هر نوار را به کلاس .menu-bar منتقل می کنیم. سبک های باقی مانده به کلاس های جداگانه منتقل می شوند. جادو زمانی اتفاق می افتد که کلاس دیگری را به تگ span اضافه کنیم که عمومی است. ما آن را با jQuery به این صورت اضافه می کنیم:
$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ($(this).toggleClass("button-open" ) ) ) ) ) );
برای کسانی که با jQuery آشنایی ندارند، یک متغیر را با $toggleButton که حاوی نماد ما است، مقداردهی اولیه می کنیم. بدون نیاز آن را در یک متغیر ذخیره می کنیم استفاده از جاوا اسکریپت. سپس یک شنونده رویداد ایجاد می کنیم که به کلیک روی نمادها گوش می دهد. هر بار که کاربر روی نماد همبرگر کلیک میکند، شنونده رویداد تابع ()toggleClass را فعال میکند که کلاس .button-open را تغییر میدهد.
هنگامی که کلاس .button-open اضافه شد، می توانیم از آن برای تغییر نحوه نمایش عناصر استفاده کنیم. ما از توابع CSS3 translate() و rotate() استفاده می کنیم تا میله های بالا و پایین 45 درجه بچرخند و نوار میانی به سمت راست جابجا شده و ناپدید می شود. در اینجا انیمیشن هایی هستند که می توانید سفارشی کنید:
منوی ناوبری کشویی
اکنون که نماد همبرگر خود را دارید، بیایید آن را مفید کنیم و با کلیک بر روی آن یک منوی کشویی ایجاد کنیم. در اینجا نشانه گذاری منو به نظر می رسد:
ما در حال حاضر به جزئیات هر سبک این منو نمی پردازیم، اما در عوض روی چند مورد تمرکز می کنیم. نکات مهم. اول از همه، این یک کلاس div و .menu-wrap است. به سبک های او نگاه کنید:
بسته بندی منو ( رنگ پس زمینه: #6968AB؛ موقعیت: ثابت؛ بالا: 0؛ ارتفاع: 100٪؛ عرض: 280 پیکسل؛ حاشیه سمت چپ: -280 پیکسل؛ اندازه قلم: 1em؛ وزن قلم: 700؛ سرریز: خودکار ؛ انتقال: .25 ثانیه؛ z-index: 10؛ )
موقعیت ثابت است، بنابراین هنگام پیمایش صفحه، منو همیشه در همان موقعیت باقی می ماند. ارتفاع 100% به منو اجازه می دهد تا تمام فضای عمودی صفحه را اشغال کند. توجه داشته باشید که فیلد حاشیه سمت چپ روی یک عدد منفی برابر با عرض منو تنظیم شده است. این بدان معنی است که منو از پنجره نمایش ناپدید می شود. برای اینکه دوباره قابل مشاهده باشد، یک کلاس toggler دیگر با jQuery ایجاد می کنیم. فایل جاوا اسکریپت ما به شکل زیر خواهد بود:
$(document).ready(function() var $toggleButton = $(".toggle-button")، $menuWrap = $(".menu-wrap"); $toggleButton.on("click"، function() ($(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );
یک متغیر $menuWrap که حاوی بسته بندی منو است اضافه کنید. از همان رویداد handler که قبلا ایجاد کردیم استفاده کنید. فقط این بار دو کلاس را تغییر می دهیم: یکی برای دکمه و دیگری برای بسته بندی منو. مقدار حاشیه سمت چپ کلاس .menu-show 0 است، این یک افکت سایه اضافه می کند.
نمایش منو ( حاشیه-چپ: 0؛ کادر-سایه: 4 پیکسل 2 پیکسل 15 پیکسل 1 پیکسل #B9ADAD؛ )
زیر منوها و لینک ها
ممکن است متوجه شوید که یکی از آیتم های لیست دارای یک کلاس .menu-item-has-children است که حاوی یک منوی فرعی است. همچنین، درست در زیر پیوند یک تگ span با کلاس .sidebar-menu-arrow قرار دارد.
span یک عنصر شبه::after دارد و حاوی یک فلش FontAwesome است. به طور پیش فرض، منوی فرعی پنهان است و تنها با کلیک بر روی فلش قابل مشاهده خواهد بود. در اینجا نحوه انجام این کار با jQuery آمده است:
$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ($(this).next().slideToggle(300); ))))))
وقتی روی فلش کلیک می کنیم، تابعی را فراخوانی می کنیم که به نوبه خود عنصر بعدی را بلافاصله بعد از span (در مورد ما، یک زیر منو) هدف قرار می دهد و آن را قابل مشاهده می کند. تابعی که ما استفاده می کنیم slideToggle است. باعث می شود عنصر ظاهر و ناپدید شود. تابع در مثال ما یک پارامتر دارد - مدت زمان انیمیشن.
آیتم های منو در مثال دارای جلوه شناور هستند. با استفاده از::after شبه عنصر ایجاد می شود. کد به شکل زیر است:
نوار کناری منو li > a::after ( محتوا: ""؛ نمایش: بلوک؛ ارتفاع: 0.15em؛ موقعیت: مطلق؛ بالا: 100%؛ عرض: 102%؛ سمت چپ: 50%؛ تبدیل: ترجمه(-50% تصویر پسزمینه: گرادیان خطی (به راست، شفاف 50.3%, #FFFA3B 50.3%)؛ انتقال: پسزمینه موقعیت 0.2s 0.1s آسانتر؛ اندازه پسزمینه: 200% خودکار؛ .menu-sidebar li > a:hover::after (موقعیت پس زمینه: -100% 0؛ )
شبه عنصر ::after حاوی یک عنصر سطح بلوک در پایین هر پیوند با عرض کامل و ارتفاع 0.15 میلیمتر است. به نظر همه چیز زیر خط کشی است. ویژگی این است که ما فقط یک رنگ پس زمینه را روی خط اعمال نمی کنیم، بلکه از تابع ()linear-gradient در آن استفاده می کنیم. تصویر پس زمینه. اگرچه این تابع برای ایجاد گرادیان رنگ در نظر گرفته شده است، اما می توانیم با تعیین درصد مورد نظر رنگ را تغییر دهیم.
نوار کناری منو li > a::after ( پسزمینه-تصویر: گرادیان خطی (به راست، شفاف 50.3%, #FFFA3B 50.3%)؛ )
نیمی از خط در اینجا شفاف و نیمی دیگر زرد است. با 200 درصد کردن اندازه پس زمینه، عرض بلوک خود را دو برابر می کنیم. اکنون قسمت شفاف تمام عرض پیوند را می گیرد و قسمت زرد رنگ به سمت چپ حرکت می کند و نامرئی می شود. ما موقعیت پسزمینه شناور را به -100% تغییر میدهیم. حالا قسمت زرد نمایان می شود و قسمت شفاف پنهان می شود.
به جای قسمت شفاف، می توانید از هر رنگ دیگری استفاده کنید. شما همچنین می توانید با گرادیان آزمایش کنید.
هر یک از عناصری که در نظر گرفته ایم به عنوان یک کل کار می کنند. شما می توانید چنین منویی را با استفاده از هر طراحی وب سایتی از مجموعه TemplateMonster ایجاد کنید. همانطور که می بینید، این ساده تر از چیزی است که فکر می کنید. موفق باشید در ایجاد وب سایت های حرفه ای و کاربر پسند!
برای اینکه ناوبری خود را در قالب یک منوی کشویی عمودی در jQuery با لیست کشویی زیرمجموعه ها بنویسید، باید اصل این مکانیسم را درک کنید. اما ابتدا اجازه دهید نگاهی به ساختار ناوبری بیندازیم:
جهت یابی
همانطور که ممکن است حدس بزنید، منوی کشویی ما بر اساس لیست های گلوله ای است. هنگامی که ماوس را روی یک برچسب قرار می دهید
- تست 1
- تست 2
- تست 3
- تست 4
اما چگونه، شما بپرسید؟ بله، در واقع بسیار ساده است. ابتدا بیایید شیوه نامه لیست ناوبری خود را درک کنیم، به این صورت خواهد بود:
بدنه ( پسزمینه: rgb(244، 244، 244)؛ فونت-خانواده: Verdana؛ وزن قلم: 100؛ ) /*---Navigation---*/ #menu (عرض: 200 پیکسل؛ حاشیه: 0؛ padding: 2px؛ ) #menu li (list-style-type: هیچ؛ ) .menu ( موقعیت: نسبی؛ پسزمینه: شکلات؛ پسزمینه: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ؛ پسزمینه: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3؛ پسزمینه: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3؛ حاشیه : 1px جامد #2AC4B3؛ .menu:hover ( پسزمینه: #00c؛ پسزمینه: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); پسزمینه: -webkit-linear-gradient( بالا، rgb(230، 230، 230)، #0CBFAB؛ پسزمینه: -o-linear-gradient(بالا، rgb(230، 230، 230)، #0CBFAB؛ ) . دهانه منو (عرض: 11 پیکسل؛ ارتفاع: 11 پیکسل؛ نمایشگر: بلوک؛ موقعیت: مطلق؛ بالا: 8 پیکسل؛ سمت راست: 10 پیکسل؛ مکان نما: نشانگر؛ ) .menu ul (عرض: 150 پیکسل؛ حاشیه: 0؛ پد: 1 پیکسل؛ موقعیت: مطلق؛ بالا: -1 پیکسل؛ سمت چپ: 198 پیکسل؛ ) .menu ul li ( پس زمینه: شکلات؛ پس زمینه: -moz-linear-gradient(بالا، rgb(198، 255، 242)، #2AC4B3); پس زمینه: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); پس زمینه: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); حاشیه: 1px جامد #fff; .menu ul li:hover ( پسزمینه: #00c؛ پسزمینه: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); پسزمینه: -webkit-linear-gradient(top, rgb( 230، 230، 230)، #0CBFAB؛ پسزمینه: -o-linear-gradient(بالا، rgb(230، 230، 230)، #0CBFAB); دکوراسیون: هیچ؛ رنگ: سفید؛ ) .menu a:hover (رنگ: سفید؛ ) /*---END---*/
از شیوه نامه می توان دریافت که لیست کشویی در ابتدا مخفی نیست، اما ما این لحظه را با استفاده از:
$(document).ready(function()($(".menu ul").hide(); $(".menu span").css("background"، "url("down.png")") ; $("#menu li").hover(function()($(this).children("ul").show(); /*معادل $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /*معادل $("span"، this).css("background", "url ("right.png")");*/ ),function()($(this).children("ul").hide(); /*معادل $("ul", this).hide (); */ $(this).find("span").css("background"، "url("down.png")"); /*$("span", this).css("background" "، " url("down.png")");*/ ))))
حالا بیایید نگاهی دقیق تر به کد منوی کشویی jQuery بیندازیم، زیرا. شاید برای کسی کاملاً روشن نباشد. در همان ابتدا ساختار زیر نوشته شده است:
$(document).ready(function()( ))
این شامل دستوراتی است که باید پس از بارگیری کامل صفحه اجرا شوند. این کار به گونه ای انجام می شود که در صورت عدم امکان یافتن هر شیئی به دلیل اینکه هنوز بارگذاری نشده است، انواع خطاها ظاهر نمی شوند.
$(".menu ul").hide();
این مدخل به چه معناست؟ ساختار "$()" به شما امکان می دهد عناصر را انتخاب کنید. بنابراین، در همان ابتدا، باید لیست کشویی خود را مخفی کنیم. ساختار "$()" را می گیریم و شی مورد علاقه خود را در آن می نویسیم. در مورد ما، این شی خواهد بود لیست گلوله ایبا کلاس "منو". در مرحله بعد، روش "hide ()" را می نویسیم که به ما امکان می دهد شی مورد علاقه خود را پنهان کنیم.
$(".menu span").css("پس زمینه"، "url("down.png")");
او چه کار می کند؟ او به دنبال یک برچسب است عنصر والدکه کلاس "menu" به آن اختصاص داده شده و با استفاده از روش "css("background", "url("down.png")") به ویژگی سبک "background" مقدار "url("down" اختصاص داده شده است. .png")". "down.png" نمادی است که نشان می دهد لیست را می توان گسترش داد.
سپس ساخت و ساز می آید، که لیست ما را باز می کند، به نظر می رسد این است:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("پس زمینه"، " url("right.png")"); ),function()($(this).children("ul").hide(); $(this).find("span").css("پس زمینه" , "url("down.png")");)
ما به دنبال برچسبی هستیم که عنصر والد آن به id="menu اختصاص داده شده باشد. سپس متد "hover" و دو تابع داخل پرانتز آمده است. اولین تابع زمانی اجرا می شود که نشانگر ماوس را نگه دارید و تابع دوم در صورتی اجرا می شود که نشانگر ماوس عنصر مورد نظر را به ما بسپارد.
تابع اول می گوید:
$(this).children("ul").show(); $(this).find("span").css("پس زمینه"، "url("right.png")");
ساختار "$(this)" به این معنی است که ما به عنصری که روی آن هستیم علاقه مند هستیم این لحظهاشاره کرد (این از انگلیسی این). و به تگ اشاره کردیم
پس از آن، ما به دنبال فرزندان تگ هستیم، یعنی: تگ و پسزمینه آن به نماد دیگری تغییر میکند.
پس از آن، پس از خروج مکاننمای ماوس از عنصر فهرست، تابعی نوشته میشود که همه چیز را همانطور که در ابتدا بود انجام میدهد:
Function()($(this).children("ul").hide(); $(this).find("span").css("background"، "url("down.png")"); )
برای اینکه کد نوشته شده jQuery کار کند و منوی کشویی ما به درستی کار کند، باید کتابخانه را از وب سایت jquery.com دانلود کرده و با نوشتن آن پس از تگ باز، آن را وارد کنید.
رشته.باشه الان همه چی تموم شد! در پایان، می خواهم توجه داشته باشم که اگر سایت شما کاملاً سنگین باشد، احتمالاً اسکریپت خیلی دیر اجرا می شود (بارگیری سایت زمان زیادی طول می کشد) و کاربران می بینند که چگونه ابتدا به طور کامل باز می شود و تنها پس از آن پنهان می شود. ، می بینید، بسیار زشت است. بنابراین، لازم است تمام دستورات jQuery را فراتر از این ساختار انتقال دهیم: "$(document).ready(function()())". شبیه این خواهد شد:
$(document).ready(function()( )) $(".menu ul").hide(); $(".menu span").css("پس زمینه"، "url("down.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("پس زمینه"، " url("right.png")"); ),function()($(this).children("ul").hide(); $(this).find("span").css("پس زمینه" ، "url("down.png")"); ))
اتصال اسکریپت ماباید از تگ منتقل شود
در پایان، قبل از تگ بسته شدن، یا می توانید اسکریپت را درست بعد از لیست گلوله ای قرار دهید.(دانلود: 312)