اخیراً یکی از خوانندگان ما پرسید که چگونه می توانیم منوی ناوبری سایت او را با نوار منوی کشویی جی کوئری جایگزین کنیم. چنین پانل می تواند به طور قابل توجهی قابلیت استفاده را بهبود بخشد نسخه های موبایلسایت های. در این مقاله به شما نشان خواهیم داد که چگونه یک نوار منوی کشویی به قالب های وردپرس اضافه کنید.
توجه: این مقاله دانش متوسط از HTML و CSS را فرض می کند.
جایگزینی منوی پیش فرض با نوار کشویی در وردپرس
هدف در اینجا این است که نوار منوی کشویی را به کاربران با وضوح صفحه نمایش کوچک نشان دهیم، در حالی که منوی پیش‌فرض موضوع ما را حفظ کنیم تا کاربران رایانه بتوانند آن را ببینند. نسخه کاملمنو. قبل از شروع، درک این موضوع مهم است که تم های مختلف وردپرس وجود دارد، و بنابراین باید تغییراتی را انجام دهید. سبک های cssبسته به طراحی شما
اول از همه، باید باز کنیم ویرایشگر متن notepad را تایپ کرده و ایجاد کنید فایل جدید. کد زیر را کپی کرده و در آن قرار دهید:
(function($) ($("#toggle").toggle(function() ($("#popout").animate(( سمت چپ: 0 ), "slow", function() ($("#toggle" ).html(" 
"); )); ), function() ($("#popout").animate(( سمت چپ: -250 ), "slow", function() ($("#toggle").html(" ");)))))))) (jQuery);
جایگزین کردن example.comبه شما نام دامنهسایت، و تغییر دهید موضوع شمابه پوشه واقعی موضوع فعلی شما. فایل را با نام ذخیره کنید slidepanel.jsروی کامپیوتر این کد از jQuery برای جابجایی نوار منوی کشویی استفاده می کند. همچنین افکت سوئیچینگ را متحرک می کند.
کلاینت FTP خود را باز کنید (Filezilla یا فرمانده کل) و به سایت خود متصل شوید. بعد، به دایرکتوری تم خود بروید و اگر قبلاً پوشه ای در آن وجود دارد jsسپس آن را باز کنید اگر تم شما چنین دایرکتوری ندارد، آن را ایجاد کنید و فایل slidepanel.js را در داخل آن آپلود کنید.
مرحله بعدی طراحی یا یافتن یک نماد برای منو است. بیشترین استفاده از نماد برای این نماد با سه راه راه است. می توان آن را در هر ایجاد کرد ویرایشگر گرافیکی(به عنوان مثال، در فتوشاپ) یا یکی از بسیاری از موارد موجود در گوگل را پیدا کنید. در این مثال از 27x23px برای آیکون استفاده می کنیم. پس از ایجاد آن، نام آن را به menu.png تغییر دهید و آن را در پوشه تصاویر خود در فهرست تم خود آپلود کنید.
مرحله بعدی برای نوار منوی کشویی است. فقط باید کد زیر را کپی و در فایل پیست کنید functions.phpموضوعات:
wp_enqueue_script("wpb_slidepanel"، get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
اکنون که تمام کارهای مقدماتی کامل شده است، لازم است منوی پیش فرض تم را تغییر دهید. به طور معمول، اکثر تم ها یک منوی پیمایش را در یک فایل نمایش می دهند. header.phpموضوعات باز میکنیم header.phpو خطی شبیه به این پیدا کنید:
"primary", "menu_class" => "nav-menu")); ?>
چالش این است که منوی تم را در HTML بپیچید تا نوار منوی کشویی روی صفحه‌های کوچک نمایش داده شود. ما آن را می پیچیم
example.com را با نام دامنه خود و theme خود را با پوشه تم خود جایگزین کنید. تغییرات خود را ذخیره کنید.
مرحله آخر: استفاده از CSSبرای پنهان کردن نماد منو برای کاربران صفحه نمایش بزرگ و نمایش آن برای کسانی که وضوح پایین دارند. همچنین باید موقعیت نماد منو و ظاهر اسلاید اوت را تنظیم کنیم. این کد CSS را کپی کرده و در شیوه نامه تم خود جایگذاری کنید.
صفحه رسانه @ و (دقیقه عرض: 769 پیکسل) ( #ضبط (نمایش: هیچ، ) ) صفحه رسانه @ و (حداکثر عرض: 768 پیکسل) ( #پاپوت ( موقعیت: ثابت؛ ارتفاع: 100٪؛ عرض: 250 پیکسل؛ پس‌زمینه : rgb(25، 25، 25)؛ پس‌زمینه: rgba (25، 25، 25، 0.9)؛ رنگ: سفید؛ بالا: 0 پیکسل؛ سمت چپ: -250 پیکسل؛ سرریز: خودکار؛ ) #toggle ( شناور: راست؛ موقعیت : ثابت؛ بالا: 60 پیکسل؛ سمت راست: 45 پیکسل؛ عرض: 28 پیکسل؛ ارتفاع: 24 پیکسل؛ . :hover ( پس‌زمینه:#CCC; ) .nav-menu li a (رنگ:#FFF؛ متن-تزیین: هیچ؛ عرض: 100%؛ ))
به خاطر داشته باشید که منوهای طرح زمینه شما ممکن است از کلاس های CSS متفاوتی استفاده کنند و ممکن است با موارد بالا تضاد داشته باشند. می توانید این مشکل را با استفاده از Inspector در کروم یا فایرفاکس حل کنید تا متوجه شوید کدام کلاس ها با کلاس های شما در تضاد هستند. همچنین فراموش نکنید که می توانید ظاهر پنل را مطابق با طراحی سایت شخصی سازی کنید.
ممکن است متوجه شده باشید که اکثر توسعه دهندگان شروع به اضافه کردن پانل های کششی سفارشی مبتنی بر جاوا اسکریپت به وب سایت های خود کرده اند، چه در بالای سایت یا در پایین صفحه. از این پنل ها برای جلب توجه کاربر به تبلیغات مختلف، پست های وبلاگ جالب و ... استفاده می شود. دلیل اصلی گسترش این پانل ها البته تمرکز بر نتایج است. شما می توانید این پنل ها را دوست داشته باشید یا از آنها متنفر باشید، اما قطعاً قبول خواهید کرد که آنها در حد وظیفه ای هستند که به آنها محول شده است. پلاگین های رایگان و تجاری زیادی برای اضافه کردن پانل های کشویی به وبلاگ شما وجود دارد. بعداً در این مقاله به آنها خواهم پرداخت.
پلاگین های رایگان
سلام نوار
یک افزونه ساده و ساده که همه چیز را دارد ابزار لازمبه منظور ایجاد یک پنل در بالای سایت. چنین پنلی مطمئنا توجه کاربران را به خود جلب خواهد کرد.
نوار توجه
اگر می‌خواهید توجه کاربران را به پیام‌های مهم جلب کنید، می‌توانید یک پنل هشدار ایجاد کنید که یک div معمولی با سبکی اضافی است. با این حال، لازم به یادآوری است که چنین پنلی بسیار آزاردهنده است و بعید است که کاربران سایت شما آن را دوست داشته باشند. با کمک افزونه Attention Bar می توانید نوار زیبایی را در بالای صفحه نمایش دهید که حواس شما را از مرور سایت منحرف نکند. تنظیمات غنی به توسعه دهنده کمک می کند تا طرح بندی پنل را کنترل کند.
نوار آسان سر بالا
این افزونه یک نوار اطلاع رسانی مفید را به بالای سایت شما اضافه می کند. در اعلان‌ها، می‌توانید پیوندهایی برای تقویت فراخوان برای اقدام بگذارید.
نوار ابزار اطلاع رسانی
پانلی که در پاورقی وبلاگ شما قرار داده شده است. به شما امکان نمایش اعلان های سفارشی را می دهد. این افزونه بر اساس نوار ابزار استاتیک است.
نوار اطلاعیه سریع
این افزونه به شما این امکان را می دهد که یک اعلان برجسته در هدر سایت ایجاد کنید. چنین اعلانی مطمئناً توجه کاربران را به خود جلب می کند، بنابراین می توانید هر چیزی را در آن قرار دهید، از هشدارهای ساده گرفته تا پیشنهادات ویژه.
Viper Bar
این افزونه به شما این امکان را می دهد که یک پنل به قسمت هدر سایت اضافه کنید که می توان از آن برای افزایش تعداد مشترکین استفاده کرد. این افزونه شامل سبک های درون خطی، ادغام با Aweber و Feedburner، ردیابی تبدیل، تست تقسیم و موارد دیگر است.
پلاگین های تجاری
یک افزونه وردپرس که به شما امکان می دهد پنل های سفارشی را به بالای وبلاگ یا وب سایت خود اضافه کنید. شما می توانید اعلان های مختلف را برای صفحات مختلف، یک پنل استاندارد تنظیم کنید که در تمام صفحات نمایش داده شود و غیره.
جلب توجه
افزونه ای که به شما امکان می دهد یک پنل اعلان به سایت خود اضافه کنید. با استفاده از این افزونه می توانید متن سفارشی، پست های توییتر یا فیدهای RSS را به راحتی نمایش دهید. علاوه بر این، لیست عظیمی از ویژگی ها وجود دارد که به شما امکان می دهد ظاهر اعلان را شخصی سازی کنید.
http://wplift.com/wordpress-notification-bar-plugins/
با سلام خدمت خوانندگان محترم سایت وبلاگ. امروز می خواهم در مورد یک افزونه upPrev نسبتاً کاربردی و راحت صحبت کنم که می تواند چندین نوع پیوند صفحه را به طور همزمان پیاده سازی کند. می توانید کار او (حداقل در زمان نوشتن این مقاله) را در پایین هر صفحه با یک مقاله مشاهده کنید - یک پانل پاپ آپ در سمت راست با لیستی از مطالب مشابه ظاهر می شود.
این افزونه می تواند نه تنها مطالب مشابه، بلکه مقالات قبلی را از همان دسته یا آرشیو برچسب نمایش دهد (این همان چیزی است که در مقاله بالا به طور مفصل در مورد آن صحبت کردیم و اجرای عملی آن را توضیح دادم)، مطالب قبلی در قالب کل وبلاگ و همچنین انتشارات به صورت تصادفی گرفته شده است. علاوه بر این، اگر آنها را هنگام نوشتن پست ایجاد کنید، می توان کل چیز را با ریز عکسها طعم دار کرد.
اکنون لینک سازی چه نقشی در ارتقای وب سایت دارد؟
به طور کلی، بهینه سازی سایت، برای ارتقای موفقیت آمیز بیشتر آن، وظیفه شماره یک است (شماره دو در حال گرفتن است بک لینک ها). عوامل داخلی می توانند تأثیر هر چیز دیگری را مسدود کرده و کاهش دهند. از سوی دیگر، غیرممکن است (به ویژه با کلید واژه هادر محتوا و لنگرهای پیوندهای داخلی).
اکنون یک رویکرد یکپارچه برای ارتقاء در حال حرکت است و پیوند جایگاه نسبتاً قابل توجهی را در آن اشغال می کند. اخیراً استفاده از اینفوگرافیک برای تجسم هر چیزی مد شده است. در موضوع سئو، می توانید فلوچارت های مشابه زیادی پیدا کنید، به عنوان مثال، سئوپروفی مقاله ای در مورد نحوه تبلیغ یک سایت دارد. متأسفانه هنوز آمادگی خلق چنین شاهکارهایی را ندارم، اما مراجعه به آنها این امکان را به من می دهد که زیاد آب نریزم.
کدام طرح پیوند را انتخاب کنید? یک سؤال نسبتاً دشوار، زیرا بسیاری از طرح‌های کارآمد قبلی (همگی «حلقه» بدنام، پیوندهایی به روش‌های اجرایی که کمی بالاتر ارائه کردم) دیگر آن نتایج خارق‌العاده‌ای را که هنوز ده‌ها سال پیش مشاهده می‌شد، نمی‌دهند. . موتورهای جستجو نیز یاد می‌گیرند و سعی می‌کنند چیزی را که از دیدگاه آنها یک تقلب آشکار است، در نظر نگیرند.
لینک دادن به صورت یک سری حلقه، طبق نظریه پیدرنک، باید وزن ثابت صفحات سایت () که در این حلقه درگیر هستند را به طور جدی افزایش دهد.
با این حال، این همیشه در عمل کار نمی کند. ممکن است هنگامی که صفحات جداگانه از فهرست خارج می شوند، حلقه شکسته شود، یا ممکن است برای کاهش نشانه گذاری ها، جستجو یک عامل کاهش جدی را در فرمول کلاسیک برای محاسبه وزن آماری وارد کرده باشد.
پیوند دادن صفحات سایت وظیفه دیگری دارد که دیگر هدف آن جلب رضایت یاندکس یا گوگل نیست، بلکه لطفا بازدید کننده. بدیهی است که یک مقاله برای او که وبلاگ شما را امتحان کند کافی نخواهد بود - حتماً باید او را دعوت کنید که به جای دیگری برود تا به او علاقه مند شوید، به تاخیر بیاندازید و احتمالاً او را مشترک خود کنید.
بنابراین، پیوند نیز تأثیر می گذارد عوامل رفتاری ، که جستجو نیز به آن توجه می کند و هر سال به میزان بیشتری و بیشتر. تقریباً همه وب مسترها این را می‌دانند و بلوک‌هایی را با مطالب مشابه، با پرخواننده‌ترین نشریات یا مقالاتی از همان دسته به سایت اضافه می‌کنند. احتمالاً تغییرات دیگری نیز در این موضوع وجود دارد.
به طور طبیعی، گزینه های پیاده سازی لینک سازی داخلییک توده نیز وجود دارد. شما حتی می توانید بدون افزونه نیز انجام دهید (نمونه آن را می توانید در مقاله پیدا کنید)، اما تعداد زیادی از آنها برای پیوند نوشته شده اند. سخت ترین کار این است که گزینه ای را انتخاب کنید که به خوبی در وبلاگ شما کار کند.
من خودم بسیاری از آنها را امتحان کردم و حتی در مورد برخی از آنها نقد نوشتم (). در واقع پلاگین مذکور یکی از بهترین ها برای محاسبه پست های مرتبط و قرار دادن آنها در صفحات وبلاگ می باشد.
اما داده‌های او می‌توانند از دیگر برنامه‌های افزودنی وردپرس نیز استفاده کنند و آنها را رنگارنگ‌تر یا پرمدعاتر کند. در همان مقاله در مورد YARP، من فقط یک مثال از استفاده از داده های آن توسط پلاگین Related Posts Slider ارائه کردم که امکان نمایش پست های مرتبط را در قالب این فرم فراهم می کرد:
خوب یا مثل این:
امروز قهرمان ما تماس گرفت قبلی قبلیهمچنین می داند که چگونه اطلاعات را از پایگاه داده افزونه Yet Another Related Posts بگیرد و این کار را به درستی انجام می دهد، زیرا نیازی به اختراع مجدد چرخ در هر بار نیست. بیایید در واقع به توصیف امکانات این معجزه مهندسی بپردازیم.
پیوند دادن گزینه ها با افزونه upPrev
من به این سبک‌ها دست نزدم، زیرا راه دیگری (نه مستقیم‌ترین) را رفتم که در زیر در متن توضیح خواهم داد. برای سیم کارت به تب دوم بروید:
تعداد پست هایی را که این افزونه به آنها پیوند ایجاد می کند را انتخاب کنید. اما کمی پایین تر، ما فقط نوع پیوند سایت ما را انتخاب کنید. من گزینه پست های مرتبط را با استفاده از پایه پلاگین Yet Another Related Posts انتخاب کرده ام (باید از قبل نصب شده باشد)، اما می توانید با انتخاب گزینه دوم یا سوم، پیوند حلقه را تنظیم کنید، همچنین با انتخاب پیوند حلقه بزرگ، اول .
من قصد داشتم این کسب و کار را فقط برای پست ها سازماندهی کنم که با یک تیک در فیلد مربوطه نشان داده شده است. علاوه بر عنوان پست، این پنل همچنین می تواند چندین کلمه (تعداد آنها در قسمت پایین تنظیم شده است) را از ابتدای پست یا قسمت نقل قول، در صورت پر کردن، نمایش دهد. به نظرم زائد بود
تب سوم برای تنظیم ردیابی تعداد کلیک روی لینک ها در این پنل استفاده می شود که من از آن استفاده نکردم. با این حال، در تب چهارم، من همچنان کش را فعال کردم. در تب پنجم، من از نمایش پنل در تلفن های همراه جلوگیری کردم، اما مخالفتی با خروج آن در تبلت ها نداشتم:
خب، تمام، تنظیمات upPrev به پایان رسیده است، اما من قبلاً ظاهر پانل را در تنظیمات افزونه Yet Another Related Posts تغییر دادم.
سفارشی کردن ظاهر محتویات اسلاید اوت
در آنجا فایل قالبی را انتخاب کردم که مسئول نمایش پست های مشابه خواهد بود (برای ماهیت و ویژگی های کار با این پسوند به پیوند بالا مراجعه کنید):
که اکنون ظاهر لیست پست های مشابه نمایش داده شده توسط افزونه upPrev (در پنل کشویی) توسط کدی که در فایل yarpp-template-list.php من از پوشه موضوع من () ثبت شده است، کنترل می شود. اگر وبلاگ شما تصاویر کوچک برای پست ها تولید می کند، پس منطقی است که با پشتیبانی آن ها یک الگو از زرادخانه افزونه Yet Another Related Posts انتخاب کنید.
کد این فایل:
-
have_posts()): $postsArray = array(); while ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // فهرستی از موارد مرتبط را چاپ کنید که با کاما از یکدیگر جدا شده اند:?>
هیچ پست مرتبطی وجود ندارد
همانطور که می بینید، اینجا جایی است که هدر پانل خروجی زندگی می کند، بنابراین باید (در صورت لزوم) این فایل را به رمزگذاری UTF-8 بدون BOM تبدیل کنید تا از اشکالات جلوگیری شود (). من شما را نمی دانم، اما من مدت زیادی است که به عنوان اصلی زندگی می کنم ویرایشگر Notepad++ () و در آن این تبدیل به صورت زیر انجام می شود:
واضح است که این کد فقط پیش پا افتاده است لیست html()، و خصوصیات CSS مشخص شده در فایل style برای کلاس های کد، مسئول ظاهر هستند. در مورد من، این سبک ها به این صورت هستند:
A.oy (رنگ: #333; فونت: 700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (تراز نوشتار:مرکز;بالشتک:12px 5px 17px 5px;حاشیه: 5px 0;حاشیه: نقطه‌دار 2px #cccc;) li.eto:hover (تزیین متن:زیرخط ام اس، وردنا، آریال؛ رنگ:#666؛)
کلاس lampochka علامت های سبز رنگی را اضافه می کند کد cssبا استفاده از کد base64 برای من تنظیم شده اند (این کد را در جایی کپی کردم). اگر علاقه مند هستید، به style.css من نگاهی بیندازید. باشه الان تموم شد اگر چیزی را فراموش کردید، بپرسید. درست است، من این گزینه پیوند را یک ماه پیش راه اندازی کردم و چیزی قبلاً در این مدت از ذهن من ناپدید شده است.
موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم
ممکن است علاقه مند باشید
نحوه حذف پیکسل شفاف http://yarpp.org/pixels در افزونه Yet Another Related Posts و تغییر کتیبه 
ایجاد لیست پست های مرتبط در وردپرس (با ریز عکسها) با استفاده از پلاگین پست های مرتبط برای لینک سازی داخلی 
چگونه می توان آمار رفتاری وب سایت را با پست های مرتبط دیگر و پلاگین های اسلایدر پست های مرتبط برای وردپرس بهبود بخشید 
شمارنده های ساده و آیکون های دسته و صفحه - شمارنده های زیبای RSS و توییتر و همچنین آیکون های دسته ها و صفحات در وردپرس 
افزونه های وردپرس در وبلاگ من (وب سایت) اسلایدرها و نمایش های اسلاید برای سایت شما - چه گزینه هایی وجود دارد و چگونه از اسکریپت های jQuery Slider استفاده کنید 
Breadcrumbs در وردپرس با استفاده از افزونه Breadcrumb NavXT (تقویت پیوند) 
کاهش مصرف حافظه در وردپرس هنگام ایجاد صفحات - افزونه WPLANG Lite جایگزین فایل محلی سازی 
WP-PageNavi - پیمایش صفحه برای وبلاگ وردپرس - نصب، پیکربندی و اصلاح ظاهرصفحه بندی 
آن را تقویم کنید! - تقویم رویداد برای وردپرس 
از وردپرس نامه ارسال نمی کند و کار نمی کند ویرایشگر بصری- راه حل با پیکربندی SMTP و دکمه های پست ویرایشگر پلاگین
چگونه منوی ناوبریتوسط سایت، منوی پروفایل کاربرو غیره می توانید مخفی شوید و با کلیک کردن و شناور کردن آنها ظاهر می شوند. برخی ممکن است بگویند که قابلیت استفاده از صفحه از این موضوع آسیب می بیند. فکر نمی‌کنم اینطور باشد، چون صفحه تمیزتر می‌شود، به این معنی که پیمایش آسان‌تر است. آدمی در کوه پیوندها گیج نمی شود.
امروز یک مجموعه درست کردم پانل های اسلاید، که به طور پیش فرض در صفحه پنهان هستند. تماس گرفتن منو، باید روی نماد مربوطه کلیک کنید یا ماوس را نگه دارید. این تکنیک از برنامه های موبایل به طراحی وب آمد، جایی که نمی توانید بسیاری از عناصر را در یک صفحه علامت گذاری کنید. با گذشت زمان، چنین پنل هایی به وب سایت ها منتقل شدند. این مجموعه قبل از هر چیز برای توسعه دهندگان موبایل مفید خواهد بود. با وضوح صفحه نمایش کوچک، این ظاهر می شود ناوبری برون مرزیو در مانیتورهای معمولی و بزرگ، می توانید یک منوی معمولی ایجاد کنید که همه به آن عادت دارند. بنابراین، شخصی که یک دستگاه تلفن همراه دارد، در سایت شما گیج نمی شود، زیرا مدت هاست به استفاده از آن عادت کرده است. پانل های اسلاید، زیرا همه برنامه های موجود در تلفن هوشمند او بر اساس یک اصل کار می کنند.
می خواهم توجه داشته باشم که این مجموعه شامل پلاگین ها، که فقط در زیر تیز می شوند سایت های موبایلو در مانیتورهای گسترده استفاده از آنها نامناسب خواهد بود. اگرچه پانل های جهانی وجود دارد که برای هر وب سایتی مناسب است. نسخه ی نمایشی را ببینید و آنچه را که با نیازهای شما مطابقت دارد انتخاب کنید.
پانل های کشویی روی . پیاده سازی چنین منوی در سایت شما کار سختی نخواهد بود و سایت های توسعه دهندگان این کار را کرده اند دستورالعمل های دقیقدر استفاده از محصول خود
به زودی قصد داریم وب سایت Postovoy را دوباره طراحی کنیم و از یکی از آنها استفاده خواهیم کرد پلاگین های جی کوئریکه در زیر ارائه می شوند.
بنابراین. در اینجا مجموعه ای از 20 پلاگین نوار اسلاید کشویی جی کوئریبرای سایت شما نظر فراموش نشه
منوی جانبی قابل کشیدن
یک منوی پیمایش کشویی زیبا در jquery. ایده آل برای سایت های موبایل و معمولی.
انتقال برای ناوبری خارج از بوم
یک پلاگین بسیار قدرتمند که به شما امکان می دهد یک پانل اسلاید را سازماندهی کنید که با جلوه های انیمیشن مختلف از جمله سه بعدی نمایش داده می شود. این افزونه شامل 14 افکت انیمیشن است.
jPanelMenu
نوار ناوبری به سبک ساخته شده است برنامه های کاربردی iOS. یک منوی سبک و سریع که توسعه یک سایت موبایل را تسهیل می کند.
بازآفرینی کنید Google Nexusمنو
پانل کشویی بر اساس قیاس با منوی Google Nexus ساخته شده است.
bigSlide - نوار ناوبری اسلاید Jquery
پنل اسلاید هم برای یک سایت موبایل و هم برای یک سایت معمولی مناسب است. برای فراخوانی آن، باید روی نمادی که سه نوار را نشان می دهد کلیک کنید.
منوی فشاری چند سطحی
پلاگین Jqutry مشابه bigSlide عمل می کند. وقتی روی نماد کلیک می کنید پانل فراخوانی می شود. مزیت این منو این است که از ساختار چند سطحی پشتیبانی می کند.
منوی درب جعبه
نوار ناوبری اسلاید بسیار زیبا با افکت سه بعدی.
منوهای حاشیه متحرک
با کلیک بر روی علامت مثبت در گوشه صفحه، یک عدد کوچک پنل کناریبا آیکون ها برای پنهان کردن آن، باید روی نماد با نماد "-" کلیک کنید.
Snap.js
پنل اسلاید برای دستگاه های تلفن همراه طراحی شده است. منو با کشیدن صفحه با نشانگر ماوس یا در صورت روشن بودن، فراخوانی می شود دستگاه موبایل، انگشت.
منوهای اسلاید و فشار
|
منی
افزونه Jquery به شما امکان می دهد یک نوار ناوبری اسلاید جالب با جلوه سه بعدی در سایت خود پیاده سازی کنید.
mb.jquery
برخلاف سایر پنل ها، به جای جابجایی، در بالای صفحه نمایش ظاهر می شود. در بلوک می توانید هر html، متن و به طور کلی هر چیزی را که می خواهید قرار دهید.
داک اندروید
این پنل برای سایت های موبایل تیز شده است و در پایین صفحه قرار دارد. با فشار دادن، نمادهایی ظاهر می شوند که می توانید هر پیوندی را در آنها قرار دهید.
نوار اسلاید محتوا
پانل کشویی خنک در قالب دو سطح ساخته شده است. اولین مورد منو است. دوم محتوا است. اکنون این افکت در بین طراحان و توسعه دهندگان وب بسیار محبوب است. شما می توانید برنامه های بسیاری را پیدا کنید. میلر مایکروسافت بر اساس یک اصل مشابه کار می کند.مطمئناً شما اغلب در صفحات سایت ها، پانل های جمع شونده را ملاقات کرده اید نوع متفاوتو ترتیباتی که می‌گویند بالا، پایین، راست یا چپ در حالت تمام خودکار، با فاصله زمانی مشخص، یا با کلیک فعال می‌شوند. به عنوان یک قاعده، در چنین پانل هایی، فعلاً برخی از چشمان کاربر پنهان می شوند اطلاعات تکمیلیمهم و نه چندان مهم به عنوان مثال، فرم های اشتراک، ویجت های رسانه های اجتماعی، لینک ها، برچسب ها، جزئیات تماس و غیره، به طور خلاصه، هر چیزی.
وجود دارد مقدار زیادیراه حل های آماده برای پیاده سازی پنل های کشویی در جاوا اسکریپت، ماژول ها و پلاگین ها برای CMS های مختلف، مجزا پلاگین های جی کوئری، اما کاملاً توجه من را به خود جلب کرد و کاملاً روی آن کار کردم CSS خالص.
برای مدت طولانی می خواستم چیزی شبیه به آن را تحریک کنم، مکانیسم استفاده از چک باکس های مخفی به خوبی شناخته شده و قابل درک است، اما به نوعی دست من هرگز به آن نرسید. و به این ترتیب، وقتی در انبارهای گرد و غباری CodePen به یکی از آنها برخورد کردم، تصمیم گرفتم آن را آزمایش کنم و آن را به کوه بدهم، کاملاً کارآمد، کمی تغییر یافته و برای برادرمان، نسخه من جمع شونده منطبق شده است. پنل بالاییدر CSS خالص، معلوم شد که چه اتفاقی افتاده است)).
ما به مثال نگاه کردیم، آن را با نسخه اصلی مقایسه کردیم، و حالا، چه کسی به آن نیاز دارد، بیایید نگاهی بیندازیم که چگونه کل چیز با هم کار می کند. یک بار دیگر، هیچ js، فقط html بکر و css "جادویی" کار را انجام خواهند داد.
طرح HTML
از سه عنصر اصلی تشکیل شده است: یک ظرف پایه، یک بلوک محتوا و یک دکمه باز/بستن پانل.
همانطور که می بینید، پرچم type=" " در طراحی پنل وجود دارد که به طور پیش فرض مخفی و غیر فعال است. با برچسب