چگونه آیکون منوی تبدیل شونده به علامت ضربدر بسازیم؟

جمعه ۱۳ فروردین ۱۳۹۵

چگونه آیکون منوی تبدیل شونده به علامت ضربدر بسازیم؟Reviewed by جواد نبوی on Apr 1Rating: 4.5

باسلام خدمت دوستان محترم و همراهان خوب وب تستر؛ در این مطلب قصد داریم یکی از جالبترین ترفند های CSS3 را به شما آموزش دهیم که البته جدیدا طرفداران زیادی هم پیدا کرده. شاید سایت هایی را دیده باشید که قالبی واکنشگرا (ریسپانسیو) دارند و وقتی با تبلت یا گوشی موبایل واردشان میشوید به جای اینکه یک منوی طویل با لینک های درونش را ببینید, فقط یک آیکون می بینید که به شکل سه خط کوچک افقی روی هم است. وقتی روی این آیکون کوچک کلیک می کنید, منویی شامل لینک های مختلف به صورت کشویی به داخل صفحه وارد می شود و در همین حین, آن آیکون کوچک اولیه که به شکل سه خط افقی روی هم بود, به شکل زیبایی تبدیل به یک علامت ضربدر می شود. البته ما قبل در مطلبی آموزش ساخت منوی کشویی ریسپانسیو عمودی را داده بودیم. شاید اگر یک طراح وب قدیمی باشید و مدت زیادی از طراحی و تکنولوژی های جدید دور بوده باشید, تعجب کنید و این تکنیک را حاصل فلش یا جاوااسکریپت و … بدانید. اما اگر کاملا به روز هستید, احتمالا حدس میزنید که این عمل توسط یکی از قابلیت های جدید و فوق العاده ی CSS3 انجام شده باشد.

آیکون منوی تبدیل شونده به علامت ضربدر

در اینجا ما میخواهیم به شما یاد بدهیم که چطور میتوانید با CSS3 و البته کمی جی کوئری, یک آیکون منوی تبدیل شونده به علامت ضربدر بسازید. البته به این نوع آیکون, آیکون های همبرگری نیز می گویند که وقتی به صورت متحرک باشند با نام Transformicon خوانده میشوند.

برای مشاهده پیش نمایش و دانلود پروژه نهایی میتوانید از لینک های زیر استفاده نمایید.

ساخت آیکون منوی تبدیل شونده به علامت ضربدر؛ مرحله به مرحله

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

توجه: طی این آموزش, تمامی کد های لازم برای ایجاد آیکون منوی تبدیل شونده به علامت ضربدر, بدون هیچ توضیح اضافه ای بین کد ها, قرار داده شده تا آن هایی که خیلی از مباحث CSS و طراحی وب سر در نمی آورند به راحتی و تنها با کپی کردن این کدها در پروژه شان, از این ترفند استفاد نمایند. اما در بخش پایانی هر مرحله, یک قسمت با عنوان راهنمایی آورده شده که مخصوص طراحان وب و کسانی که در این زمینه تخصص لازم را دارند می باشد. همچنین این راهنمایی ها برای کسانی که در مراحل ابتدایی یادگیری طراحی وب و زبان هایی مثل HTML , CSS و جی کوئری هستند نیز مناسب می باشد و میتواند به توسعه دانش شان کمک کند.

مرحله ی اول: فراخوانی کتابخانه جی کوئری

فایل پروژه تان را باز کنید و کد زیر را قبل از بسته شدن تگ <head/> در فایل صفحه اصلی قالبتان قرار دهید.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>

راهنمایی: ما در اینجا کد های فراخوانی جی کوئری را از سرور گوگل قرار داده ایم. اما اگر میخواهید از فایل جی کوئری در سرور دیگر یا سرور خودتان استفاده نمایید کافیست آدرس آنرا جایگزین آدرس های کد بالا کنید. همچنین اگر قبلا کتابخانه جی کوئری را فراخوانی کرده اید دیگر نیازی به اضافه کردن کد بالا ندارید.

مرحله ی دوم: قرار دادن کد HTML نمایش دکمه آیکون

در این مرحله باید اصلی ترین کار یعنی ایجاد دکمه را انجام دهیم. کد زیر را در میان کد های html صفحه تان, جایی که میخواهید دکمه آیکون منو نمایش داده شود قرار دهید:

<button class="button-line" id="button"> <span class="line"></span> </button>

راهنمایی: کد بالا یک دکمه (button) با کلاس button-line ایجاد می کند که دربردارنده آیکون منو اصلی است. همچنین button بالا یک شناسه (id) با نام button دارد که بعدا از این شناسه برای فعال کردن قابلیت های جی کوئری استفاده می کنیم. به علاوه درون تگ باز و بسته button یک تکه کد دیگر به شکل زیر قرار دارد:

<span class="line"></span>

این کد برای ایجاد آیکون منو انوشته شده است که بعدا با استایل دهی به آن, یک آیکون با سه خط افقی روی هم ایجاد می کنیم.

نتیجه کدی که در این مرحله وارد پروژه تان کردید چیزی به شکل تصویر زیر است:

آیکون منوی تبدیل شونده به علامت ضربدر

با انجام این مرحله دیگر کاری با HTML نخواهیم داشت و باید برویم سراغ استایل دهی به دکمه در سی اس اس.

مرحله ی سوم: استایل دهی به دکمه و ایجاد شکل آیکون در CSS

کد CSS زیر را به فایل استایل قالبتان اضافه نمایید:

.button-line {
 cursor: pointer;
 padding: 15px 5px;
 border: none;
 background: none;
 }
 .line {
 display: inline-block;
 width: 50px;
 height: 8px;
 background: #999;
 border-radius: 2px;
 position: relative;
 transition: all 0.3s ease 0s;
 }
 .line:before {
 content: "";
 transition: all 0.3s ease 0s;
 top: 12px;
 width: 50px;
 height: 8px;
 border-radius: 2px;
 background: #999;
 position: absolute;
 left: 0;
 }
 .line:after {
 content: "";
 transition: all 0.3s ease 0s;
 top: -12px;
 width: 50px;
 height: 8px;
 border-radius: 2px;
 background: #999;
 position: absolute;
 left: 0;
 }
 .close {
 background: none;
 }
 .close:after {
 width: 40px;
 transform: rotate(45deg);
 transform-origin: 20% 150%;
 }
 .close:before {
 width: 40px;
 transform: rotate(-45deg);
 transform-origin: 14% -55%;
 }

چیزی که در نهایت به وجود می آید به شکل زیر است:

آیکون منوی تبدیل شونده به علامت ضربدر

راهنمایی: در کد بالا بخش های مختلفی وجود دارد که یک به یک آنها را توضیح می دهیم.

در بخش button-line ویژگی های زیر را میبینید (بخش button-line مربوط به ویژگی های دکمه می شود):

cursor: pointer ==> این ویژگی به دکمه شما این امکان را میدهد که درصورت قرار گرفتن موس بر روی آن, شکل موس به شکل یک دست در بیاید. درست مثل لینک ها.
padding: 15px 5px ==> این ویژگی, ۱۵ پیکسل از بالا و پایین و ۵ پیکسل از چپ و راست, درون دکمه فضای خالی ایجاد میکند.
border: none ==> در حالت پیشفرض اکثر مرورگر ها, button ها دارای یک بک گراند خاکستری و یک border یا حاشیه ی طوسی هستند. توسط این ویژگی تعیین می کنیم که دکمه ی ما حاشیه ندارد.
background: none ==> تعیین میکند دکمه ی ما بک گراند ندارد.

بخش line مربوط می شود به آیکون منوی ما. خصوصیات این بخش طوری تعیین می شود که یک خط افقی کوچک را درون دکمه رسم کند. در بخش line ویژگی های زیر را می بینید:

display: inline-block ==> یک فضایی تعریف می کند که از چپ و راست جایی را اشغال نمی کند اما درون خودش عناصر به صورت block (اشغال کننده ی یک سطر از چپ و راست) قرار می گیرند.
width: 50px ==> عرض خط افقی را تعیین میکند.
height: 8px ==> ارتفاع خط افقی را تعیین می کند.
background: #999 ==> رنگ پس زمینه خط افقی را تعیین می کند.
border-radius: 2px ==> حاشیه های خط افقی کوچک را گرد می کند.
position: relative ==> نوع position را تعیین می کند. یعنی نسبت به والد خود در صفحه قرار می گیرد.
transition: all 0.3s ease 0s ==> این گزینه به آیکون حالت انیمیشنی می دهد. یعنی وقتی قرار است خط افقی به ضربدر تبدیل شود این گزینه یک حرکت انیمیشنی به این تبدیل اضافه می کند.

تا به اینجا نتیجه به صورت زیر است:

آیکون منوی تبدیل شونده به علامت ضربدر

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

در بخش line:before ویژگی هایی قرار دارد که یک خط افقی به زیر خط افقی اصلی اضافه می کند:
"" :content ==> چون از شبه عنصر before استفاده کردیم, این ویژگی را به اینصورت باید قرار دهیم.
transition: all 0.3s ease 0s ==> حالت انیمیشنی را اضافه می کند.
top: 12px ==> از بالا به اندازه ی ۱۲ پیکسل فاصله می گیرد.
width: 50px ==> عرض خط افقی.
height: 8px ==> ارتفاع خط افقی.
border-radius: 2px ==> حاشیه را گرد می کند.
background: #999 ==> رنگ پس زمینه خط افقی را تعیین می کند.
position: absolute ==> نوع قرار گیری خط افقی در صفحه.
left: 0 ==> فاصله خط افقی از سمت چپ.
نتیجه به صورت زیر است:

آیکون منوی تبدیل شونده به علامت ضربدر

در نهایت نوبت به سومین خط افقی میرسد که باید بالای این دو خط فعلی قرار گیرد. بخش line:after این عمل را انجام میدهد. چون ویژگی های این بخش کاملا شبیه بخش line:before است, از تکرار ویژگی ها اجتناب می کنیم. نتیجه هم به صورت زیر است:

آیکون منوی تبدیل شونده به علامت ضربدر

حالا که شکل آیکون منو را طراحی کردیم نوبت می رسد به پویا کردن این دکمه. یعنی کاری کنیم که با کلیک روی دکمه, از حالت سه خط افقی روی هم, تبدیل شود به یک علامت ضربدر با دو خط متقاطع. خب طبیعتا باید یکی از این سه خط حذف شود و دو خط دیگر چرخش ۴۵ درجه ای داشته باشند تا همدیگر را قطع کنند و یک ضربدر را تشکیل دهند. ما برای زیبایی کار, خط وسط را حذف می کنیم و دو خط بالا و پایین را روی هم متقاطع می کنیم.

برای انجام اینکار یک کلاس با نام close ایجاد کردیم تا ویژگی های علامت ضربدر را داشته باشد. در مرحله ی بعدی یک کد جی کوئری به شما میدهیم که وظیفه ی اضافه کردن کلاس close به آیکون منو, بعد از کلیک روی دکمه را دارد. اما فعلا صبر کنید تا مرحله ی بعد برسد. هر موقع وقتش رسید آن کد جی کوئری و راهنمایش را خواهید دید! فعلا با توضیحات کلاس close همراه ما باشید.

در بخش close ویژگی زیر را می بینید:

background: none ==> این ویژگی برای این نوشته شده است که از بین سه خط افقی موجود, خط وسط را حذف کند یا به عبارت دیگر آنرا از داشتن بک گراند محروم کند.

در بخش close:after ویژگی های زیر را می بینید:

width: 40px ==> عرض خط افقی بالایی را کم می کند و به ۴۰ پیکسل می رساند.

(transform:rotate(45deg ==> یک چرخش ۴۵ درجه ای در خط افقی بالایی ایجاد می کند.
transform-origin: 20% 150% ==> محل قرار گیری خط افقی بالای, وقتی که چرخش ایجاد شد را تعیین می کند.

کد بالا در مجموع خط افقی بالایی را با یک چرخش ۴۵ درجه ای و کمی کوچکتر شدن و اندکی جابجایی, به یکی از خط های علامت ضربدر تبدیل می کند.

علامت ضربدر

در بخش close:after نیز خط متقاطع دیگر, ویژگی هایش تعیین می شود تا با همکاری خط اولی, یک ضربدر را تشکیل دهند.

آیکون منوی تبدیل شونده به علامت ضربدر

مرحله سوم: اضافه کردن کد جی کوئری برای تبدیل کردن آیکون منو به ضربدر در صورت کلیک

در مرحله نهایی کد زیر را قبل از بسته شدن تگ <body/> به صفحه تان اضافه کنید:

<script>
 $("#button").click(function(){
 $(".line").toggleClass("close");
});
 </script>

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

راهنمایی: اگر در مراحل قبل توانسته باشم خوب مفاهیم را برسانم, حتما متوجه شده اید که ما دو استایل در دو حالت مختلف برای دکمه ی منو نوشتیم. یک حالت وقتی که منو در حالت سکون و آرامش قرار دارد و کسی روی آن کلیک نکرده است و به شکل سه خط افقی روی هم است. یک حالت دیگر هم وقتی که روی منو کلیک شده و به شکل ضربدر در می آید (این حالت در کلاس های close و close:after و close:before تعریف شده است). اما برای اینکه به مرورگر بفهمانیم فقط در صورت کلیک شدن دکمه, شکل آنرا تبدیل به علامت ضربدر کند, باید یک قطعه کد جی کوئری به صفحه مان اضافه کنیم. کد بالا برایمان اینکار را انجام میدهد.

کد بالا ابتدا یک ID با نام button را برمیگزیند (این آی دی را قبلا در کد HTML مربوط به دکمه تعریف کرده بودیم) و میگوید در صورتی که روی آن کلیک شد, دستورات بین آکولاد را اجرا کن. حالا دستور چه هست؟ دستور این است:

$(".line").toggleClass("close");

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

امیدواریم از این مطلب استفاده لازم را برده باشید. خوشحال میشویم سوال ها و نظراتتان را با ما درمیان بگذارید.

لینک ها:

تبلیغات

نویسنده (مدیر سایت)

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

5 دیدگاه برای “چگونه آیکون منوی تبدیل شونده به علامت ضربدر بسازیم؟”

  1. sam گفت:

    ممنون بابت آموزشتون.خیلی بدردم خورد.

    1. جواد نبوی گفت:

      خواهش می کنم دوست من

    2. sam گفت:

      ببخشید یه سوال داشتم.من با تگ دیو یه بک گراند بهش اضافه کردم ولی اون سه تا خط ساف وسطش نمیوفتن چیکار کنم؟ممنون میشم جواب بدید.

    3. جواد نبوی گفت:

      نیازی نیست تگ دیو بهش اضافه کنید. کافیه برای کلاس .button-line که ما بهش بک گراند رو none دادیم، یک بک گراند تعیین کنید. با اینکار سه تا خط هم وسطش میوفته.

    4. sam گفت:

      یعنی دقیق و صاف وسطش نمیوفته.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *