چگونه یک منوی زیبای افقی با CSS3 بسازیم؟

 

در این مقاله گام به گام  با CSS3 یک منوی زیبای افقی خواهیم ساخت.

 

مرحله اول: کد نویسی HTML

یک لیست نامرتب مانند کد های زیر ایجاد کنید. برای زیر منوها باید  یک لیست دیگر در داخل لیست جاری بصورت تو در تو قرار دهید.

 

 

 مرحله 2: طرح بندی منو

در این بخش خصوصیات از جمله Margin ، Padding ، Border ، Outline را از تمام قسمت های منو حذف می کنیم. بعد عرض و ارتفاع را تنظیم می کنیم. رنگ زمینه و رنگ لینک ها عوض می کنیم. در قسمت menu li. منو ها را در یک خط و پشت سر هم قرار می دهیم.

توسط کد پایینی زیر منو را به صورت موقت غیر فعال می کنیم.

.menu ul { display: none; }

 

مرحله 3: لینک منو

سبک لینک ها را از جمله فونت  و رنگ را تغییر می دهیم سپس متن را سایه دار می کنیم همچنین فاصله  متن لینک ها را تنظیم می کنیم.

 

مرحله 4: زیر منو

اول از همه اجازه دهید تا کد زیر را حذف کنیم بعد به مراحل بعد برسیم.

.menu ul { display: none; }

زیر منوها را در موقعیت 40px از بالا 0px از چپ قرار می دهیم. Opacity یا همان مقدار کدری را 0 قرار می دهیم و وقتی را ماوس را روی لینک قرار می دهید ارتفاع (Height) را 36px و وقتی ماوس را کنار می کشیم ارتفاع 0px قرار می دهیم

عرض لینک زیر منو را 100px تنظیم کنید.

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

 

نتیجه:

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

 

دانلود سورس آماده این آموزش

دانلود سورس آماده این آموزش در ASP.NET

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مفاهیم طراحی وب

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط