Print this pagePerhatikan Menu paling atas dari posting Membuat Menu Bertooltips yang sedang anda buka, kodenya adalah :
<html>
<head>
<style type="text/css">
/*MENU*/
#menus{width:100%;height:38px;position:fixed;top:0;left:0;text-align:center;background:#555;border-bottom:2px solid #fff;box-shadow:0 0 0 1px #555;z-index:999;
}
#menus:before{width:15px;height:15px;content:"";position:fixed;top:8px;left:5px;border-radius:100%;border:2px solid #ddd;background:#000;
}
#menus:after{width:15px;height:15px;content:"";position:fixed;top:8px;right:5px;border-radius:100%;border:2px solid #ddd;background:#000;
}
#menus a{margin:3px;color:#333;text-decoration:none;
}
#menus a:hover{margin:3px;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;
}
.menus{display:inline-block;height:30px;background:#ddd;border: 1px solid #ddd;padding:0 10px 0 0;font:bold 11px/30px Arial, Helvetica;text-decoration:none;text-transform:capitalize;color:#444;box-shadow:0 0 0 1px #222,inset 0 0 0 1px #444;transition:all 0.5s;
}
.menus:before{content:"";float:left;background:#aaa;width:35px;
text-align: center;font-weight:bold;font-size:25px;color:#222;margin:0 10px 0 0;box-shadow:inset 0 0 0 1px #444;
}
.menus:hover{background-color:#fa0;color:#fff;
}
.menus:hover:before{background: #000;color:#ddd;
}
.menus:active{background:#b00;
}
.home:before{content:"\2794";
}
.isi:before{content:"\2633";
}
.post:before{content:"\2756";
}
.contact:before{content:"\2706";
}
.about:before{content:"\2639";
}
/*tooltip*/
#toltip{position:relative;
}
#toltip span{display:block;position:absolute;top:-200px;left:0px;width:200px;height:auto;padding:5px;font:9px Verdana;color:#ddd;text-align:center;background:#000;border-radius:5px;border:1px solid #ddd;box-shadow:0 0 0 1px #222;opacity:0.9;
}
#toltip span:after{content:"";position:absolute;top:-22px;left:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #000;
}
#toltip:hover span{position:absolute;top:50px;left:0;z-index:9;transition:all 1s;
}
#toltip p{font:bold 10px Arial;font-style:italic;margin:0 auto 5px;color:#fa0;border-bottom:1px solid #888;text-align:center;
}
</style>
</head>
<body>
<div id='menus'><a class='menus home' href='#' id='toltip'>BERANDA<span><p>BACK TO HOME</p>kembali lagi menuju ke beranda</span></a><a class='menus isi' href='#' id='toltip'>ARCHIVES<span><p>OPEN ARCHIVE</p>lihat semua artikel dalam blog ini</span></a><a class='menus post' href='#' id='toltip'>NEW ENTRY<span><p>READ NEW ARTICLE</p>baca artikel terbaru diblog ini</span></a><a class='menus contact' href='#' id='toltip'>CONTACT 'US<span><p>MY CONTACT LINE</p>silahkan hubungi kami disini</span></a><a class='menus about' href='#' id='toltip'>ABOUT 'US<span><p>MY PROFILE</p>sekilas tentang profil admin</span></a></div>
</body>
</html>
<head>
<style type="text/css">
/*MENU*/
#menus{width:100%;height:38px;position:fixed;top:0;left:0;text-align:center;background:#555;border-bottom:2px solid #fff;box-shadow:0 0 0 1px #555;z-index:999;
}
#menus:before{width:15px;height:15px;content:"";position:fixed;top:8px;left:5px;border-radius:100%;border:2px solid #ddd;background:#000;
}
#menus:after{width:15px;height:15px;content:"";position:fixed;top:8px;right:5px;border-radius:100%;border:2px solid #ddd;background:#000;
}
#menus a{margin:3px;color:#333;text-decoration:none;
}
#menus a:hover{margin:3px;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;
}
.menus{display:inline-block;height:30px;background:#ddd;border: 1px solid #ddd;padding:0 10px 0 0;font:bold 11px/30px Arial, Helvetica;text-decoration:none;text-transform:capitalize;color:#444;box-shadow:0 0 0 1px #222,inset 0 0 0 1px #444;transition:all 0.5s;
}
.menus:before{content:"";float:left;background:#aaa;width:35px;
text-align: center;font-weight:bold;font-size:25px;color:#222;margin:0 10px 0 0;box-shadow:inset 0 0 0 1px #444;
}
.menus:hover{background-color:#fa0;color:#fff;
}
.menus:hover:before{background: #000;color:#ddd;
}
.menus:active{background:#b00;
}
.home:before{content:"\2794";
}
.isi:before{content:"\2633";
}
.post:before{content:"\2756";
}
.contact:before{content:"\2706";
}
.about:before{content:"\2639";
}
/*tooltip*/
#toltip{position:relative;
}
#toltip span{display:block;position:absolute;top:-200px;left:0px;width:200px;height:auto;padding:5px;font:9px Verdana;color:#ddd;text-align:center;background:#000;border-radius:5px;border:1px solid #ddd;box-shadow:0 0 0 1px #222;opacity:0.9;
}
#toltip span:after{content:"";position:absolute;top:-22px;left:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #000;
}
#toltip:hover span{position:absolute;top:50px;left:0;z-index:9;transition:all 1s;
}
#toltip p{font:bold 10px Arial;font-style:italic;margin:0 auto 5px;color:#fa0;border-bottom:1px solid #888;text-align:center;
}
</style>
</head>
<body>
<div id='menus'><a class='menus home' href='#' id='toltip'>BERANDA<span><p>BACK TO HOME</p>kembali lagi menuju ke beranda</span></a><a class='menus isi' href='#' id='toltip'>ARCHIVES<span><p>OPEN ARCHIVE</p>lihat semua artikel dalam blog ini</span></a><a class='menus post' href='#' id='toltip'>NEW ENTRY<span><p>READ NEW ARTICLE</p>baca artikel terbaru diblog ini</span></a><a class='menus contact' href='#' id='toltip'>CONTACT 'US<span><p>MY CONTACT LINE</p>silahkan hubungi kami disini</span></a><a class='menus about' href='#' id='toltip'>ABOUT 'US<span><p>MY PROFILE</p>sekilas tentang profil admin</span></a></div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar