Menu navigasi CSS Mac Dock top with jQuery
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* ---------------
Menu navigasi CSS Mac Dock top with jQuery
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxRAssNxaWcVjLMN5lZ7hSi6OFLh0MKpXrNg3gcxxN68c5IdhLjdVx82TYxuaIFfjFVMO5NwfR-JWfiRfLiX7gmImqvq2iIiVUPChW2CTiufrcOC-fnuAtEVSwvcFdT0zM4Q-h8wTkeE/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
Menu navigasi CSS Mac Dock top with jQuery
---------------------------------- */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxRAssNxaWcVjLMN5lZ7hSi6OFLh0MKpXrNg3gcxxN68c5IdhLjdVx82TYxuaIFfjFVMO5NwfR-JWfiRfLiX7gmImqvq2iIiVUPChW2CTiufrcOC-fnuAtEVSwvcFdT0zM4Q-h8wTkeE/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
dan simpan script berikut diatas kode </head> :
Selanjutnya simpan script berikut diatas kode </body> :
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
Cara pemanggilannya pada Html :
seleai... semoga bermanfaat,, dan semoga kawan bisa membuatnya kembali lebih bagus dari ini,, menjadi pengembangan nya yang lebih baik,,,
Happy Blogging.....
Show
0 Comments
prev
next
