Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش تصویری ساخت منو

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


شما باید در نهایت به کد زیر برسید:

توضیحاتی که در فیلم گفته شده است:

بسم الله الرحمن الرحیم
آموزش ساخت منو
نرم افزار استفاده شده در این فیلم فقط برای سرعت بخشیدن به کار می باشد و اصلا نیازی به آن نیست.
کد های اولیه ای که شما می بینید کد های اصلی هستند و نیایز به وجود آنها برای عمل کردن کد نیست.
شما می توانید به جای name-ul هر کلمه ای که دلتان می خواهد بگذارید فقط یادتان باشد که در آن از فاصله استفاده نکنید و هر جایی که برای مثال نوشتید moisrex در شناساگر استایل آن نیز همین کلمه را بنویسید.
مشکلی که الان قابل مشاهده است این می باشد که تمام لینک ها به صورت عمودی هستند (به جای این که به صورت افقی باشند) البته این خاصیت را در منو های عمودی می توان استفاده کرد.
همان طور که میبینید با گذاشتن padding می توان کاری کرد که هر لینک کمی بزرگ تر شود و با بردن ماوس روی هر سلول ماوس تغییر حالت می دهد.
با گذاشتن display:block کاری کردیم که هر لینک مانند یک تگ div به نظر برسد و کل سطر را در برگیرد.
حتما دیدید که در منو های حرفه ای که میسازند با بردن ماوس روی هر سلول آن تغییر حالت می دهد. برای این کار باید از :hover استفاده کرد.
این کد عمل نخواهد کرد زیرا در آن از کلمه -moz- ر آن استفاده نشده است. این کلمه با آمدن قبل از کد های سی اس اس باعث می شود که در بعضی از مرورگر ها کد عمل کند.
همانطور که می بینید این کد عملکردی درست پیدا کرد ولی مشکلی که الان وجود دارد این است که با بردن ماوس این کد عمل می کند ولی زمانی که ماوس از روی سلول برداشته می شود بدون وقفه 0.5 ثانیه ای به حالت اول بر می گردد که باید در این زمان کد را در مبدا آن گذاشت نه بر روی :hover

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


آدرس آزمایش کد ها: http://moisrex.rozblog.com/page/HTML-COD-2

حجم فیلم: 39 مگابایت

برای دیدن فیلم اینجا کلیک کنید.


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36465
افراد آنلاین : 7
بازدید امروز : 149
بازدید دیروز : 1,687
گوگل امروز : 12
گوگل دیروز : 257
بازدید هفته : 11,550
بازدید ماه : 29,611
بازدید سال : 29,611
بازدید کلی : 10,424,087