منوی عمودی برای سایت در قالب یک آکوردئون با jQuery

منو، همانطور که می دانید - بخشی جدایی ناپذیر از سایت. جالب منبع آنلاین حرکت قادر به بازدید کنندگان علاقه است. علاوه بر این، ویژگی مهمی از هر منو - فشردگی آن است. یک منوی عمودی ساده به راحتی با استفاده از HTML و CSS ایجاد شده است. اما ما به بیشتر: اجازه بدهید به ما یاد بگیرند برای ایجاد منو "آکاردئون" با کمک جی کوئری.

درست "آکاردئون" منو

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

کد HTML غیر

بنابراین، برای ایجاد منوی عمودی ما، شما باید اول شماره گیری کد HTML، که خطوط زیر را شامل خواهد شد:

ذخیره سازی این کد را در یک فایل به نام Accord_menu.html.

همانطور که می بینید، ما یک لیست نامرتب ایجاد کرده اند. آن را از 3 امتیاز اصلی تشکیل شده:

- عکس؛

- فیلم؛

- کتاب.

هر آیتم دارای چند پاراگراف. کجا هستند #، شما نیاز به اضافه کردن لینک. در حال حاضر مهم است که برای توصیف سبک. این همه در نگاه از منابع اینترنت شما بستگی دارد. منوی عمودی برای سایت باید هماهنگ به طراحی آن در اختیار دارد.

CSS-کد

با سبک شما نباید دشوار است. ما توجه داشته باشید که در این مثال با استفاده از یک پر شیب. در اینجا CSS-کد فعال است:

رنگ در CSS-فایل مشخص شده، نشانگر اندازه از آیتم های موجود در لیست در سمت چپ برداشته شده است. مشخص چگونه به رفتار در هر یک از آیتم ها و زیر منو زمانی که شما بیش از آن شناور است. به عنوان مثال:

# e1fee2 - این رنگ پریده رنگ سبز زیر.

# C4f0f7 -golubovaty سایه زیر زمانی که شما شناور بر آنها.

اموال ها ارزش بلوک بپرسید برای تنظیم لایه و اندازه لازم است. رنگ، اندازه، نوع فونت، محل - همه چیز در فایل CSS توصیف می کنند. تماس با آن، برای مثال، accordionmenu_my1.css.

اتصال بهبود منوی جی کوئری

همانطور که شما ممکن است به یاد، هدف ما - برای ایجاد یک جی کوئری منوی عمودی. اگر شما با این تکنولوژی آشنا نیست، نگران نباشید. ما با استفاده از مخزن و اتصال گوگل اسکریپت جی کوئری. این امر به آن منو را جذاب تر. جی کوئری یک کتابخانه جاوا اسکریپت بر اساس تعامل نشانه گذاری ابرمتن HTML و جاوا اسکریپت است. جی کوئری شما اجازه می دهد برای دسترسی به مطالب و ویژگی های عناصر.

بنابراین، اتصال اسکریپت لازم را در بدن از HTML-فایل و مجموعه ای از قوانین برای ذخیره سازی 2 متغیر، به جز عناصر مسابقه اسب. کمک کد، بسته شدن زبانه های دیگر در باز کردن یک در که است با یک کلیک ماوس وجود دارد. در اینجا چگونه به نظر می رسد:

ذخیره تمام تغییرات، و آنچه در آن است در منوی مرورگر به نظر می رسد. که در نتیجه مشترک است: به عنوان یک نتیجه، ما آمده یک منوی جذاب است که شما همیشه می توانید تغییر دهید، بسته به تنظیمات خود را. و کسب دانش جدید در زمینه جی کوئری، CSS، شما را به عناصر منحصر به فرد از سایت ایجاد، بهبود مهارت های خود.