ساخت یک منوی متحرک جذاب فقط با CSS !

مقاله‌ی زیر ترجمه‌ی آزاد (با دستبرد) از مطلب زیر است:
Create a Fun Animated Navigation Menu With Pure CSS

در حال حاضر JQuery یکی از بهترین و کارامد ترین روش‌ها برای ایجاد انیمیشن (متحرک سازی) صفحات وب می‌‎باشد. جاوا اسکریپت کار خود را به خوبی انجام می‌دهد. مقاله‌ی زیر هم به این معنا نیست که از جاوا اسکریپت استفاده نکنیم. بلکه فقط یک راه جدید است که فقط با CSS 3 پیاده سازی شده است.

CSS3 با امکانات جدیدی که با خود به ارمغان آورده است، می‌تواند ساخت انیمشن‌های تحت وب را متحول کند زیرا دارای ویژگی های بی‌نظری می باشد که بدون نیاز به هیچونه اسکریپت نویسی کار های لازم را انجام می‌دهند.

در مقاله‌ی زیر قصد داریم یک روش جالب برای ساخت منوی متحرک را توضیح دهیم که از ویژگی‌های @font-face و transform ها و transition ها در CSS استفاده می‌کند.

توضیح کلی

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

در هر حال، حتی اگر شما نخواهید که منوی آنچنانی داشته باشید، بازهم داشتم اندگی سلیقه و ساختن یک منوی متحرک برای وبلاگتان می‌تواند جالب باشد.

برای دیدن یک پیش‌نمایش از آن‌چه خواهیم ساخت، اینجا کلیک کنید.

سورس HTML

در زیر سورس اصلی صفحه را مشاهده می‌کنید. توجه کنید که برای سازگاری بیشتر IE از HTML 5 از کتابخانه‌ی HTML5 shiv به صورت زیر استفاده کرده ایم:

اکنون برای ایجاد منوی اصلی از یک تگ

(لیست غیر شمارشی) استفاده می کنیم و هر یک از عنصر منو را در یک
• و به صورت یک لینک قرار می‌دهیم:

  
  	
  Home
  	
  About
  	
  Work
  	
  Contact
  

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

  استایل‌های پایه

  اکنون یک استایل پایه برای صفحه مان درست می کنیم و خواص پیش فرض مروگر را reset می کنیم تا در اکثر مرورگر ها صفحه به یک صورت نشان داده شود:

  * {
     padding: 0;
     margin: 0;
  }
  body {
  background: #f4f1e5;
  color: #544738;
  font-family: helvetica, sans-serif;
  }

  کار بعدی ما این است که لیست غیر شمارشی

  را که به طور پیش‌فرض عمودی است، به صورت افقی در بیاوریم و یک افکت hover به آن اضافه کنیم:

  ul li {
  float: left;
  list-style: none;
  margin-right: 1em; 
  }
  
  li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 12px;
  }
  li a:hover {
  color: #7eb9be;
  }

  آن‌چه که در کد بالا می‌بینید، چیز جدیدی نیست و شما هم قطعا تا بحال بارها آن را دیده اید. توضیح کلی کار به این صورت است:
  با شناور کردن آیتم های لیست به یک سمت، سبب می شویم که عناصر لیست در یک خط قرار گیرند. (فراموش نکنید که اگر محتوای بیشتری را بعد از لیست قرار می دهید، خاصیت شناور را با دستور clear خنثی کنید تا محتویات بعدی در زیر منو قرار گیرد و به سمت بالا نرود!)
  علاوه بر این، ما اندکی هم فاصله (margin) به عناسر داده ایم تا به همدیگر نچسبند و همچنین رنگ و سایر خواص آن ها و تغییر رنگ در افکت hover را ست کرده ایم.

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

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

  

  سفارش سازی فونت

  از آن جایی که هدف ما فقط سرگرمی است، تصمیم گرفتم که از یک فونت غیر استاندارد و بامزه استفاده کنم. شیوه‌ی مورد علاقه‌ی من برای استفاده از فونت های سفارشی آنلاین این است که دستور @font-face و به روش Bulletproof @font-face syntax ابداع آقای Paul Irish استفاده کنم.

  به این ترتیب دیگر لازم نیست که ما نگران سازگاری و در دسترس بودن سرویس‌های شخص ثالت (سرویس های آنلاین) باشیم و به راحتی فونت مورد نظر خود را انتخاب می کنیم و آن را در صفحه‌ی وب با استفاده از CSS وارد می کنیم

  Font Squirrel

  در صورتی که مبتدی باشید، استفاده از دستور @font-face راه حل ساده ای به شمار نمی رود.
  ابتدا شما باید یک فونت مناسب و قابل استفاده را پیدا کنید که قابل استفاده باشد (که این خود بزرگترین دردسر است) و سپس باید نسخه‌های متعدد از همان فونت را در فرمت‌های مختلف پیدا کنید و آن ها را به فرمت مناسب کنار هم در صفحه قرار دهید (که این خود دردسر بزرگی است).

  خوشبختانه سایت Font Squirrel همه‌ی کارهای لازم را از پیش انجام داده است و با بسته‌های @font-face اس کار را برای ما راحت ساخته است.

  خیلی ساده در سایت جستجو کنید و فنت مورد نظرتان را بیابید و سپس دکمه‌ی دانلود را کلیک کنید!
  من تصمیم گرفتم که از فونت Kulminoituva در زیر بخش Novelty استفاده کنم. این یک فونت بامزه دارای حروف جبعه‌ای سه بعدی می باشد که من در حالت عادی هرگز از این چنین فونتی استفاده نمی کردم و لذا برای این پروژه ایده آل می باشد!

  

  پس از این که فونت را دانلود کردید، آن‌ها را در دایرکتوری ریشه کپی کنید و کد زیر را نیز در قسمت CSS اضافه کنید تا فونت در صفحه وارد شود:

  @font-face {
  font-family: ‘KulminoituvaRegular’;
  src: url(‘kulminoituva-webfont.eot’);
  src: local(’‚ò∫’), url(‘kulminoituva-webfont.woff’) format(‘woff’), url(‘kulminoituva-webfont.ttf’) format(’truetype’), url(‘kulminoituva-webfont.svg#webfontHNAi9IoX’) format(‘svg’);
  font-weight: normal;
  font-style: normal;
  }

  کد فوق سبب می‌شود که فونتی به نام KulminoituvaRegular در صفحه وارد شود (اگر بر روی سیستم بازدید کننده موجود نباشد، از سایت توسط مرورگر دانلود خواهد شد)

  اکنون می‌توانیم از این فونت جدید به طریقه‌ی معمولی در کد‌های CSS مان استفاده کنیم. کد CSS حاصل به صورت زیر خواهد بود:

  ul li {
  float: left;
  list-style: none;
  margin-right: 1em;
  font-family: ‘KulminoituvaRegular’, helvetica, sans-serif;
  font-size: 25px;
  padding: 12px; 
  }
  
  li a {
  color: #544738;
  text-decoration: none;
  float: left;
  }
  li a:hover {
  color: #7eb9be;
  }

  منوی ما به شکل زیر در خواهد آمد که خیلی جالب تر است:

  

  متحرک سازی منو

  در حال حاضر بهترین روش برای ایجاد انیمیشن‌ها به کمک CSS این است که از یک روش دو مرحله ای استفاده کنیم که شامل Trasform ها و Transition ها می‌شود.