آموزش ساخت منوی افقی ساده با HTML و CSS

ویژه آموزش ساخت منوی افقی ساده با HTML و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

ساخت منو برای کاربران مبتدی ممکن است کمی مشکل باشد . با توجه به تیکت های ارسالی میخواهم یک منو ساده به صورت افقی برای شما طراحی کنم تا به صورت دقیق نحوه و چیدمان منو را یاد بگیرید و در مراحل بعدی بتوانید با استفاده از مقالات قبلی که در سایت قرار داده ام برای منو زیر منو ایجاد کنید . معمولا وقتی کاربران یک تمرین را به صورت دقیق از ابتدا خوب متوجه شوند در مراحل بعدی راحت تر می توانند تمرین های بعدی را انجام بدهند .

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

2. سپس با استفاده از تگ UL  و LI  لینکهای مورد نظر را درون دیویژن که ایجاد کرده ایم تایپ میکنم .از تگ Ul برای نمایش لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.این تگ شامل خاصیت TYPE می باشد که مواردی را در خود جای داده است.در کل این تگ علامات و نشانه های ما را در قسمت مورد نظر نمایش می دهد.
فرض کنید می خواهید 5 منو را به صورت افقی در وب سایت ایجاد کنید . عنوان منو باید بین تگ UL و با استفاده از تگ Li نشانه گذاری شود . به منوهای زیر نگاه کنید .

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#about">shop</a></li>
</ul>

 

حالا اگر این صفحه را به عنوان index.html ذخیره کنید و خروجی را در مرورگر مشاهده کنید منوی شما باید به این شکل باشد .

1 طراحی منو افقی

حالا میخواهم نقطه های قبل از منو همراه با فاصله از طرفین را با استفاده از style تغییر بدهم .

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

 

خروجی در مرورگر باید به شکل زیر باشد

2 طراحی منو افقی

 حالا برای اینکه منوها در یک خط قرار بگیرد باید از تگ زیر در style استفاده کنید .

li {
    display: inline;
}

 

3 طراحی منو افقی

برای ایجاد فاصله همچنین تغییر رنگ از تگهای زیر استفاده میکنم . شما می توانید رنگ ، نوع فونت و نحوه قرارگیری لینک در منو را نیز تغییر بدهید .

a {
    width: 60px;
    background-color: #97bf21;
    float:left;
    font-size:20px;
    color: #ffffff;
    font-weight: bold;
    padding: 4px;
    text-align: center;
}

 

4 طراحی منو افقی

 

آخرین بروز رسانیجمعه, 08 آبان 1394 05:38

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #7 saba 1397-03-19 16:36
وایی عالی بود واقعا ممنونم،مشکلم فقط display بود☺
خسته نبااشید
نقل قول کردن
+1 #6 حامــــــد 1396-11-19 17:17
خسته نباشید ممنون از سایتتون واقعا بطور نهضتی و گام ب گام توضیح دادین که حتی کسی از HTMLچیزی ندونه باز یاد میگیره
نقل قول کردن
+1 #5 زکیه 1396-10-09 15:19
ممنون عالی توضیح دادین
نقل قول کردن
+1 #4 صادق 1396-08-10 16:56
واقعا ممنون خیلی آسون تونستم انجامش بدم
نقل قول کردن
+1 #3 فاطمه 1396-03-10 13:06
سلام... خسته نباشید...توضیحت ون عالی بود خیلی ممنون.
نقل قول کردن
+1 #2 محمد 1394-08-08 05:46
به نقل از حمید اشرفی:
سلام شما تفاوت منوی عمودی با افقی رو نمی دونید. درسته این مطلبتون خیلی کاربردی هست ولی اشتباه عنوان رو زدید

امثال شما چقدر بی ظرفیت هستند که این همه مطالب آموزشی رایگان را نمی بینید و تشکر نمی کنید . بعد برای یک مشکل تایپی که افقی را عمودی نوشتند ایشون ، تیکت ارسال می کنید و می گید فرقشو نمیدونه

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

وقتی تیکیت می خواهید ارسال کنید قبلش نیمه پر لیوان را ببینید نه یک درصد خالی اون را که مربوط به ویرایش میشه

جاداره اینجا از آقای صبح خیز و همکاراسون بابت مطالبی که در سایت قرار میدن تشکر کنم و بابت این آقایی که تیکت گذاشته معذرت خواهی
نقل قول کردن
-6 #1 حمید اشرفی 1394-08-07 22:25
سلام شما تفاوت منوی عمودی با افقی رو نمی دونید. درسته این مطلبتون خیلی کاربردی هست ولی اشتباه عنوان رو زدید
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»