Menü öğelerinin üzerine geldiğinizde, opacity’si düşürülerek, öğelere şeffaflık veren kodlar aşağıdadır.
Faydalı olması dileğiyle.
<head></head> tagleri arasına jquery kütüphanesini çağırmak için gereken kodu yazıyoruz:
1
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
|
head tagleri arasında <style></style> tagleri içine yazmanız gereken Css kodları :
1
2
3
4
5
6
|
#menu a { text-decoration:none; color:#039; padding-left:10px; }
|
<body></body> tagleri arasına yazmamız gereken kodlar ise aşağıdadır.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div id="menu">
<a href="http://www.dogusefe.com">Anasayfa</a>
<a href="http://webtasarim.dogusefe.com/web-tasarim-dersleri">Web Tasarım Dersleri</a>
<a href="#">Resimler</a>
<a href="#">İletişim</a>
</div>
<script>
$("#menu a").hover(function()
{
$(this).animate({
"opacity": "0.3"
}, 100); },
function()
{
$(this).animate({
"opacity": "1"
}, 100);
});
</script>
|
