راه حل های آماده زیادی برای ایجاد چنین پانل هایی وجود دارد جی کوئری، افزونه ها و ماژول های جداگانه برای سیستم های مختلفمدیریت سایت.
همه اینها بسیار خوب است، اما آیا این امکان وجود دارد که پانل های کشویی جانبی را به طور انحصاری مدیریت کنید با استفاده از CSS? بله، مطمئناً ممکن است! اما مراقب باشید)))، به خاطر داشته باشید که همه مرورگرها از ویژگی های مدرن CSS3 به همان اندازه پشتیبانی نمی کنند.

چندی پیش، من از یک راه حل و نمونه کار "انصراف دادم". یکی از اولین نظرات این بود: "بیایید آن را به کنار ...". چرا که نه؟ بیایید)).

امروز با یک مثال می گویم و نشان می دهم که چگونه با کمک "جادوی CSS" می توانید یک منو کاملاً کاربردی با کلیک ایجاد کنید.
برای شروع، طبق سنت تثبیت شده، ما در حال تماشای یک نمونه زنده از عملکرد پانل هستیم، سپس، همراه با کسانی که به آن نیاز دارند، کل تراز، چیست، چگونه و چرا را در نظر خواهیم گرفت. با پیش بینی سوالات، گزینه هایی را برای مکان منو، هم در سمت چپ و هم در سمت راست آماده کردم:

نشانه گذاری HTML

بیایید تجزیه و تحلیل را با سوئیچ پانل شروع کنیم، که برای آن از چک باکس استاندارد ():

ما چک باکس را در بالای سند، ترجیحاً درست بعد از برچسب قرار می دهیم . ویژگی hidden را می نویسیم، که مستقیماً وضعیت "مخفی" این عنصر را نشان می دهد، و همچنین یک شناسه منحصر به فرد، id="nav-toggle"، به عنوان مثال، برای پیوند با ویژگی for تگ اختصاص می دهیم. ، که به آن استایل می دهیم و به عنوان دکمه تعویض پنل استفاده می کنیم.

من از تگ به عنوان بسته بندی برای محتوای نوار کناری استفاده کردم