TehranSat
12-21-07, 12:44 PM
حتما تا به حال در حین گشت زنی در اینترنت، با منوهایی برخورد کرده اید که هنگامی که ماوس بر روی آنها قرار می گیرد، رنگ آنها عوض می شود. به این حالت اصطلاحا Rollover می گویند. این کار هم به وسیله جاوااسکریپت و هم به وسیله CSS انجام می شود. اگر بخواهید به وسیله جاوااسکریپت این کار را انجام دهید، کمی وقتتان گرفته خواهد شد. اما به وسیله CSS، انجام این کار مثل آب خوردن است!
در زیر کد HTML نهایی (و نه کد CSS) را مشاهده می کنید.
کد:
<div id="navigation">
<a href="#">Main Page</a>
<a href="#">Articles</a>
<a href="#">Tutorials</a>
<a href="#">Download</a>
<a href="#">Contact Me</a>
</div>
این کد، تنها شما را به مقصود نهایی نمی رساند. مرحله اصلی در نوشتن کد CSS آن است. کد CSS را در زیر مشاهده می کنید (فراموش نکنید که برای استفاده از کد زیر، می بایست آن را در بین دو تگ </style> و <style type="text/css"> و در قسمت Head صفحه (یعنی بین تگهای </head> و <head>) قرار دهید. همچنین می توانید از یک فایل CSS خارجی نیز استفاده کنید.)
کد: #navigation {
text-align: center;
font-family: tahoma;
font-size: 9pt;
}
#navigation a {
display: block;
padding: 5;
color: #ffffff;
width: 200px;
text-decoration: none;
background-color: #006699;
border: 1px solid #003366;
margin-top: 2;
margin-bottom: 2;
}
#navigation a:hover {
color: #000000;
background-color: #99cc00;
border: 1px solid #003366;
}
همچنین اگر می خواهید منو را به صورت افقی (Horizontal) داشته باشید، می توانید خاصیت display: block را حذف کنید. این خاصیت سبب می شود تا المنتهای <a> به صورت Block-Level و نه Inline ظاهر شوند. بقیه کد هم که تقریبا برای CSS کارها خوانا می باشد.
در زیر کد HTML نهایی (و نه کد CSS) را مشاهده می کنید.
کد:
<div id="navigation">
<a href="#">Main Page</a>
<a href="#">Articles</a>
<a href="#">Tutorials</a>
<a href="#">Download</a>
<a href="#">Contact Me</a>
</div>
این کد، تنها شما را به مقصود نهایی نمی رساند. مرحله اصلی در نوشتن کد CSS آن است. کد CSS را در زیر مشاهده می کنید (فراموش نکنید که برای استفاده از کد زیر، می بایست آن را در بین دو تگ </style> و <style type="text/css"> و در قسمت Head صفحه (یعنی بین تگهای </head> و <head>) قرار دهید. همچنین می توانید از یک فایل CSS خارجی نیز استفاده کنید.)
کد: #navigation {
text-align: center;
font-family: tahoma;
font-size: 9pt;
}
#navigation a {
display: block;
padding: 5;
color: #ffffff;
width: 200px;
text-decoration: none;
background-color: #006699;
border: 1px solid #003366;
margin-top: 2;
margin-bottom: 2;
}
#navigation a:hover {
color: #000000;
background-color: #99cc00;
border: 1px solid #003366;
}
همچنین اگر می خواهید منو را به صورت افقی (Horizontal) داشته باشید، می توانید خاصیت display: block را حذف کنید. این خاصیت سبب می شود تا المنتهای <a> به صورت Block-Level و نه Inline ظاهر شوند. بقیه کد هم که تقریبا برای CSS کارها خوانا می باشد.