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