قالب وردپرس درنا توس
خانه / آموزش CSS مقدماتی / آموزش ساخت منو بازشو با CSS3 و HTML 5
آموزش ساخت منو کشویی
آموزش ساخت منو کشویی

آموزش ساخت منو بازشو با CSS3 و HTML 5

آموزش ساخت منو بازشو با CSS3  و HTML 5

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

ابتدا یک فایل خالی CSS و یه فایل خالی HTML در Dreamweaver ایجاد کنید و در یک پوشه ذخیره کنید .

در فایل HTML بعد از ذخیره کردن در تگ title عنوان صفحه را ساخت منو کشویی :

۳-باید با استفاده از تگ link در تگ head فایل CSS  مون رو به فایل HTML متصل میکنیم . ( من اسم فایل CSS رو Style.css و نام فایل HTML رو Index.html قرار دادم)

 

فایل CSS برای قالب بندی عناصر در صفحه استفاده می شود .

۴- حالا بخش ها یا همان division ها را قرار می دهیم .

چون در این آموزش قرار است فقط یک منو قرار دهیم و دیگر اجزای وبسایت قرار ندارد فقط یک بخش قرار می دهیم .اسم آن division را هم stylemenu  قرار می دهیم .

۵- جالا باید لینک های منو رو در بخش stylemenu قرار دهیم . من لینک ها رو با ۳ Class در فایل Index.html قرار می دم .

من لینک ها رو به خود صفحه با استفاده از # لینک کردم .

تا اینجا نتیجه رو در مرور گر برسی کنید :

ساخت منو کشویی001

۶- آموزش های ما دارای دو زیر مجموعه است که آنها خود نیز دارای دو زیر مجموعه هستند . آنها به ترتبی قرار می دهیم : ( خط ۱۴ تا ۲۷ جدید هستند )

نتیجه کد بالا در مرورگر :

ساخت منو کشویی002

۷- کار ما با فایل Index.html تما است و به سراغ فایل Style.css می ریم .

اول باید فاصله از هر طرفش رو صفر کنیم :

نتیجه :

ساخت منو کشویی003

۸- حالا باید تنظیمات مربوط به عرض منو ، ارتفاع ، نوع رنگ پس زمینه ، انحنای دور لبه ها ، اندازه لینکها و نوع فونت آنها را مشخص کنیم :

دمو در مرورگر :

ساخت منو کشویی004

۹- حالا باید لبه های بالا و پایین منو رو گرد کنیم : (ادامه کد های css قبل )

نتیجه :

ساخت منو کشویی005

۱۰-  حالا می خواهیم زمانی که ماوس بروی  آنها قرار گرفت یک سری تغییرات اعمال شود :

(از علامت > در دستورات استفاده کرده ایم تا تمام بچه های یک عنصر مادر مورد انتخاب قرار گیرد .)

نتیجه :

ساخت منو کشویی006

۱۱- در آخر هم تنظیمات مربوط به زیر مجموعه ها رو می نویسیم :

نتیجه کار :

ساخت منو کشویی007

با تشکر در آینده هم آموزش هایی از این سبک قرار داده می شود با ما همراه باشید

مشاهده دمو 

بازدید: 916

درباره محمدرضا جفاکش

دانشجو رشته طراحی وتوسعه صفحات وب

مطلب پیشنهادی

آموزش CSS

آموزش CSS (جلسه پنجم)

مفاهیم پایه ای CSS دانستن مفاهیم پایه ای در CSS از اهمیت زیادی برخوردار است. هرچه بر این …

دیدگاهتان را بنویسید

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