آموزش طراحی سایت و سئو

آموزش ساخت انواع منو سایت

آموزش ساخت منوی رنگارنگ با CSS3

ساخت منو رنگارنگ برای برخی سایت ها و به تناسب نوع فعالیتشان میتواند بسیار سودمند وموثر باشد . در این مقاله قصد داریم تعدادی از کد های ساخت منو رنگارنگ و منو آبشاری را توضیح دهیم می خواهیم منوبار رنگارنگ متحرک توسط CSS3 و فونت آیکن ها بسازیم. یک فونت آیکن کاراکتر مورد نظر را بجای حروف به عرصه نمایش در می آورد. این بدین معنی است که شما آیکون هایی را به شکل وکتور دریافت می کنید که در تمام مرورگرها قابل نمایش هستند و توسط html5 هم پشتیبانی می شوند.

اولین گام ساخت منو رنگارنگ

کدهای زیر می بایست در صفحه index.html قرار گیرند.

 

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

گام دوم – CSS

همانطور که در قطعه کد اچ تی ام ال بالا مشاهده می کنید ما لیست نا مرتبی داریم که درون UL اصلی جا خوش کرده است. بنابراین ما باید استایل خود را با دقت هرچه تمام تر بنویسیم. ما قصد نداریم منوهای اصلی که بصورت آبشاری به روی زیرمنوهای خود باز می شوند را استایل دهی کنیم ( چرا که در واقع آنها خود دارای کلاس اختصاصی آیکن فونت هستند). خوشبختانه سی اس اس برای استایل دهی عنصر فرزند نسبت به والد توسط این نشانگر < چاره اندیشی کرده است. ( < : سلکتوری است که برای انتخاب عناصر فرزند انتخاب می شود).

کدهای فوق پهنای عنصر را مشخص می کند و میزان حاشیه صفحه را مطابق وسط صفحه قرار می دهد یعنی تمامی عناصر با یک عرض ثابت نسبت چهار طرف صفحه قرار می گیرند البته این خصوصیات تنها روی عنصر نا مرتب اول اثر می کند که از نوادگان مستقیم عنصر  #colorNav می باشد. این مورد را بخاطر بسپارید حالا ببینیم منوهای اصلی به چه شکل ظاهر می شوند.

عناصر مورد نظر ما به صورت inline-block ظاهر می شوند بدین معنی که گزینه های منوی ما در یک خط نشان داده می شوند و ما می توانیم یک موقعیت نسبی خاص را به این عناصر نسبت دهیم و منوهای آبشاری را به درستی جابجا کنیم. عنصر لنگر(که به منظور تعیین موقعیت و جابجایی عناصر صفحه استفاده می شود)  نیز خود در فونت آیکن ها دارای کلاس خاص خود می باشد.

 

حالا با منوهای آبشاری کار را دنبال می کنیم. در اینجا از خاصیت CSS3 transition animation بهره می بریم. حدا اکثر ارتفاع را مطابق با مقدار ۰ قرار می دهیم تا خاصیت آبشاری منو مخفی شود. در سوی دیگر وقتی ماوس بر روی منو ظاهر شود و به قولی خاصیت Hover اجرا شود مقدار بزرگی را به ویژگی Height نسبت می دهیم که باعث نمایش آبشاری منو خواهد شد.

 

تکه کد زیر هم به قولی استارت خاصیت انیمیشن در css است که با تنظیم خاصیت height با یک مقدار زیاد که باعث نمایش آبشاری منو خواهد شد.

 

مقدار ۲۰۰ پیکسل به صورت دلخواه است و در صورت تمایل می توانید مقدارش رو کم یا بیشتر کنید البته اگر عناصر بازشوی زیادی در صفحه دارید توصیه می شود مقدارش را کم کنید و اگر تعداد عناصر بازشوی شما کم است می توانید مقدار بیشتری را به خاصیت height اختصاص دهید که ارتفاع زیر منوهای آبشاری را تنظیم می کند.

گام بعدی استایل دهی منوهای آبشاری است.

 

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

 

یکی از جنبه های استفاده از فونت آیکن ها اینست که شما می توانید رنگ آنها را تغییر دهید بدین منظور خاصیت Color آن را تغییر دهید. این بدین معناست که شما می توانید تمام خواصش را تنها توسط CSS تغییر دهید و مطابق میل خود آنها را سفارشی سازی کنید.

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

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

پاسخ دهید

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