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

tutorial-to-create-a-simple-horizontal-css-menu

همیشه منوها یکی از مهم‌ترین قسمت‌های یک وبسایت به شمار می‌روند. به همین جهت با صرف اندکی زمان می‌توانیم در عین سادگی منوهای زیبایی را خلق کنیم. این بار هم قصد دارم در این آموزش با استفاده از CSS یک منوی افقی جالب را ایجاد کنم.

 

[demo link=”http://bit.ly/wd_ttashcm”]منوی افقی ساده با CSS[/demo]

 

ابتدا کد 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>
<li><a href="#">درباره وب‌دیتا</a></li>
</ul>

حالا به سراغ مهم‌ترین بخش کار می‌رویم؛ یعنی ایجاد استایل دلخواه برای منوی ایجاد شده.


#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 می‌پردازم. در سطر اول تا سوم چینش صفحه را راست به چپ قرار داده‌ایم.
کد سطر پنجم تا هفتم هم منو را به صورت افقی مرتب می‌کند. سطر نهم تا بیستم حالت معمول منو را شکل می‌دهد که کاملاً به نحوه‌ی سلیقه‌ی شما برمی‌گردد و شما می‌توانید هر طور که تمایل دارید منوی خود را ایجاد کنید. سطرهای بیست و دوم تا بیست و هشتم نیز مربوط به ظاهری است که منو هنگامی است که نشانگر موس بر روی آن می‌رود، پیدا می‌کند.

٪ نظرات