استایل منو

منوی ما در قسمت header قرار گرفته است اما ارتفاع هدر ما ۲۰۰px است که فقط تا قسمت جستجو را در بر می گیرد، حال باید ارتفاع آن را ۵۰px ( 50px ارتفاع منو است) بیشتر کنیم تا قسمت منو نیز در header قرار بگیرد پس :

nv

اگر style را ذخیره و مروگر را ریفرش کنید خواهید دید که ارتفاع بیشتر شده، و پس زمینه ای که برای header در نظر گرفته بودیم، تکرار شده است، اما چونکه پس زمینه منو متفاوت است از تکرار جلوگیری می کنیم پس دوباره کد header رو توسعه می دیم :

bb

Repeat-x باعث خواهد شد، پس زمینه به صورت عمودی تکرار شود.

درضمن ۲px بخاطر سایه ی header کم کردیم. تا دیگر در پایین منو نمایش داده نشود.

حال به منو بر می گیردیم، برای انتخاب منو از انتخابگر زیر استفاده می کنیم :

mz

 

حال باید عرض و ارتفاع و همینطور پس زمینه رو اضافه کنیم، پس کد رو به شکل زیر توسعه می دیم :

lho

با استفاده از margin نیز مقداری منو رو به سمت پایین می کشیم تا در مکان خود قرار بگیرد. با استفاده از padding نیز مقداری گزینه های منو را از سمت راست فاصله میدهیم

mc

حال نوبت آن رسیده تا که منو را از این شلوغی دربیاریم پس برای اینکار ابتدا با کد گزینه ها را در پشت سر هم در یک خط (inline) قرار می دهیم :

menu

سپس میان ها با استفاده از margin فاصله می اندازیم، و برای اینکه بصورت افقی در وسط قرار بگیرند از line-height استفاده می کنیم.

lhd

حال به لینک ها استایل می دهیم :

naa

حال از منو فقط آیکون صفحه اصلی مانده است که نیاز به تغییر استایل دارد، ابتدا فایل index.html رو در ویرایشگر کد باز کنید و اولین گزینه منو که همان صفحه اصلی است را به شکل زیر ویرایش کنید

qq

به فایل style بر گردین و کد زیر رو اضافه کنید :

tr