ساخت منوی عمودی بوسیله CSS

یکی از مهمترین قسمت های یک سایت ( و وبلاگ ) ستون کناری اون هست. در این مطلب قصد داریم آموزش کوتاهی داشته باشیم در رابطه با یکی ۲ تا ترفند در رابطه با طراحی این ستون با استفاده از زبان CSS.

من برای نوشتن این مطلب از کارهای این آقا استفاده کردم پس می تونید به این آدرس برید و نمونه کارها دیدن کنید.
مزیت کار در این هست که هر گزینه یک تصویر داره و وقتی نشانگر موس روی گزینه مورد نظر می ره تصویر دیگری به نمایش در می یاد.

ارزش کار زمانی مشخص می شه که کد استفاده شده بسیار تمیز و کوتاه باشه و از جاوا اسکریپت هم استفاده نشده باشه و از همه جالبتر توی اینترنت اکسپلورر ۶ هم بدون مشکل به نمایش در بیاد.

مسلما راه های مختلفی برای انجام این کار وجود داره ولی این راه می تونه یکی از بهترین گزینه ها باشه. پس با ما باشید در مورد آنالیز کد ها …

تمام کد های بکار رفته در منوهایی که در این صفحه مشاهده می کنید تقریبا به یک صورت می باشد. ما برای آنالیز کد Tab Menu 2 رو انتخاب کردیم.

منوی ما در داخل یک تگ div با شناسه menu2 قرار گرفته. در ابتدا ما یک استایل کلی به این تگ می دهیم. استایل داده شده مشابه زیر می باشد:

#menu2 {
border: 1px solid #D8D5D1;
width: 200px;
}

در خط اول ما یک خط به دور منوی مورد نظرمون کشیدیم با رنگی که به تصویر به کار رفته بخوره. در خط دوم نیز پهنای مشخص ۲۰۰ پیکسل رو تعیین کردیم. توجه داشته باشید که پهنای داده شده در این قسمت باید هم اندازه با تصویر بکار رفته در این طرح باشه.
همچنین برای فاصله از اطراف هم می تونید از دستور margin استفاده کنید.

حالا به قسمت بعد می رویم. این منو نیز همانند دیگر منو ها در بین تگ های ul قرار گرفته. در اینجا ما باید یک استایل کلی به این تگ بدیم:

ul {
list-style-type:none;
margin:0;
padding:0;
}

در حقیقت ۳ خط کد استفاده شده در قسمت بالا پیش فرض مرورگرها رو صفر و از بین می بره. برای از بین نخوردن طرح باید این دستورات اجرا بشه. با این کد دستورات نوشته شده به تمام تگ های ul اعمال می شه. اگه شما اینو دوست ندارید می تونید به جای استفاده از ul برای استایل دادن از عبارت div#menu2 ul استفاده کنید که دستورات به کار رفته فقط برای این قسمت اعمال بشه.

طبق اصول کار گزینه ها باید بین تگ li قرار بگیرند. نیازی با دادن استایل برای li نیست پس یک مرحله داخل تر می رویم. جایی که لینک ها مشخص می شه. اصلی ترین قسمت کار همین قسمت یعنی استایل دادن به تگ a هست.
در این قسمت ما باید ۳ استایل به این تگ بدیم. استایل اول به خود تگ a:

#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

3 خط اول مربوط به یک هک در CSS برای رفع مشکل مرورگر اینترنت اکسپلورر نسخه ۵/۵ هست.
در خط چهارم ما یک ارتفاع ۲۴ پیکسلی دادیم. در مورد اینکه چرا این ارتفاع انتخاب شده در ادامه توضیح می دهیم. در خط آخر نیز ما تعیین کردیم که لینک ها در این قسمت خط زیرشون حذف بشه.
در ادامه ما به تگ a در زمانی که بصورت لینک است و زمانی که اون لینک بصورت بازدید شده است استایل می دهیم:

#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 30px;
}

در خط اول ما به لینک ها رنگ مورد نظر رو دادیم. در خط بعدی با دستور display: block تگ a موجود در این قسمت رو از حالت inline به block تغییر می دهیم. با استفاده از این کار عمل لینک به کل قسمت اعمال می شه.
در خط بعدی ما یک تصویر رو برای پشت زمینه این قسمت قرار دادیم. تصویر ما ۲۰۰ پیکسل عرض و ۶۴ پیکسل طول داره.
در آخرین خط نیز ما با دستور padding ما ۸ پیکسل از بالا به ارتقاع تگ a اضافه کردیم.
اگر توجه داشته باشید ما در قسمت قبل نیز یک ارتفاع ۲۴ پیکسلی داده بودیم که با این ۸ پیکسل مجموعا ۳۲ پیکسل می شه.
بدین صورت و دادن ارتفاع مشخص تنها ۳۲ پیکسل اول تصویر به نمایش در میاد و این یعنی ما دقیقا نصفه اول تصویر رو می بینیم.

در آخرین مرحله هم باید یک استایل دیگه به تگ a زمانی که نشانگر موس روش می ره تعریف بشه:

#menu2 li a:hover {
color: #3688BA;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

خط اول و سوم تقریبا کارشون رو توضیح دادیم در قسمت قبل. تنها تغییر مهم در این قسمت خط دوم هست. ما مثل قسمت قبل همون تصویر رو به عنوان پس زمینه به این قسمت دادیم و تنها با اضافه کردن عبارت ۰ -۳۲ طوری نمایش تصویر رو تنظیم کردیم که از ارتفاع -۳۲ پیکسلی به نمایش دربیاد و این یعنی نمایش قسمت دوم تصویر.

همانطور که ملاحظه کردید نحوه کار بسیار ساده و راحت هست.
این یکی از ترفند های بسیار جالب CSS هست که در قسمت های دیگه هم می شه ازش استفاده های جالبی کرد.
× توجه داشته باشید که نسخه ۶ اینترنت اکسپلورر دستور :hover را فقط به تگ a قبول می کنه.
× در کل این دستور بعضی مواقع با اینترنت اکسپلورر ۶ با مشکل مواجه می شه بنابراین حتما بعد از انجام این مراحل حتما کارتون رو در این مرورگر تست کنید.

برچسب ها: css، design، menu، طراحی وب

این نوشته در تاریخ پنجشنبه, آبان ۱۷م, ۱۳۸۶ در ساعت ۸:۰۴ ب.ظ با موضوع طراحی وب ارسال شده است. شما می توانید پاسخ های این نوشته را با RSS 2.0 دنبال کنید. شما می توانید نظرتان را بنویسید، ویا از سایت خود یک بازتاب بفرستید.