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

امروزه در سایت وب یار آموزش ساخت یک منوی افقی ساده را قرار داده ایم که برای کسانی که تازه برنامه نویسی تحت وب را شروع کرده اند بسیار مفید می باشد.

ابتدا کد HTML منو را ایجاد می‌کنیم. در اینجا ما برای منوی مورد نظرمان id را برابر با nav قرار داده ایم و در کدنویسی CSS استایل دلخواهمان را از این طریق بر روی منو اعمال می‌کنیم.

<ul id="nav"> <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>

حالا به سراغ ایجاد استایل های CSS می رویم.

#nav{ direction: rtl; } #nav li{ display: inline; } #nav li a{ font-family: tahoma; font-size: 12px; font-weight: bold; padding: 10px; background-color: #333; color: #ffffff; border-bottom: 2px; border-bottom-color: #9B1C26; border-bottom-style: solid; text-decoration: none; } #nav li a:hover{ background-color: #9B1C26; padding-bottom: 12px; border-bottom: 2px; border-bottom-color: #000; border-bottom-style: solid; }

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

دموی منوی ساخته شده در این آموزش