چگونه می توانید به کمک کدهای css یک منوی درخشان درست کنید

چگونه می توانید به کمک کدهای CSS یک منوی درخشان درست کنید

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

نتیجه نهایی :

​

کدهای HTML :
پوشه HTML ما شامل لیستی ناخواسته است و هر آیتم از لیست لینکی از یک تگگ دیگری است . اسپن شامل نام آیتم منو است .

​

کدهای CSS :
من از یک الگو برای پشت زمینه صفحه مان که از SubtlePatterns گرفتم استفاده می کنم .

​

خوب حالا به سراغ آیتم های لیست منو می رویم و آنها را مرتب می کنیم. من از عرض ۲۵% برای هر آیتم استفاده می کنم. پس در هر ردیف چهار آیتم منو می تواند قرار گیرد . حالا تمام متن های آیتم های لیست را وسط قرار می دهم.

​

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


من از فونت ‘Kotta One’ برای متن اپسن استفاده می کنم. سایز فونت معمولی و ۲۰ پیکسل در ۷۰۰ متناسبا انتخاب می کنیم.من رنگ فونت را به رنگ سفید خاصی در می آورم.

​

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

​

​

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

​

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