آموزش ساخت منو Horizontal List

ویژه آموزش ساخت منو Horizontal List

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

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

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

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

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

 

<ul id="menu">
  <li><a href="/html/default.asp">HTML</a></li>
  <li><a href="/css/default.asp">CSS</a></li>
  <li><a href="/js/default.asp">JavaScript</a></li>
  <li><a href="/php/default.asp">PHP</a></li>
</ul> 

 

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

 

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

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

 

ul#menu {
    padding: 0;
}
ul#menu li {
    display: inline;
}

 

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

 

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

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
    background-color: orange;
}

کد کلی باید به شکل زیر باشد . کد را ذخیره کنید و در مرورگر مشاهده کنید .

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}
ul#menu li {
    display: inline;
}
ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
    background-color: orange;
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="/html/default.asp">HTML</a></li>
  <li><a href="/css/default.asp">CSS</a></li>
  <li><a href="/js/default.asp">JavaScript</a></li>
  <li><a href="/php/default.asp">PHP</a></li>
</ul>  
</body>
</html>

 

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

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:04

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #1 احسان اسکندری 1394-09-26 20:32
بسيار عالی بود ، ممنون بابت به اشتراک گذاری
نقل قول کردن

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

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا