چگونه به یک منوهای کشویی CSS

دستور العمل

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

• ما ایجاد طرح بندی منو ما. برای این کار، برچسب HTML کد. ایجاد یک لیست تو در تو از:
  • در در
  • از تگ
    • در در
    • در در
    • در در < / ul> از. چیزی شبیه به این باید مانند منوی کشویی خود را نگاه کنید. CSS به مداخله بعد. در این مورد لیست اصلی شامل سه حوزه اصلی و دو محصور شده است.
    • مخفی کردن زیر منو. برای این که ما با استفاده از یک شیوه، تعریف خواص زیر است: UL UL {نمایش: ندارد؛} این عناصر از لیست دوم از روی صفحه نمایش را حذف کنید.
    • درست CSS منو، کشویی را از فهرست اصلی. ورق سبک آبشار ارسال قاعده زیر: لی UL: شناور UL {نمایش: بلوک؛}. این مطلب بدان معنی است که زمانی که ماوس بر روی لی عنصر است، که در لیست UL واقع در UL صفحه نمایش ظاهر می شود (متصل). در نگاه اول، مانند یک طرح ممکن است پیچیده و گیج کننده به نظر می رسد. اما در واقع، همه چیز بسیار ساده است.
    • با استفاده از این طرح خود را با قرار دادن تگ
    • از مطالب خود را. شما می توانید تعداد عناصر لیست را تغییر دهید.

    تغییرات تزئینی

    به محض این که طرح بندی منو اصلی آماده است، شما می توانید به ادامه ثبت نام. احتمالا بسیاری از در وهله اول به از نشانگر نشان می دهد لیست آیتم ها خلاص شوید. این امر با استفاده از CSS اموال تک، یعنی سبک لیست نوع انجام می شود. شما نیاز به اضافه کردن ورودی های زیر است: لی {سبک لیست نوع: ندارد؛}. سپس شما می توانید قاب را وارد و پس زمینه. مرز و پس زمینه به شما کمک کند با این. شاید برخی از نه می خواهم منوی کشویی به عنوان یک لیست اضافی ظاهر خواهد شد، هل دادن در عناصر اساسی است. برای حل این مشکل، شما می توانید آن موقعیت. برای این کار، شیوه نامه آبشاری ارسال از ورود زیر است: UL UL {موقعیت: مطلق؛ سمت چپ: 15px؛ راست: 15px؛ بالا: 15px؛ پایین: 15px؛}. البته، ارزش شما خود استفاده کنید. بسته به جایی که شما می خواهید برای دیدن منوهای کشویی، CSS خواهد شد بسیاری از ویژگی های بیشتر که می تواند اثرات مختلف اضافه کردن و تزئین لیست ما ارائه دهد.

    نتیجه

    یک بار دیگر آن را شایان ذکر ساخت طرح بندی منو است. برای اختصاص دادن قوانین CSS مورد استفاده در این ارزش مورد تعبیه شده، به عنوان مثال، UL UL. اگر شما در سند برای دیدار با دیگر ساختار مشابه هستند، ممکن است مشکلات بزرگ وجود دارد. در این شرایط، شما نیاز به استفاده از یک هدف خاص، برای مثال، انتخابگرهای یا شناسه-شناسه. طرح مقاله منوی کشویی بالا طراحی شده است آشنا طرح کلی. بقیه کار استوار بر روی شانه خود را.