کاربر عزیز ! اگر میخواهید به طور لحظه ای از بروز رسانی نرم افزار مورد نظر خود آگاه شوید و ایمیل بروز رسانی برنامه مورد نظر خود را در لحظه دریافت نمایید و فهرست برنامه های منتخب خود را در محیط کاربری خود ذخیره کنید همچنین دسترسی به تمامی برنامه های مخصوص اعضای ویژه(VIP) داشته باشید، با پرداخت ماهیانه فقط 2900 تومان از این امکان بهره مند شوید
عضویــــــت
x
بستن
 
آنلاین: 5272 نفر | تعداد برنامه ها: 5734 | مشاهده و دانلود: 391006853 | آخرین بروزرسانی: 1 ساعت و 20 دقیقه و 51 ثانیه پیش | اعضاء: 229555 | نظرات: 34950
جار میزنم samtik.com سرور آپدیت نود 32

سافت گذر دانشنامه نرم افزار - دانلود رایگان نرم افزار

سرور آپدیت نود 32
خرید گیفت کارت
مناسب ترین قیمت با ارائه آنی اسکن کارت
Geefti.com
سلامت
سلامتیسم ، سلامت و سبک زندگی
salamatism.com
دانلود آهنگ جدید
ایران موزیک
iranmusic.ir
خرید هاست
میهن وب هاست
mihanwebhost.com
رزرو هتل
رزرو هتل
eghamat24.com
تور لحظه آخری
تور لحظه آخری
arshinparvaz.com
تور مشهد
تور مشهد
alefbatour.com
طراحی سایت
طراحی سایت
www.papgroup.ir
مبل
مبلمان سام اکسون
samexxonsofa.com
سافت گذر

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

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

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

گام اول – HTML

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

 

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

منوی CSS

گام دوم – CSS

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

 

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

کد خبر: 26063 گروه خبری: اخبار آموزشی منبع خبر: itport.ir تاریخ خبر: 1394/01/28 تعداد مشاهده: 1066
کلید واژه ها:

, , ,

سافت گذر
نام و نام خانوادگی:
نظر شما:
لطفاً فارسی بنویسید
ایمیل:
نام پایتخت ایران؟
» ایمیل وارد شده نمایش داده نمی شود و فقط برای ارتباط با شما مورد استفاده قرار می گیرد.