محتوا

• گام برداشتن
• قسمت 1 از 2: نوشتن HTML
• قسمت 2 از 2: نوشتن CSS
• نکات

با استفاده از یک منوی کشویی ، شما یک نمای کلی و واضح و کامل از تمام قسمتهای مهم صفحه و زیرمجموعه هایی که صفحه شامل می شود ، ایجاد می کنید. شما فقط باید موس خود را روی قسمت های اصلی حرکت دهید تا قسمت های فرعی ظاهر شود. فقط با استفاده از HTML و CSS می توانید یک منوی کشویی ایجاد کنید.

گام برداشتن

قسمت 1 از 2: نوشتن HTML

1. بخش پیمایش خود را ایجاد کنید. به طور معمول از nav> برای نوار پیمایش در سراسر وب سایت ، عنوان> برای بخشهای پیوند کوچکتر که به صفحه محدود شده اند یا div> در صورت عدم وجود گزینه دیگر استفاده می کنید. این را در عنصر div> قرار دهید تا بتوانید سبک ظرف و خود منو را تنظیم کنید.
   • div>
   • nav>
   • / nav>
   • / div>
2. به هر بخش یک ویژگی کلاس بدهید. بعداً از ویژگی class استفاده خواهیم کرد تا سبک این عناصر را با CSS اصلاح کنیم. به کلاس و منو ویژگی کلاس خاص خود را بدهید.
   • div>
   • nav>
   • / nav>
   • / div>
3. لیستی از موارد منو اضافه کنید. لیست غیر مرتب (ul>) شامل مواردی از منوی اصلی (موارد لیست li>) است ، اگر کاربر ماوس خود را بر روی آن حرکت دهد ، منوهای کشویی را می بیند. کلاس "پاک کردن" را به عنصر لیست خود اضافه کنید. بعداً در صفحه گسترده CSS به این موضوع خواهیم رسید.
   • div>
   • nav>
   •       ul>
   •          li> صفحه اصلی / li>
   •          li> کارمندان
   •          li> تماس بگیرید
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. پیوندها را اضافه کنید اگر این موارد منوی سطح بالا نیز به صفحات خود پیوند دارند ، اکنون می توانید پیوندها را وارد کنید. پیوند به یک لنگر موجود (مانند "#!") ، حتی اگر به چیزی پیوند نداشته باشند ، بنابراین مکان نما کاربر متفاوت به نظر می رسد. در این مثال ، Contact به جایی نمی رسد ، اما دو مورد دیگر از منو انجام می دهند:
   • div>
   • nav>
   • ul>
   • لی>a href = "/">خانه/ a>/ li>
   • لی>a href = "/ کارمندان">اعضای کارکنان/ a>
   • / li>
   • لی>a href = "#!">مخاطب/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. لیست های زیر را برای موارد کشویی ایجاد کنید. بعد از ایجاد سبک ، این لیست ها منوی کشویی را تشکیل می دهند. لیست را در مورد لیست قرار دهید و کاربر ماوس را روی آن قرار دهد. یک ویژگی کلاس و یک پیوند درست مثل قبل اضافه کنید.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> صفحه اصلی / a> / li>
   • li> a href = "/ کارمندان"> کارمندان / a>
   •          ul>
   •             li> a href = "/ borsato"> مارکو بورساتو / a> / li>
   •             li> a href = "/ titulaer"> کریت تیتولر / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> تماس با / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> گزارش یک مشکل / a> / li>
   •             li> a href = "/ support"> پشتیبانی مشتری / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

قسمت 2 از 2: نوشتن CSS

1. صفحه سبک CSS خود را باز کنید. اگر پیوند موجود نیست ، یک پیوند به صفحه سبک CSS خود در بخش اصلی سند HTML خود ارسال کنید. در این مقاله ، ما اصول CSS ، مانند تنظیم قلم و رنگ پس زمینه را پوشش نخواهیم داد.
2. کد پاک کردن را اضافه کنید. کلاس "پاک کردن" را به لیست فهرست اضافه می کنید؟ به طور معمول ، عناصر منوی کشویی دارای یک پس زمینه شفاف هستند ، که اجازه می دهد سایر عناصر را جابجا کنید. یک سازگاری ساده با CSS می تواند این مشکل را حل کند. در اینجا یک راه حل خوب و سریع وجود دارد ، اگرچه در اینترنت اکسپلورر 7 و نسخه های قبلی کار نمی کند:
   • .clearfix: بعد از {
   • محتوا: ""؛
   • نمایش: جدول؛
   • }
3. طرح اولیه را ایجاد کنید. با استفاده از این کد می توانید منوی خود را در بالای صفحه قرار داده و عناصر کشویی را پنهان کنید. این کار از روی هدف بسیار ساده است تا بتوانیم روی کد مربوطه تمرکز کنیم. بعداً می توانید با کد CSS اضافی مانند padding و margin آن را اصلاح کنید.
   • .nav-wrapper {
   • عرض: 100٪
   • پس زمینه: # 008B8B؛
   • }
   •  
   • منوی .nav {
   • موقعیت: نسبی؛
   • نمایش: بلوک درون خطی ؛
   • }
   •  
   • منوی زیر. {
   • موقعیت: مطلق؛
   • نمایش: هیچ؛
   • پس زمینه: # 555؛
   • }
4. وقتی موشواره را روی آنها قرار می دهید ، موارد کشویی را نشان دهید. عناصر موجود در لیست کشویی اکنون تنظیم شده اند تا نشان داده نشوند. در اینجا چگونگی ایجاد لیست کامل به محض قرار گرفتن در بالای "والد" نشان داده شده است:
   • .nav-menu ul li: hover> ul {
   • نمایش: بلوک؛
   • }
   • توجه - اگر منوهای اضافی در فهرست های منوی کشویی پنهان باشد ، ویژگی های اضافه شده در اینجا برای همه منوها اعمال می شود. اگر می خواهید این سبک فقط در سطح اول منوهای کشویی اعمال شود ، به جای آن از ".nav-menu> ul" استفاده کنید.
5. با یک پیکان مشخص کنید که یک منوی کشویی وجود دارد. طراحان وب معمولاً با یک فلش رو به پایین نشان می دهند که یک عنصر منوی کشویی را باز می کند. این کد آن پیکان را به هر عنصر در فهرست شما اضافه می کند:
   • menu .nav> ul> li: بعد از {
   • محتوای: " 25BC"؛ / * از یونی کد برای پیکان رو به پایین فرار کرد * /
   • اندازه قلم: .5em؛
   • نمایش: بلوک؛
   • موقعیت: مطلق؛
   •    }
   • توجه - موقعیت پیکان را با خصوصیات بالا ، پایین ، راست یا چپ تنظیم کنید.
   • توجه - اگر همه موارد منوی شما دارای کشویی نیستند ، ظاهر کل منوی nav کلاس را تغییر ندهید. در عوض ، به هر عنصر li که می خواهید یک پیکان داشته باشید ، کلاس دیگری (مانند کشویی) اضافه کنید. در کد بالا به آن کلاس مراجعه کنید.
6. بالشتک ، پس زمینه و سایر خصوصیات را تنظیم کنید. منو باید اکنون کار کند ، اما هنوز خیلی خوب نیست. با استفاده از ویژگی های موجود در CSS می توانید نحوه مشاهده هر کلاس یا عنصر و مکان قرارگیری آنها را شخصی سازی کنید.

نکات

• اگر می خواهید یک منوی کشویی به فرم اضافه کنید ، در HTML5 با انتخاب عنصر> بسیار آسان است.
• پیوند a href = "#"> به بالای صفحه پیمایش می شود و پیوندی که به یک لنگر وجود دارد ، مانند href = "#!"> ، پیمایش نمی کند. اگر احساس بیش از حد شلختی داشته باشید ، می توانید نحوه مشاهده مکان نما را با CSS تغییر دهید.
• وقتی کد نمونه را کپی و جایگذاری می کنید ، همه گلوله ها را بردارید.