آموزش ساخت منو به وسیله html,css

با عرض ادب و احترام خدمت تمامی بازدیدکنندگان گرامی ، امروز با مقاله آموزش ساخت منو به وسیله html,css در خدمت شما عزیزان هستیم . همانطور که میدانید انواع منو های افقی و عمودی در وب سایت ها وجود دارند که شما میتوانید با توجه به سلیقه خودتان این منو ها را طراحی کنید .

آموزش ساخت منو افقی

برای ساخت منوی ها افقی ابتدا کافیست یک بخشی در قالب برای این منظور تهیه کنید.
ابتدا کافیس یک div برای بخش منو خود تعریف کنید و سپس کلاس برای آن برگزینید به نام منو بدین منظور کافیست از کد زیر استفاده نمایید .

<div class=”menu“></div>

به طور مثال شما منویی دارید که شما بخش های : صفحه اصلی ، درباره ما،اخبار،مقالات و تماس با ما است برای طراحی این بخش کافیست نمونه کد های زیر را وارد نموده و به وسیله آن منوی خود را طراحی نمایید .

<ul>
<li><a href=”#”>صفحه اصلی</a></li>
<li><a href=”#”>درباره ما</a></li>
<li><a href=”#”>اخبار</a></li>
<li><a href=”#”>مقالات</a></li>
<li><a href=”#”>تماس با ما</a></li>
</ul>

آموزش ساخت منو به وسیله html,css

آموزش ساخت منو به وسیله html,css

همانطور که مشاهده کردید ما هر آیتم منو را درون کد باز و بسته li قرار دادیم و به وسیله دستور a برای کاربران مسیری را مشخص نمودیم . برای لینک دادن به وسیله دستور <a> کافیست قبل از بسته شدن دستور href=”” را تایپ کنید و بین هر “” مسیری را که میخواهید کاربر را هدایت نمایید اعمال نمایید. حال برای اینکه مشخص کنید که منو به صورت افقی نمایش داده شود کافیست کد css زیر را اجرا نمایید .

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

با استفاده از list-style-type ما گرد کردن گوشه را پنهان کردیم توجه داشته باشید در صورت تایپ نکردن این دستور منوی شما به صورت لیستی نشان داده خواهد شد . کدهای margin و padding را هم صفر در نظر میگیریم که هیچ گونه ارتفاعی منوی ما نداشته باشد .حال میخواهیم همین منو را تبدیل به منوی عمودی نماییم. کافیست کد زیر را در بخش css وارد نمایید و آنرا اجرا نمایید.

افقی کردن منو ها

li a {
display: block;
width: 60px;
}

همانطور که در کد بالا مشاهده میکنیم ما نوع نمایش منو را بلوک در نظر گرفتیم. display : block
برای منو ی خود پهنایی در نظر گرفتیم به ابعاد ۶۰ px یا همان پیکسل توجه داشته باشید اگر تعداد کاراکتر های منوی شما بیش از ۶۰ پیکسل باشد بیرون زده گی ای در منو شاهد خواهید بود . اگر تعداد کاراکترهای شما در برخی از آیتم های منو زیاد است کافیست width را ۱۰۰% بدهید .برای مشاهده آموزش های بیشتر کافیست به لینک آموزش html,css مراجعه کنید.


پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *