Daha önceleri paylaşmış olduğum saydam bir üst menü örneğini dikey menü olarak değiştirerek tooltip ekledim. Tooltip kısmı saf css kullanılarak hazırlanmış bir bölüm. Ben tooltip örneğini menüde kullanarak paylaşmak istedim. Dilerseniz herhangi bir yazı içerisindeki bir kelimeyede tooltip örneğini uygulayabilirsiniz. İşlem oldukça basit <i></i> kodları arasına ekleyeceğiniz yazılar mouse ile yazının üstüne gelmediğiniz sürece görünmüyorlar. Mouse ile yazının üstüne geldiğiniz zaman tooltip penceresi açılıyor ve açıklamalar tooltip içerisinde görünüyor.
Şimdilik fazla detaya girmeyecem ama önümüzdeki günlerede unutmazsam tooltip kısmını detaylı olarak bir kaç örnek üzerinde anlatmaya çalışacağım sizlere. Tooltip örneğinin en güzel tarafı bütün tarayıcılar üzerinde sorunsuz bir şeklde çalışabilmesi ve menü örneği ise şeffaf png resimler kullandığım için her türlü site arkaplanına uygun görünen bir özeliğe sahip.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css dosya adresi :
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul id="menu"> <li class="secili"><a href="index.html">Anasayfa<i>Site <br />Anasayfasına git.</i></a></li> <li><a href="#">Webmaster<i>Webtasarımcılar için jQuery ve <br /> Css3 örnekler.</i></a></li> <li><a href="#">Wordpress<i>Wordpress temalar, eklentiler<br /> ve bileşenler.</i></a> <li><a href="#">Script<i>Php, Asp, Flash ve<br /> daha birçok örnek.</i></a></li> <li><a href="#">Photoshop<i>Photoshop dersleri, tasarımlar <br />ve örnekler.</i></a></li> <li><a href="https://www.mintik.com/?p=11964">Tutorial</a></li> </ul>