Üzerine Gelindiğinde Saydamlaşan Menü Yapmak (Jquery’nin Opacity Yöntemi ile)
Fare imleci üzerine gelindiği zaman saydamlaşan, imleç kalktığında ise tekrar eski haline dönen bir menü oluştaracağız. Jquery’nin “animation” methodunu ve CSS’nin opacity (saydamlık) özelliğini kullanarak bu işlemi en kolay yoldan gerçekleştirmeye çalışacağız.
İşe menümüzü oluşturmakla başlıyoruz.
1.xhtml ile menümüzü oluşturuyoruz
<html> <head><title>Jquery ile saydamlaşan menü</title></head> <body> <div id="menu"> <ul> <li><a href="#"> Anasayfa </a></li> <li><a href="#"> JavaScript </a></li> <li><a href="#"> Visual Basic </a></li> <li><a href="#"> C sharp </a></li> </ul> </div> </body> </html>
2. Css ile menümüzü dizayn ediyoruz
<style type="text/css">
#menu ul { list-style:none; text-align:center }
#menu ul li { float:left; width:100px; background-color:#BBBDE3; border-right:1px solid #FFF; }
#menu ul li a { text-decoration:none; color:#FFF }
</style>
Bu kodları yazdıktan sonra menümüzü elde etmiş olacağız.
Şimdi sıra Jquery ile bu menüyü saydamlaştırmaya geldi. Fare imlecinin bulunduğu menü elemanının saydamlaşmasını sağlayacağız.
