Tutorial Belajar Blog - Cara Membuat Navigasi Menu Melayang ,Kali Ini Oktri ingin berbagi Tentang membuat menu melayang, Tutorial Ini merupakan Tutorial atau Tips tentang Blog lanjutan dari
Cara Membuat Menu Social Button Melayang Sekedar Berbagi Informasi membuat menu di sebelah kiri pada blog, Contoh ataupun demo Saat Anda mengunjungi situs
Nettuts+, atau Tuts+ pasti Anda akan melihat sebuah menu melayang kecil di sebelah kiri layar. Kali ini Saya akan membuat versi yang mirip dengan itu.
Kerangka Navigasi
Kerangka navigasi terdiri dari elemen biasa yaitu
<nav>,
<ul> dan
<li>:
<nav id='sidenav'>
<ul>
<li><a class='main home' href='/'>Home</a></li>
<li><a class='main about' href='#'>About</a>
<ul class='fallback'>
<li><a class='social blogger' href='#'>Me on Blogger</a></li>
<li><a class='social facebook' href='#'>Me on Facebook</a></li>
<li><a class='social twitter' href='#'>Me on Twitter</a></li>
<li><a class='social googleplus' href='#'>Me on Google+</a></li>
</ul>
</li>
<li><a class='main archive' href='#'>Archives</a>
<ul class='fallback'>
<li><a href='#'>Table of Contents</a></li>
<li><a href='#'>Recent Articles</a></li>
<li><a href='#'>Recent Comments</a></li>
</ul>
</li>
<li><a class='main share' href='#'>Share</a>
<ul class='fallback'>
<li><a class='social blogger' href='#'>Blogger</a></li>
<li><a class='social facebook' href='#'>Facebook</a></li>
<li><a class='social twitter' href='#'>Twitter</a></li>
<li><a class='social googleplus' href='#'>Google+</a></li>
<li><a class='social flickr' href='#'>Flickr</a></li>
<li><a class='social rss' href='#'>RSS</a></li>
<li><a class='social mail' href='#'>Mail</a></li>
</ul>
</li>
<li><a class='main photos' href='#'>Screencast</a></li>
<li><a class='main contact' href='#'>Contact</a>
<ul class='fallback' style='font-weight:bold;'>
<li><a class='social facebook' href='#'>Facebook</a></li>
<li><a class='social twitter' href='#'>Twitter</a></li>
<li><a class='social mail' href='#'>Mail</a></li>
</ul>
</li>
</ul>
</nav>
CSS #sidenav {
position:fixed !important;
position:absolute;
top:60px;
left:0px;
z-index:999;
background-color:#eee;
border:1px solid #ccc;
width:auto;
height:auto;
text-indent:-99999px;
font:normal 12px Arial,Sans-Serif !important;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
}
#sidenav ul {
margin:0px 0px;
padding:0px 0px;
}
#sidenav li {
margin:0px 0px;
padding:0px 0px;
list-style:none;
display:block;
position:relative;
}
#sidenav a {
display:block;
width:20px;
border-bottom:1px solid #ccc;
color:#666;
text-decoration:none;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li:last-child a {
border-bottom:none;
}
#sidenav span.ttp {
display:block;
position:absolute;
top:0px;
font:normal 94% Arial,Sans-Serif;
background-color:#39f;
color:white;
padding:0px 10px;
line-height:22px;
height:22px;
width:auto;
left:100%;
z-index:77;
margin-left:17px;
text-indent:0px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}
#sidenav span.ttp em {
display:block;
width:0px;
height:0px;
border:4px solid transparent;
border-right-color:#39f;
position:absolute;
top:7px;
right:100%;
}
#sidenav li ul {
width:150px;
height:auto;
background:transparent;
border:none;
position:absolute;
top:-1px;
left:100%;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
display:none;
}
#sidenav li ul a {
border:1px solid #ccc;
border-bottom:none;
background-color:#eee;
display:block;
width:auto;
padding:0px 10px;
line-height:25px;
text-indent:0px;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li a:hover {background-color:#ddd;}
#sidenav li ul li:last-child a {
border-bottom:1px solid #ccc;
}
#sidenav a.main {
background-image:url('main-sprites.png');
background-repeat:no-repeat;
width:26px;
height:25px;
}
#sidenav a.home {background-position:5px 4px; }
#sidenav a.about {background-position:5px -22px; }
#sidenav a.archive {background-position:5px -48px; }
#sidenav a.share {background-position:5px -73px; }
#sidenav a.photos {background-position:5px -100px;}
#sidenav a.contact {background-position:5px -126px;}
#sidenav li ul a.social {
background-image:url('social-sprites.png');
background-repeat:no-repeat;
padding-left:30px !important;
}
#sidenav li ul a.blogger {background-position:5px 4px; }
#sidenav li ul a.facebook {background-position:5px -21px; }
#sidenav li ul a.twitter {background-position:5px -47px; }
#sidenav li ul a.googleplus {background-position:5px -73px; }
#sidenav li ul a.flickr {background-position:5px -99px; }
#sidenav li ul a.rss {background-position:5px -125px;}
#sidenav li ul a.mail {background-position:5px -151px;}
#sidenav li:hover .fallback {display:block;}
JQuery
Dan... sedikit kode JQuery yang merupakan pengembangan dari
JQuery Tooltip onClick. Kodenya memang tampak banyak, tapi yang banyak itu pada dasarnya hanya deskripsi cara kerjanya saja:
$(function() {
$('#sidenav .fallback').removeClass('fallback');
$('#sidenav li a.main').hover(function() {
$(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');
$('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);
}, function() {
$('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {
$(this).remove();
});
});
$('#sidenav li a[href="#"]').click(function(e) {
$('#sidenav li ul:visible, span.ttp:visible').hide();
$(this).next().css('margin-left', '10px').show('fast');
e.stopPropagation();
return false;
});
$(document).click(function() {
$('#sidenav li ul:visible, span.ttp:visible').hide();
});
});
kalau di template anda belum menggunakan
JQUERY anda harus menaruh nya sekarang:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Selamat Mencoba dan Semoga Bermamfaat....,
