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

نوشته های مشابه

شیوه نامه سومین دوره مسابقات کشوری کدنویسی

28 بهمن 1399

پاسخنامه سوالات طراحی وبMFT

03 مهر 1392

اسلاید آموزشی HTML،CSS،Javascript

05 شهریور 1392

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

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

آموزش ساخت منوی عمودی باز شو با CSS

مشاهده دمو منوی عمودی

منبع : وب‌دیتا