CSS Rollover

یکی از افکتهای معمول در طراحی وب ایجاد دکمه ها و کلیدهایی است که در حالتهای مختلف تغییر میکنند.
به عنوان مثال در زمان قرار گرقتن ماوس بر روی آنها (Hover) ، کلیک ماوس و حالت فعال بودن لینک تغییر شکل یا تغییر رنگ میدهند. به این کلیدها اصطلاحا Rollover گفته میشود.
روشهای زیاد و متفاوتی برای ایجاد چنین اثر و افکتی وجود دارد ، مانند استفاده از فلش ، استفاده از جاوا و … و استفاده از CSS !
در این مقاله به شما نحوه ساخت یک Rollover ساده با CSS را آموزش میدهیم. در اینجا ما فرض میکنیم که میخواهیم یک منوی افقی برای سایت خود بسازیم .
ابتدا باید به فکر گرافیک و شکل ظاهری و طرز ایجاد عکسها باشیم. شکل ظاهری کلید به شما و طرح سایر بخشهای سایت بستگی دارد در این مورد فقط توصیه میکنم که کار گرافیکی خود را با زیرکی و ظرافت نامحسوسی در قالب کادرهای یک قد مستطیلی جای دهید و با یک منحنی ۵ پیکسلی که از کادر بیرون زده کار خود را سخت و پیچیده نکنید
برای افکت قرار گرفتن ماوس ، کلیک و حالت فعال بودن لینک معمولا از تغییر رنگ و حداکثر از تغییر حالت متن از معمولی به درشت استفاده میشود و در این مورد هم بستگی به سلیقه شما دارد.
طرح گرافیکی مورد نظر من به این صورت است :

یک نوار ۳۰ پیکسلی ساده با دو خط ۲ پیکسلی در بالا و پایین و یک طیف زمینه کم رنگ خاکستری. تغییرات برای حالتهای مختلف در رنگ نوشته ها و نوار ۲ پیکسلی پایینی اعمال میشود و در نهایت برای حالت معمولی ، Hover یا قرار گرفتن ماوس و حالت Active یا لینک فعال این شکلها را داریم.
مهمترین نکته این بخش نحوه خروجی گرفتن و ایجاد فایل تصویری برای استفاده در وب است. شاید ساده ترین راه ایجاد یک تصویر از هر یک از حالتهای کلید باشد که در این صورت بری هر کلید سه تصویر داریم که این تعدد تصاویر مشکلاتی چون حجم بیشتر و تاخیر در بارگذاری کامل صفحه ایجاد میکنند و نیز مدیریت و نگه داری طرح وقت گیر میشود و مهمترین اشکال و یکی از نکته های اصلی این آموزش تاخیر در بارگذاری عکسها در حالتهایHover و Active است به این معنی که در حالت عادی اگر عکسها به صورت جداگانه قرار گرفته باشد تنها در صورت وقوع رویداد (Event) خاص Hover یا Active این عکسها بارگذاری میشوند که از زیبایی و یکپارچگی طراحی میکاهد.
راه حل و به نوعی بهترین راه چیست ؟!
بهترین راه استفاده از یک فایل برای هر سه حالت است . بله ! با این کار از تعداد تصاویر کاسته شده و تمام حالات به طور همزمان و یکجا بارگذاری میشوند. اما چطور ؟!
بهترین راه قرار دادن و سه حالت معمولی ، Hover و Active به طور ستونی است به شکلی که حالت اصلی در پایین ، حالت Hover در وسط و حالت Active در بالا قرار گیرد. به این شکل :
حال ما به ازای هر کلید یک تصویر داریم که ارتفاعی سه برابر ارتفاع نوار یا منوی ما دارد.
اکنون به سراغ کدنویسی و بخش اصلی کار میرویم.
قبل از توضیح به شما پیشنهاد میکنم مجموعه آموزشهای MaxDesign در مورد لیستها را مطالعه کنید.
برای ایجاد یک منوی افقی از یک لیست نامرتب (UnorderedList) استفاده میکنیم و مطلقا درون صفحه از عکس (تگ img) استفاده نمیکنیم !
ابتدا کدهای صفحه را مینویسیم :

  <ul id="nav">
     <li><a href="/home">خانه</a></li>
     <li><a href="/hosting/">میزبانی وب</a></li>
     <li><a href="/support/">پشتیبانی</a></li>
     <li><a href="/web-develop/">توسعه وب</a></li>
     <li><a href="/web-design/">طراحی وب</a></li>
     <li><a href="/about-us/">درباره ما</a></li>
  </ul>

در ادامه به سراغ شیوه نامه میرویم و به این لیست نامرتبمان شکل میدهیم.
اول باید لیست عمودی خود را به صورت افقی نمایش دهیم پس یکراست به سراغ تگ UL رفته و آنرا با نام topmenu هدف قرار میدهیم. کمی ریزه کاری به خرج میدهیم، مکان و موقعیت لیست نامرتب خود را مشخص میکنیم و سپس یک پس زمینه به آن اختصاص میدهیم. این پس زمینه میله ای به اندازه یک پیکسل و به ارتفاع منوی ما (در اینجا ۳۰ پیکسل) میباشد که به طور افقی در طول لیست تکرار میشود.
توصیه میکنم با تنظیم padding بر روی صفر مقادیر Margin راست و چپ روی auto منوی خود را در وسط بخش مورد نظر قرار دهید و همچنین کنترل li ها را به خود آنها واگذار کنیم !
برای نمایش افقی کافیست مقدار display را برای liها روی inline قرار دهیم. که در نهایت کدهای اولیه به این شکل خواهد بود :

ul#topmenu  {
	height: 30px;
	margin: 0 auto;
	padding: 0; 	list-style-type: none;
	text-align: center;
	background-image: url(images/tp_bg.gif);
 	background-repeat: repeat-x;
 	background-position: center;
}	 
ul#topmenu li  {
	margin: 0;
	padding: 0;
	display: inline;
}

و حالا نوبت به بخشهای اصلی یعنی لینکها میرسد. برای اینکه لینکها تمامی سطح مورد نظر ما یعنی سطح کلید را پوشش دهد باید به یک عنصر بلوکی یا Block Level تبدیل شود. که در اینجا دقیقا بر عکس li باید مقدار display روی block قرار داده شود. همانطوریکه میدانید عناصر بلوکی در حالت عادی در زیر هم قرار میگرند. در نتیجه برای اینکه لینکها در کنار هم و به صورت افقی قرار بگیرند از خاصیت float استفاده میکنیم و مقدار float را برای لینک روی right قرار میدهیم.
حالا ما یک لیست افقی برای کنترل بهینه عناصر و یکسری لینک بلوکی در کنار هم داریم که میتوانیم به این لینکها مقادیر عرض و ارتفاع نسبت دهیم.
نکته باقیمانده متنی است که به عنوان لینک در صفحه قرار دارد که در حالت عادی این متن روی عکس با رنگ پس زمینه عنصر لینک قرار میگیرد. برای اینکه از شر این حروف و کلمات هم خلاص شویم با یک ترفند آنها را به بیرون صفحه میفرستیم و از دید بینندگان مخفی میکنیم ! (با استفاده از text-indent)
در واقع این کار یک حرکت حرفه ای برای افزایش دسترس پذیری (Accessibility) و بهینه سازی برای موتورهای جستجو (SEO) نیز میباشد و همچنین گامی موثر برای پشتیبانی از مرورگرهای قدیمی. چرا که اگر به هر علتی مانند قدیمی بودن مرورگر ، عدم پشتیبانی از CSS یا … فایل CSS اجرا نشود این متنها به درستی و در جای خود نمایش داده میشوند و همچنین در مورد Spiderها ی موتورهای جستجو که فقط با متن و ساختار پایه ای صفحات سر و کار دارند و همچنین برای دستگاههای Screen Reader که افراد نابینا استفاده میکنند موثر است. ( یک تیر و چند نشان ! )
مورد آخر برای لینک تعیین موقعیت عکس پس زمینه با ویژگی background-position است که در حالت معمولی باید در جای اصلی خود یعنی به فاصله ۰ پیکسل از پایین لینک باشد و همواره تصویر در وسط کادر لینک قرار گیرد ، هر چند که ما ابعاد لینک را دقیقا به اندازه تصویر انتخاب میکنیم.
حال ما کدی شبیه به این برای لینکها داریم :

ul#nav li a  {
 	display:block;
 	text-indent:-9000px;
	text-decoration:none;
	background-position: center 0px;
	height: 30px;
 	float: right;
}

اکنون باید به فکر حالتهای دیگر یعنی Hover و Active باشیم. برای حالتهای Hover و Active تنها کافیست محل قرار گیری عکس پس زمینه خود را به اندازه لازم (در اینجا هر با ۳۰ پیکسل) به پایین حرکت دهیم. پس داریم :

ul#nav li a:hover  {
  	text-decoration:none;
	background-position: center -30px;
} 
ul#nav li a:active  {
  	text-decoration:none;
 	background-position: center -60px;
}

حال باید به هر لینک عکس پس زمینه مربوطه را اختصاص دهیم. برای اینکار به li مربوط به هر لینک نام لینک را به عنوان ID اختصاص میدهیم :

  <ul id="nav">
     <li id="home"><a href="/home">خانه</a></li>
     <li id="host"><a href="/hosting/">میزبانی وب</a></li>
     <li id="supp"><a href="/support/">پشتیبانی</a></li>
     <li id="webdev"><a href="/web-develop/">توسعه وب</a></li>
     <li id="webdes"><a href="/web-design/">طراحی وب</a></li>
     <li id="about"><a href="/about-us/">درباره ما</a></li>
  </ul>

و در CSS به این شکل از این IDها استفاده میکنیم و عکس پس زمینه را برای هر لینک مشخص میکنیم و همچنین عرض تصویر پس زمینه هر لینک را به عنوان خاصیت width مشخص میکنیم :

ul#nav li#home a  {
 	background-image: url(images/home.gif);
 	width: 52px; 
} 
ul#nav li#host a  {
 	background-image: url(images/host.gif);
 	width: 98px; 
} 
ul#nav li#supp a  {
 	background-image: url(images/supp.gif);
	width: 83px; 
} 
ul#nav li#webdev a  {
 	background-image: url(images/webdev.gif);
 	width: 92px; 
} 
ul#nav li#webdes a  {
 	background-image: url(images/webdes.gif);
 	width: 90px; 
} 
ul#nav li#about a  {
 	background-image: url(images/about.gif);
 	width: 76px; 
}

الان ما یک منوی افقی با افکت Rollover با حداقل کدنویسی و حجم و حداکثر بازده و سازگاری داریم !

نکته اول : از آنجاییکه حالت active عموما در مرورگرهای مختلف حالتی ناپایدار و سطحی است توصیه میکنم این حالت را با استفاده از یک برنامه سمت سرور (Server Side) کنترل کنید و مثلا با استفاده از یک ساختار شرطی در برنامه مدیریت محتوای خود به لینک فعال خود کلاس active را نسبت دهید . به این شکل :

...
     <li id="home" class="active"><a href="/home">خانه</a></li>
...

و برای CSS داریم :

ul#nav li.active a  {
  	text-decoration: none;
	background-position: center -60px;
}

نکته دوم : شاید مایل باشید حالت بازدید شده یا Visited را نیز کنترل کرده و شکل دهید که با توجه به توضیحات بالا کار سختی نیست ! اما برای منوهای شبیه آنچه ساختیم توصیه نمیشود.

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

یک نمونه منوی افقی را میتوانید در این آدرس مشاهده کنید : DigitalDreamers.Biz
و یک نمونه از منوی عمودی را در اینجا : OrderedList.Com