Floating Dropdown Menu Plus Sosial Icons With jQuery

Floating Dropdown Menu Plus Sosial Icons With jQuery


1. Login Ke Akun Blog Sobat2. Pilih Rancangan/Tata Letak
2. 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjDKiHvrccV7AAXLM6q9sxA2PmnI4gr0_FmUPPndL_Jo9LPpzonCkT1ibCgQWDId7qKnRtPZgf2Mrqc3R6q4Pst3L0PfleaSPg8J8tfCMFEwb-azsGb8e_G9TiCdMV8Br3LjFkd7nZgQ/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; }


3. 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>

4. 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 -->


5. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save.
Selamat mencoba.