مرحباا
هذه تسمى تأثير hover أو التأرجح على الأزار و القوائم
وسهل جدا ان تصعنها على اى قائمة او زر بواسطة الأمر التالي _ مثال :
كود HTML:
a:hover {
color: #FFF;
background-color: #005F9F;
}
وذلك بعد الإنتهاء من ضبط القائمة نفسها بشكل يناسب موقعك ..
والاخ MohDesign وضع لك شرح لطريقة عمل هذا التأثير ولكن بطريقة مختلفة أكثر من تأثير في صورة واحده ـ ولكن ربما لا تفيدك كثيراً إن كنت تبحث عن قائمة بنفس الشبه بالموقع اللى وضعته ، فهي معمولة بخلفية تدرج واحد فقط تتغير عن المرور بلون آخر ...
ولعمل مثلها بالضبط
القائمة ul li :
كود:
<ul>
<li><a href="index.html">الرئيسية</a></li>
<li><a href="gallery.html">معرض الصور</a></li>
<li><a href="products.html">قائمة المنتجات</a></li>
<li><a href="about.html">عن الموقع</a></li>
</ul>
css :
كود HTML:
ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
border-bottom: 1px solid #5D76EF;
}
ul a {
text-decoration: none;
display: block;
width: 138px;
padding: 5px;
border-top: 1px solid #5D76EF;
border-right: 1px solid #5D76EF;
border-bottom: 0px solid #5D76EF;
border-left: 1px solid #5D76EF;
}
ul a:link, ul a:visited {
color: #0E2E6B;
background-color: #DDE8FC;
background-image: url(button-b.gif);
background-repeat: repeat-x;
background-position: 0px top;
}
ul a:hover {
color: #FFF;
background-color: #005F9F;
background-image: none;
}
خلفية التدرج اللونى تم وضعها في ( ul a:link, ul a:visited ) والإستغناء عنها في ( ul a:hover )
نوع الخط يمكن ان تغيرة من الجسم body او تضيفة على العنصر a
لو حبيت تزود العرض او تقلله من العنصر ul كما في المثال العرض 150 اما في الوصلات فتم طرح منه قيمة padding يمين ويسار 150 - 10 = 140 وكذلك طرح قيمة الحدود 2 بكسل - 140 = 138 بكسل :looking: ودا كله علشان تظهر القائمة بنفس الشكل على المتصفح التعيس Internet Explorer
والنتيجة //
تحيتي ،،