منوی کشویی هموار با کلیک. منوی کشویی در جی کوئری منوی کشویی ساده

پس از دریافت چندین درخواست، تصمیم گرفتم مقاله ای در مورد نحوه ایجاد یک منوی کشویی بنویسم. بهترین و ساده ترین راه برای ایجاد چنین منوی تکیه بر jQuery است.

بیایید ابتدا به نشانه گذاری HTML نگاه کنیم.

منوی کشویی مبتنی بر جی کوئری منوی کشویی ساده

• صفحه اصلی
• محصولات
• خدمات
• با ما تماس بگیرید

محتوا

یک لیست ساده و نامرتب 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((" display":"none")); $(".subNav"، this).css(("نمایش":"block")); $("nav ul li").css(("position":"نسبی ", "z-index":"1001")); $(this).addClass("فعال"); ) ), function()($(".subNav").css(("display":"هیچکدام "))؛ $(this).removeClass("فعال")؛ $("nav ul li").css(("position":"نسبی"، "z-index":"1")); )) ;))

برای هر عنصر لیست، می‌توان منوی کشویی خود را ایجاد کرد: در داخل عنصر li، یک بلوک با class.subnav قرار دهید و همچنین class.dropdown را به خود li اختصاص دهید.

در حال حاضر منوهای پیمایش jQuery چیزی بیش از بلوک های متنی با لینک در آنها هستند. من به شما نشان دادم که چگونه می توانید با استفاده از jQuery و CSS3 یک منوی ناوبری بسیار جالب ایجاد کنید.

با قدرت jQuery می توانیم منوی ناوبری را به یک منوی پویا تبدیل کنیم. در حالی که در حال حاضر فقط می توانید از CSS3 برای ایجاد ناوبری پویا استفاده کنید، jQuery منوها را حتی قدرتمندتر می کند.

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

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

امروز من 30 نمونه عالی از منوی ناوبری جی کوئری را برای شما آورده ام.

Pushy یک منوی ناوبری پاسخگو و غیر بوم با استفاده از تبدیل و انتقال CSS است. در دستگاه های تلفن همراه عالی کار می کند. حتماً نسخه ی نمایشی را بررسی کنید و مطمئناً آن را دوست خواهید داشت.

نسخه ی نمایشی | دانلود

این یکی دیگر از منوهای جی کوئری عالی برای ایجاد لیست های پیمایشی زیبا است. ویژگی متمایز آن اندازه کوچک فایل های منبع است.

نسخه ی نمایشی | دانلود

این یک منوی بازشو پاسخگو ساده با برخی از ویژگی های بسیار جالب است. هنگامی که روی نماد منو کلیک می کنید، یک پنجره منو با نمادهای آیتم ظاهر می شود. نسخه ی نمایشی را بررسی کنید.

نسخه ی نمایشی | دانلود

Slidebars یک فریم ورک جی کوئری برای پیاده سازی سریع و آسان سبک های برنامه بدون گره خوردن به بوم است. نوارهای اسلاید همچنین تغییرات جهت و تغییر اندازه را کنترل می کنند.

نسخه ی نمایشی | دانلود

یک منوی جی کوئری که یک منوی سایت متحرک مربعی را با استفاده از jQuery و CSS3 ارائه می کند. با تماشای نسخه ی نمایشی آن را بررسی کنید.

نسخه ی نمایشی | دانلود

این منوی پیمایش jQuery صفحه را به یک منوی سه بعدی تبدیل می کند. ایده این است که یک طراحی اپلیکیشن موبایل ایجاد کنید که در آن با کلیک بر روی نماد منو، محتوای صفحه به طرفین منتقل شود و منو به جلو آورده شود.

نسخه ی نمایشی | دانلود

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

نسخه ی نمایشی | دانلود

منوی جی کوئری برای برنامه های بوم و غیر پیوند با موارد فرعی بازشو. به لطف گزینه ها، افزونه ها و افزونه های متعدد، سفارشی سازی منو بسیار انعطاف پذیر امکان پذیر است.

نسخه ی نمایشی | دانلود

پلاگین جی کوئری برای ایجاد منوها و افزودن آسان ویژگی های واکنش گرا. با Sidr می توانید عناصر مختلفی از سایت خود و همچنین منوهای واکنش گرا ایجاد کنید.

نسخه ی نمایشی | دانلود

slimMenu یک پلاگین کوچک جی کوئری است که به شما کمک می کند تا منوهای ناوبری لایه ای و پاسخگو ایجاد کنید. نکته جالب در مورد آن این است که می توانید چندین منو مختلف داشته باشید و همه آنها کاملاً پاسخگو خواهند بود.

نسخه ی نمایشی | دانلود

منوی پیمایش jQuery که به شما امکان می دهد یک منوی افقی را در کل عرض ظرف تنظیم کنید. این افزونه کار را بسیار آسان می کند. از طرف دیگر، پشتیبانی از IE7 می تواند پیاده سازی شود.

نسخه ی نمایشی | دانلود

این اولین نمونه تلفن همراه از استفاده از پرسش‌های رسانه‌ای و جاوا اسکریپت برای ایجاد یک منوی لایه‌ای عالی با پشتیبانی از صفحه‌نمایش لمسی، جلوه‌های شناور، و ناوبری صفحه‌کلید است.

نسخه ی نمایشی | دانلود

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

نسخه ی نمایشی | دانلود

یک پلاگین منوی جی کوئری که راهی ساده و شهودی برای نمایش منوها ارائه می دهد. لیست منوهای پاسخگو ایجاد می کند. روی همه دستگاه ها کار می کند!

نسخه ی نمایشی | دانلود

Shifter یک پلاگین jQuery اولین موبایل برای ایجاد منوهای اسلاید است که با کلیک روی دکمه shift از سمت راست ظاهر می شوند. تنها یک گزینه maxWidth برای پیکربندی وجود دارد. این به شما امکان می دهد وضوح / جهت دستگاه های تلفن همراه را تنظیم کنید.

نسخه ی نمایشی | دانلود

Hamburger یک پلاگین جی کوئری برای ایجاد یک منوی اسلاید به سبک برنامه Android است که یک منوی بازشو در سمت راست صفحه قرار می دهد. وقتی منو به اندازه کامل گسترش می یابد، قسمت محتوا را پوشش می دهد اما نوار عمل را پوشش نمی دهد.

نسخه ی نمایشی | دانلود

Focucss یک منوی پیمایش jQuery است که یک منوی نوار کناری بدون بوم با ویژگی‌های تاری جالب ایجاد می‌کند که می‌توانید از آن برای جلب توجه کاربران به بخش‌های اصلی سایت استفاده کنید و بخش‌های نه چندان مفید را کمتر به چشم بیاورید.

نسخه ی نمایشی | دانلود

Drawer یک پلاگین جی کوئری برای ایجاد یک منوی متحرک و پاسخگو است که با کلیک کردن از کنار صفحه خارج می شود. ممکن است عملکردهای مشابهی را در برنامه های اندروید دیده باشید.

نسخه ی نمایشی | دانلود

Datmenu یک منوی پریمیوم پاسخگو jQuery با ویژگی های مختلف انیمیشن CSS3 است. چیزی که در مورد این افزونه عالی است، قابلیت شخصی سازی کامل با گزینه های js است.

نسخه ی نمایشی | دانلود

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

نسخه ی نمایشی | دانلود

Fly Side Menu یک افزونه منوی ناوبری جالب است که از CSS3 برای ایجاد یک منوی جانبی با تبدیل و انتقال سه بعدی استفاده می کند.

نسخه ی نمایشی | دانلود

PageScroll یک منوی سفارشی جی کوئری تلفن همراه است که برای استفاده در هر وب سایت و صفحه فرود توصیه می شود.

نسخه ی نمایشی | دانلود

DD Icon Menu یک پلاگین جی کوئری است که به شما امکان می دهد یک منوی آیکون عمودی واقع در لبه صفحه با منوهای فرعی که در حالت شناور گسترش می یابند ایجاد کنید.

نسخه ی نمایشی | دانلود

منوی جی کوئری که به شما امکان می دهد در تاریخ های محدوده انتخاب شده (هفته، ماه یا سال) پیمایش کنید. ایده آل برای درخواست اطلاعات با استفاده از تماس های AJAX.

نسخه ی نمایشی | دانلود

پلاگین منوی ناوبری جی کوئری که ایجاد منوهای موبایل را بسیار آسان می کند. از انتقال CSS برای تنظیم موقعیت منو در دستگاه های تلفن همراه استفاده می کند.

برای اینکه ناوبری خود را در قالب یک منوی کشویی عمودی در jQuery با لیست کشویی زیرمجموعه ها بنویسید، باید اصل این مکانیسم را درک کنید. اما ابتدا اجازه دهید نگاهی به ساختار ناوبری بیندازیم:

جهت یابی

• فرعی 1
  • تست 1
  • تست 2
  • تست 3
  • تست 4
• فرعی 2
  • تست 1
  • تست 2
  • تست 3
  • تست 4
• فرعی 3
  • تست 1
  • تست 2
  • تست 3
  • تست 4
• فرعی 4
  • تست 1
  • تست 2
  • تست 3
  • تست 4
• فرعی 5
  • تست 1
  • تست 2
  • تست 3
  • تست 4

همانطور که ممکن است حدس بزنید، منوی کشویی ما بر اساس لیست های گلوله ای است. هنگامی که ماوس را روی یک برچسب قرار می دهید

• تست 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(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 جامد #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();

این مدخل به چه معناست؟ ساختار "$()" به شما امکان می دهد عناصر را انتخاب کنید. بنابراین، در همان ابتدا، باید لیست کشویی خود را مخفی کنیم. ساختار "$()" را می گیریم و شی مورد علاقه خود را در آن می نویسیم. در مورد ما، این شی یک لیست گلوله ای با کلاس "menu" خواهد بود. در مرحله بعد، روش "hide ()" را می نویسیم که به ما امکان می دهد شی مورد علاقه خود را پنهان کنیم.

$(".menu span").css("پس زمینه"، "url("down.png")");

او چه کار می کند؟ به دنبال برچسبی می گردد که عنصر والد آن به کلاس "menu" اختصاص داده شده است و با استفاده از روش "css("background", "url("down.png")")"، ویژگی style "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")"); ))

اتصال اسکریپت ما باید از تگ به انتها، قبل از تگ بسته شدن منتقل شود، یا می توانید اسکریپت را بلافاصله بعد از لیست گلوله شده وصل کنید.

(دانلود: 314)

امروز می خواهم در مورد نسل جدید ناوبری سایت - منوهای تمام صفحه انتخابی انجام دهم. آنها در مواردی استفاده می شوند که خود ناوبری در صفحه نیست، فقط یک دکمه وجود دارد که با کلیک کردن، منو باز می شود. یک اصل مشابه را می توان در چارچوب - مشاهده کرد، هنگامی که نوار ناوبری دیگر مناسب نیست، بلوک با لیست آیتم های منو به سادگی پنهان می شود. در جای خود، یک دکمه با تصویر، به عنوان یک قاعده، از سه راه راه ظاهر می شود. با فشار دادن، منوی کامل ظاهر می شود. در بسیاری از وب‌سایت‌های مدرن، منو حتی در صفحه‌های بزرگ به‌طور دائم پنهان است. این کار برای لود نشدن صفحه انجام می شود. اگرچه اکنون نباید این کار را در همه پروژه های خود انجام دهید. اگر منو در درجه دوم اهمیت قرار دارد، می توانید آن را پنهان کنید، اما اگر یک سایت بزرگ با ساختار پیچیده دارید، بهتر است از این گزینه استفاده نکنید. بنابراین. ما اصل کلی عملکرد را فهمیدیم، اما این نوع منو کاملاً استاندارد است، من چیز جدیدی می خواهم. چندی پیش، متوجه سایت هایی شدم که ناوبری آنها نه تنها حذف نمی شود، بلکه به طور کامل در یک پنجره پاپ آپ به صورت تمام صفحه باز می شود. چیزی شبیه به پانل های اسلاید محبوب، اما کل آن کل فضای کار را اشغال می کند. در پشت سایت ها، پلاگین های جداگانه jQuery و راه حل های css3 شروع به ظاهر شدن کردند که در واقع این موضوع در مورد آنها است.
من شخصاً این اجرای منوی ناوبری را دوست دارم، زیرا برای کاربران با دستگاه های تلفن همراه راحت است و در مانیتورهای بزرگ بسیار چشمگیر به نظر می رسد. سایت های بیشتری با منوهای تمام صفحه وجود دارند، افزونه های رایگان جی کوئری نیز روز به روز بیشتر می شوند و این مفهوم به تدریج در حال تبدیل شدن به یک روند است.
بنابراین. توجه شما 20 پلاگین جی کوئری برای منوی تمام صفحه در پنجره بازشو.

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

این یک راه عالی برای رسیدن به مینیمالیسم بدون حواس پرتی است. امروز ما خودمان چنین منویی ایجاد خواهیم کرد.

برای ایجاد یک منوی ناوبری، ابتدا نگاهی به تنظیمات بیندازیم:

نسخه نمایشی منوی انیمیشن

ابتدا باید 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 ایجاد کنید. همانطور که می بینید، این ساده تر از چیزی است که فکر می کنید. موفق باشید در ایجاد وب سایت های حرفه ای و کاربر پسند!