Panduan Cara membuat menu tooltip

Desain Grafis dan Percetakan

Cara membuat menu tooltip


Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link atau kita bisa gunakan menu ini sebagai daftar artikel, menu ini juga dilengkapi dengan tooltip yang berisi gambar dan informasi singkat tentang artikel atau link lain yang ada pada daftar tersebut. Cara membuat menu ini sangat mudah, yang kita perlukan hanya kode HTML dan beberapa kode CSS, tanpa menggunakan Javascript. Berikut ini anda bisa lihat contoh menu tooltip dibawah ini :
<style type='text/css'>

.tooltp a:link,a:visited{
display:block;
float:left;
color:#FFFFFF;
border:1px solid #ffffff;
background-color:#004478;
width:220px;
min-height: 45px;
text-align:left;
padding:5px;
text-decoration:none;
}

.tooltp a:hover,a:active
{
color:#004478;
background-color:#B3C0EF;
padding:5px;
}

.tooltp li{
display:block;
color:#FFFFFF;
border:1px solid #ffffff;
background-color:#8797D3;
width:245px;
min-height: 58px;
padding:4px;
text-decoration:none;
}

.tooltp li:hover,li:active
{
border:1px solid #5867A0;
background-color:#5867A0;
}

a.tooltp
{
position:relative;
z-index:24;
text-decoration:none;
}

a.tooltp span{ display: none; }

a.tooltp:hover span.muncul
{
display: block;
position:absolute;
float:left;
top:-6px;
width:200px;
border:2px solid #5867A0;
border-top-width:134px;
border-right-width:5px;
border-bottom-width:5px;
font-style:italic;
color:#004478;
background-color:#E9EEFF;
margin-left:244px;
padding: 10px;
}


.tooltpimg{
display: block;
position:absolute;
float:left;
top:-128px;
margin-left: -9px;
width:215px;
height:119px;
border:2px solid #ffffff;
}

</style>

TotalPing | Google Ping | Ping Blog Search | Add Url | Google Master | Bing Master | Site Value | Seo Jerman | TotalPing