منوی CSS عمودی: خودتان آن را انجام

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

گام های اساسی

برای ایجاد یک ساده منوی عمودی CSS، شما نیاز مراحل زیر است:

1. اول، تعیین یک لیست از لینک (با استفاده از کد HTML غیر)، که در منوی خواهد بود. آنها را نام می دهد، برای مثال، به شرح زیر است:

1. صفحه اصلی.
2. تاریخ ما.
3. راهنمای.
4. خدمات.
5. اطلاعات تماس.

2. سپس یک ظاهر طراحی شده به عنوان لینک شما با کمک CSS خواهید.

ما در نوشتن کد HTML، در فایل my_Vmenu.html نگه دارید و ببینید که چگونه آن را در مرورگر را نگاه خواهد کرد:

این اساس (اسکلت) از منوی ما است. # 1، # 2، و غیره باید توسط مرجع جایگزین شده است. ببینید که چگونه آن را در یک مرورگر به نظر می رسد. تصویر شما نه می خواهم. اکنون ما باید شروع به توصیف عناصر سبک، برای ایجاد یک کامل منوهای CSS عمودی.

توضیحات سبک

درست my_Vmenu.css فایل، که همه چیز شما می خواهید برای بهبود ظاهر چنین عنصر مهم از سایت. در اینجا کد، معرفی که به منوهای CSS عمودی احیای است. آن و ارسال فایل جدید، و پس از آن خواهیم نزدیک تر نگاه به معنی از خطوط اصلی که داده می شود.

شرح مفصل شیوه استفاده

در حال حاضر جزئیات از CSS منوی عمودی ما در نظر بگیرید:

سبک لیست نوع اجازه می دهد تا شما را به حذف لیست از نشانگر. با تنظیم "0" به margin و padding حذف لایه اضافی در لیست. همانطور که می توان از کد HTML غیر دیده می شود، منوی ما یک لیست است، و سبک با استفاده از CSS تعریف شده است.

UL # my_Vmenu - سبک کلی از لیست کل.

UL # my_Vmenu لی - لینک های سبک بین لی برچسب.

UL # my_Vmenu لی: شناور - شرح نوع تحت نظر گرفتن آیتم های منو در زمانی که یکی را بر مردم با ماوس.

UL # my_Vmenu لی یک دوره - شرح متن (عنوان منو).

به یاد داشته باشید که فایل های my_Vmenu.css my_Vmenu.html و باید در همان دایرکتوری حفظ شود. با این حال، آنها ممکن است در پوشه های مختلف قرار دارد، اما از آن مهم است به ثبت نام در مسیر فایل my_Vmenu.html به my_Vmenu.css. مراقب باشید، زیرا تازه واردان به این مشکل اغلب.

سبک باید بین تگ سر در یک فایل HTML فایل متصل شود. menu_1.png و menu_2.png - این تصویر برای آیتم های منو تصویر در حالت عادی و شناور است.

بهتر است برای ذخیره کردن تصاویر در یک پوشه جداگانه برای تصاویر، نام آن را my_images، اما پس از تنظیم کد CSS. ارسال که این تصاویر نشان داده شده، آنها در این شاخه عبارتند از: آدرس (my_images / menu_1.png) و آدرس (my_images / menu_2.png).

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

منوی عمودی ما

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