بدنه، html ( ارتفاع : 100 % ; حاشیه: 0 overflow:hidden ; font-family : helvetica; وزن قلم : 100 ; ).container( موقعیت : نسبی ؛ ارتفاع : 100 % ; عرض: 100 % ; سمت چپ: 0 -webkit-transition: سمت چپ 0.4s ease-in-out. -moz-transition: سمت چپ 0.4s ease-in-out. -ms-transition: سمت چپ 0.4s ease-in-out. -o-transition: سمت چپ 0.4s ease-in-out. انتقال: سمت چپ 0.4s ease-in-out. ) .container .open-sidebar ( سمت چپ : 240px ; ) #sidebar ( موقعیت : مطلق ؛ سمت چپ : -240px ؛ پس زمینه : #DF314D ؛ عرض : 240 پیکسل ؛ ارتفاع : 100 % ; box-sizing: border-box; ) #sidebar ul ( margin : 0 ; padding : 0 ; list-style : none ; ) #sidebar ul li ( margin : 0 ; ) #sidebar ul li a ( padding : 15px 20px ; font-size : 16px , font-we : 100 ؛ رنگ : سفید ؛ متن-تزیین : هیچ ؛ نمایشگر : بلوک ؛ حاشیه پایین : 1px جامد #C9223D ؛ -webkit-transition: پس زمینه 0.3s آسان به بیرون؛ -moz-transition: پس زمینه 0.3s ease-in-out؛ -ms-transition: background 0.3s ease-in-out؛ -o-transition: background 0.3s ease-in-out؛ transition: background 0.3s ease-in-out؛ ) # نوار کناری ul li:hover a ( پس زمینه : #C9223D ; ) .main-content ( عرض : 100 % ; ارتفاع: 100 % 100 % 100 % ; ارتفاع خط : 160 % ; ) .main-content #sidebar-toggle ( پس زمینه : #DF314D ; border-radius: 3px ; display : block , position : نسبی ; padding : 10px 7px ; float : left ; ) .main-content #sidebar-toggle. نمایش: بلوک؛ عرض: 18 پیکسل؛ حاشیه-پایین: 3 پیکسل؛ ارتفاع: 2 پیکسل؛ رنگ پس‌زمینه: #fff؛ شعاع حاشیه: 1 پیکسل؛ ) : 0 ;)

;

اکنون منوی کناری را در سمت چپ با position:relative و left: -240px مخفی می کنیم، این مقدار برابر با عرض منوی کناری است. ما یک دکمه و یک اسکریپت jQuery اضافه کرده‌ایم که به ما امکان می‌دهد با تغییر دادن کلاس نوار کناری باز برای محفظه حاوی نوار کناری و بلوک محتوای اصلی، نوار کناری را هنگام کلیک فراخوانی کنیم.

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

اکنون یک منوی کناری ساده داریم که با کلیک روی دکمه ماوس فراخوانی می شود.

3. قابل ترسیم کردن منو

بدنه، html ( ارتفاع : 100 % ; حاشیه: 0 overflow:hidden ; font-family : helvetica; وزن قلم : 100 ; ).container( موقعیت : نسبی ؛ ارتفاع : 100 % ; عرض: 100 % ; سمت چپ: 0 -webkit-transition: سمت چپ 0.4s ease-in-out. -moz-transition: سمت چپ 0.4s ease-in-out. -ms-transition: سمت چپ 0.4s ease-in-out. -o-transition: سمت چپ 0.4s ease-in-out. انتقال: سمت چپ 0.4s ease-in-out. ) .container .open-sidebar ( سمت چپ : 240px ; ) .swipe-area ( موقعیت : مطلق ؛ عرض : 50 پیکسل ؛ چپ : 0 ؛ بالا : 0 ؛ ارتفاع : 100 % ; پس زمینه: #f3f3f3 ; z-index : 0 ) #سایدبار ( پس زمینه : #DF314D ؛ موقعیت : مطلق ؛ عرض : 240 پیکسل ؛ ارتفاع : 100 % ; سمت چپ: -240 پیکسل box-sizing: border-box; -moz-box-sizing: border-box; ) #sidebar ul ( margin : 0 ; padding : 0 ; list-style : none ; ) #sidebar ul li ( margin : 0 ; ) #sidebar ul li a ( padding : 15px 20px ; font-size : 16px , font-we : 100 ؛ رنگ : سفید ؛ متن-تزیین : هیچ ؛ نمایشگر : بلوک ؛ حاشیه پایین : 1px جامد #C9223D ؛ -webkit-transition: پس زمینه 0.3s آسان به بیرون؛ -moz-transition: پس زمینه 0.3s ease-in-out؛ -ms-transition: background 0.3s ease-in-out؛ -o-transition: background 0.3s ease-in-out؛ transition: background 0.3s ease-in-out؛ ) # نوار کناری ul li:hover a ( پس زمینه : #C9223D ; ) .main-content ( عرض : 100 % ; ارتفاع: 100 % ; بالشتک: 10 پیکسل box-sizing: border-box; -moz-box-sizing: border-box; موقعیت : نسبی ; ) .main-content .content ( box-sizing: border-box; -moz-box-sizing: border-box; padding-left : 60px ; عرض: 100 % ; ) .main-content .content h1( font-weight : 100 ; ) .main-content .content p( width : 100 % ; ارتفاع خط : 160 % ; ) .main-content #sidebar-toggle ( پس زمینه : #DF314D ; border-radius: 3px ; display : block , position : نسبی ; padding : 10px 7px ; float : left ; ) .main-content #sidebar-toggle. نمایش: بلوک؛ عرض: 18 پیکسل؛ حاشیه-پایین: 3 پیکسل؛ ارتفاع: 2 پیکسل؛ رنگ پس‌زمینه: #fff؛ شعاع حاشیه: 1 پیکسل؛ ) : 0 ;)

; $(".swipe-area") .swipe (( swipeStatus:function (رویداد، فاز، جهت، فاصله، مدت زمان، انگشتان) ( if (phase=="move" && direction =="راست") ($(" .container" ) .addClass ("open-sidebar" ) ; return false ; ) if (phase=="move" && direction =="left" ) ($(".container" ) .removeClass ("open-sidebar" برگشت نادرست ) ) ) ;

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

اکنون که توانایی تشخیص ژست‌های کشش و کشیدن گوشی هوشمند را داریم، از آن برای نمایش منوی کناری استفاده می‌کنیم. قبلاً با مشکلی مواجه شدیم زیرا تشخیص عمل کشش را در کل صفحه اعمال می کردیم، در تلفن های هوشمند اسکرول صفحه هنگام بزرگنمایی غیرممکن می شد، زیرا منوی کناری در حال باز شدن بود.

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

در اسکریپت JS خود، عمل کشش را با استفاده از تابع swipe() انجام شده توسط افزونه TouchSwipe تعریف می کنیم. ما دو بخش از عمل کشش را کشف می کنیم: حرکت و جهت. ما به سادگی کلاس نوار کناری باز را اضافه می کنیم تا وقتی مکان نما یا انگشت کاربر به سمت راست حرکت می کند، منو ظاهر شود. اگر نشانگر ماوس یا انگشت کاربر در جهت مخالف حرکت کند، این کلاس را حذف می کنیم.

در آزمایش ما، این ویژگی در گوشی های هوشمند به خوبی کار می کند، اما در مرورگرهای دسکتاپ به خوبی کار نمی کند. کامپیوترهای رومیزی، زیرا هنگامی که ماوس را در حالی که دکمه را نگه می داریم حرکت می دهیم، مرورگرها ابزار انتخاب متنی را راه اندازی می کنند که عمل تشخیص کشش ما را لغو می کند. ما به این نیاز نداریم، بنابراین پس از افزودن یا حذف کلاس نوار کناری باز، false را برمی‌گردانیم. و از اجرای ابزار پیش فرض انتخاب متن جلوگیری می کند.

نتیجه

و این همه است! اکنون یک نوار کناری کششی داریم که هم در مرورگرهای دسکتاپ و هم در مرورگرهای گوشی هوشمند کار می کند. امیدواریم از این درس لذت برده باشید.

ترجمه - میز تحریر

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

همچنین منوهای بیرون کش جالب:

یک مثال در اینجا قابل مشاهده است:

دانلود

در این آموزش استفاده خواهیم کرد پلاگین جی کوئری- "jQuery.mmenu.js". این را می توان از لینک دانلود - دانلود.

چگونه استفاده کنیم؟

بخش HTML

ابتدا کتابخانه ها و سبک های لازم را به هم وصل می کنیم:

1 2 3 4 5

<نوع پیوند = "text/css" rel="stylesheet" href="css/jquery.mmenu.css" /> <نوع پیوند = "text/css" rel="stylesheet" href="css/demo.css" /> <نوع اسکریپت = "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> <نوع اسکریپت="text/javascript" src="js/jquery.mmenu.js" >

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

کمی بالاتر از منو، سوئیچ را وارد کنید تا کاربر بتواند آن را باز یا ببندد:

با پایان یافتن ساختار HTML، اکنون به سراغ سبک ها می رویم.

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

و دوباره DEMO، برای شروع.

بیا شروع کنیم با HTML-سازه های:

• لینک 1
• لینک 2
• لینک 3

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

برچسب دکمه همبرگر ما است که به ورودی متصل است.

ul خود بلوک منو است.

اکنون css(من فقط برای مرورگرهای WebKit نوشتم: Opera 16+، Safari، Chrome).

منوی ما:

منوی مخفی (نمایش: بلوک؛ موقعیت: ثابت؛ سبک فهرست: هیچ‌کدام؛ بالشتک: 10 پیکسل؛ حاشیه: 0؛ اندازه جعبه: جعبه حاشیه؛ عرض: 200 پیکسل؛ رنگ پس‌زمینه: #eee؛ ارتفاع: 100 درصد. بالا: 0؛ سمت چپ: -200 پیکسل؛ انتقال: سمت چپ 0.2 ثانیه؛ z-index: 2؛ -webkit-transform: translateZ(0)؛ -webkit-backface-visibility: hidden؛ )

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

چک باکس ما:

تیکر منوی مخفی (نمایش: هیچکدام؛ )

ما فقط آن را نامرئی می کنیم.

دکمه برگر:

منوی Btn ( رنگ: #fff؛ رنگ پس‌زمینه: #666؛ بالشتک: 5 پیکسل؛ موقعیت: ثابت؛ بالا: 5 پیکسل؛ سمت چپ: 5 پیکسل؛ مکان‌نما: نشانگر؛ انتقال: چپ 0.23 ثانیه؛ شاخص z: 3؛ عرض: 25px؛ -webkit-transform: translateZ(0)؛ -webkit-backface-visibility: hidden; ) .btn-menu span (نمایش: بلوک؛ ارتفاع: 5px؛ پس‌زمینه رنگ: #fff؛ حاشیه: 5px 0 0؛ انتقال : همه .1s خطی 0.23s؛ موقعیت: نسبی؛ ) .btn-menu span.first ( margin-top: 0; )

شما همچنین می توانید آن را هر طور که دوست دارید ترتیب دهید. من یک دکمه خاکستری ساده با نوارهای سفید در گوشه بالا سمت چپ درست کردم. در اینجا انیمیشن هایی برای خود دکمه و راه راه ها (فقط برای زیبایی) اضافه کردم.

حال، به اصطلاح "جادو":

Hidden-menu-ticker:checked ~.btn-menu ( سمت چپ: 160px; span.first ( -webkit-transform: rotate(45deg); top: 10px; ) .hidden-menu-ticker:checked ~.btn-menu span.second ( opacity: 0; .hidden-menu-ticker:checked ~ .btn-menu span.third (-webkit-transform: rotate(-45deg)؛ بالا: -10px؛ )

انتخابگرهای CSS3 به ما این امکان را می دهند که وضعیت یک چک باکس را تعیین کنیم و بسته به این موارد، ویژگی های خاصی را برای عناصر همسایه اعمال کنیم: علامت زده شده ~ . که در این مثالدکمه منو را با یک ورودی "بررسی شده" تغییر می دهیم. hidden-menu-ticker:checked ~ .btn-menu را با 160 پیکسل به سمت چپ، منو را به لبه سمت چپ منتقل می کنیم. hidden-menu-ticker:checked ~ .hidden-menu . بقیه استایل ها برای نوارهای دکمه منو نوشته شده اند تا با فشار دادن به یک ضربدر تبدیل شوند و بالعکس.

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

مرحله 1. افزودن یک منو به فایل HTML

چسباندن فایل htmlکد زیر:

منو

می بینید که برای همه دکمه های منو، از جمله خود دکمه منو، یک کلاس اضافه شده است دکمه باز. این کار به این منظور انجام می شود که اسکریپت ما که به آن متصل خواهیم شد، بتواند با فشار دادن این دکمه ها به اقدامات باز و بسته شدن منو متصل شود.

مرحله 2. اضافه کردن سبک ها

حالا ما منو و همه دکمه ها را کمی سبک می کنیم. در خود وارد کنید cssکد فایل زیر:

دکمه (پس‌زمینه: شفاف، حاشیه: شفاف، طرح کلی: هیچ، مکان‌نما: نشانگر، حاشیه: 50 پیکسل 90 پیکسل، وزن قلم: پررنگ، اندازه قلم: 24 پیکسل، رنگ: #6c7d96، انتقال: 0.2 ثانیه؛ ) دکمه: شناور ( انتقال: 0.2 ثانیه؛ کدورت: 0.7؛ ) دکمه: فعال ( انتقال: 0.2 ثانیه؛ کدورت: 0.4؛ ) ناو (رنگ پس زمینه: #6c7d96؛ عرض: 250 پیکسل؛ موقعیت: نسبی؛ سمت چپ: -999 پیکسل؛ انتقال: 0.5 ثانیه ease؛ ) nav ul li ( بالشتک: 20 پیکسل 0؛ تراز نوشتاری: مرکز؛ انتقال: 0.2 ثانیه؛ ) nav ul li: شناور ( مکان نما: نشانگر؛ رنگ پس زمینه: #454954؛ انتقال: 0.2 ثانیه؛ ) nav ul li :active (رنگ پس‌زمینه: #23252b؛ انتقال: 0.2 ثانیه؛ ) nav ul li a (رنگ: سفید؛ متن-تزیین: هیچکدام؛ وزن قلم: پررنگ؛ اندازه قلم: 21 پیکسل؛ )

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

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

مرحله 3. اتصال اسکریپت

در فایل js خود باید این کد را پیست کنید:

$(document).ready(function() ($(".openButton").click(function() ( if(!$(".openButton").hasClass("openDone")) ($(".openButton" ).addClass ("openDone"); $("nav").css ("سمت چپ"، "0px"); ) else ($(".openButton").removeClass("openDone"); $("nav" .css("left", "-999px"); ) ))); /* هنگامی که در ابتدا می خواهید منو پس از اندازه صفحه نمایش مشخصی که شامل طراحی تطبیقیمنوی شما $(window).resize(function() ( if ($(window).width() > 1200) ($("nav ul li").removeAttr("style"); ) )); */))؛

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

ضمنا ما این کلاس رو جایی ثبت نکردیم. به عنوان نوعی سوئیچ عمل می کند. این کار به گونه ای است که با فشار دادن دکمه منو"، به همه دکمه های با کلاس دکمه بازکلاس اضافه شده است انجام شد را باز کنید.و هنگامی که کاربر دوباره روی یکی از دکمه های منو کلیک می کند، اسکریپت کلاس را حذف می کند openDoneاین دکمه ها

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

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

خلاصه

ما ساده ترین منوی متحرک را ساختیم که با کلیک بر روی دکمه در کنار آن ظاهر می شود. همانطور که می بینید، مطلقاً هیچ چیز پیچیده ای در اینجا وجود ندارد. شما می توانید این کد را بهبود بخشیده و آن را به دلخواه تغییر دهید.