Floating Dropdown Menu Plus Sosial Icons With jQuery

Menu model drop down horizontal ini umumnya dipasang pada bagian bawah atau atas header sebuah blog. Namun bila anda ingin memasangnya di tempat lain gak ap2 koq.hehee oia untuk Previewnya anda bisa lihat gambar di bawah :



Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Topnav Drop down trigger styles */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;font-family:century gothic;text-shadow:1px 2px 2px #000;
font-size:12px;
float: right;
font-size: 13px;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
text-transform:uppercase;
}
ul.topnav li a:hover{
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://lh5.googleusercontent.com/-xW4p9b_uWyI/TeQwwBEAGGI/AAAAAAAAAGY/rGxrR1WBhgE/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border:1px solid #111;z-index:1001;
}
ul.subnav_last{
list-style: none;
position: absolute;
right: 15px; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index:1001;
}
ul.subnav li, ul.subnav_last li{
margin: 0; padding: 0;
border-top: 1px solid #111;
border-bottom: 1px solid #333;
clear: both;
width:150px;
}
ul.subnav li:last-child{
border-bottom: none;
}
ul.subnav_last li:last-child{
border-bottom: none;
}
html ul.subnav li a, ul.subnav_last li a {
float:left;
width:130px;
text-align:left;
background: transparent url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
padding:8px 0 8px 20px;
-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
text-transform:none;
}
html ul.subnav li a:hover, ul.subnav_last li a:hover{
background: #191919 url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
}
#header-bar-outer{
position:fixed;
z-index:9999;
width:100%;
height:34px;
padding:0;
margin:0;
background:#212121;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding-top:1px;
padding-bottom:1px;
top:0;
}
#header-bar {
width:100%;
height:33px;
margin:0 auto;
padding:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
}
#top_nav{
height:33px;
line-height:33px;
text-align:left;
float:left;
}
#top_nav ul{
margin:0; padding:0 0 0 5px;
}
#top_nav li{
display:inline;
}
#top_nav li a{
color: #CCCCCC;
font-size: 11px;
margin: 0 0 0 0;
padding: 0 0 0 10px;
text-transform: uppercase;
}
/* social icon */
#social-networking li
{
float:left;
}
#social-networking a
{
display:block;
padding:0 3px 0 0;
position:relative;
}
#social-networking span
{
opacity:0.5;
width: 24px;
height: 24px;
display: block;
border:4px solid #2C2B2B;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow:inset 0 2px 6px #000000;
webkit-shadow:inset 0 2px 6px #000000;
-moz-shadow:inset 0 2px 6px #000000;
transition: all linear 350ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}
#social-networking span:hover
{
border:4px solid #75AC0D;
opacity:0.9;
}
#social-networking .social-icon
{
background: url('http://4.bp.blogspot.com/-xWyhwRsNxmY/T0u_sVGz8QI/AAAAAAAAHck/p77h_vjely0/s1600/social.png') no-repeat;
}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }

4. Selanjutnya letakkan script berikut, di atas kode </head>  :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav, ul.subnav_last").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav, ul.subnav_last").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){  
$(this).parent().find("ul.subnav, ul.subnav_last").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>

5. Selanjutnya letakkan kode berikut, di bawah kode Head-nav (sesuaikan template) Masing-masing  :

<!-- Start Dropdown Menu Plus Sosial Icons -->
<div id='header-bar-outer'>
<div id='header-bar'>
<ul class='topnav'>
<li>
<a href='/'>Home</a>
</li>
<li><a href='#'>Blogger</a>
<ul class='subnav'>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/CSS%20Code%20Snippet'>Code Snippet</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/CSS3'>CSS3</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/Javascript'>Javascript</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/jQuery'>jQuery</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/SEO'>SEO</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/Submit%20Website'>Submite</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/Tools%20Blog'>Tools</a>
</li>
<li>
<a href='http://ut2a-4down.blogspot.com/search/label/Widget'>Widget</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-1</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-2</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-3</a>
<ul class='subnav'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li>
<a href='#'>Menu-4</a>
<ul class='subnav_last'>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
<li>
<a href='URL-LINK'>Edit-Me</a>
</li>
</ul>
</li>
<li><a href='http://ut2a-4down.blogspot.com/2012/02/daftar-isi.html' target='_blank'>Site Maps</a></li>
</ul>
<div id='top_nav'>
<!-- start #social-networking-->
<ul id='social-networking'>
<li><a href='https://twitter.com/#!/YOUR-ID' id='twitter-link' target='_blank' title='twitter'><span class='twitter social-icon'></span></a></li>
<li><a href='http://www.facebook.com/YOUR-ID' id='facebook-link' target='_blank' title='facebook'><span class='facebook social-icon'></span></a></li>
<li><a href='skype:YOUR-ID?call' target='_blank' title='skype'><span class='skype social-icon'></span></a></li>
<li><a href='http://www.youtube.com/YOUR-ID' id='youtube-link' target='_blank' title='youtube'><span class='youtube social-icon'></span></a></li>
<li><a href='http://lk.linkedin.com/in/YOUR-ID' id='linkedin-link' target='_blank' title='linkedin'><span class='linkedin social-icon'></span></a></li>
<li><a href='https://plus.google.com/u/0/YOUR-ID/' id='googleplus-link' target='_blank' title='googleplus'><span class='googleplus social-icon'></span></a></li>
<li><a href='http://delicious.com/url/YOUR-ID' id='delicious-link' target='_blank' title='delicious'><span class='delicious social-icon'></span></a></li>
<li><a href='http://digg.com/YOUR-ID' id='digg-link' target='_blank' title='digg'><span class='digg social-icon'></span></a></li>
<li><a href='http://feeds.feedburner.com/YOUR-ID' target='_blank' title='rss'><span class='rss social-icon'></span></a></li>
<li><a href='http://www.flickr.com/YOUR-ID' target='_blank' title='flickr'><span class='flickr social-icon'></span></a></li>
</ul>
<!-- end #social-networking-->
</div>
</div>
</div>
<!-- End Dropdown Menu Plus Sosial Icons -->

6. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save.
Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^ Please rate this article: