Floating Dropdown Menu Plus Sosial Icons With jQuery Official Site

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 :

http://picturestack.com/145/536/cWpbgdropdownD9J.jpg

Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :

1. Login Ke Akun Blog Sobat

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtnqmvTkT_JF1u-02bgY0In1zMYinLtTjZxL21joHwfIBcot1jLCJAXa_rKzcGkOQn-FyfriRwPF9eEzm76qMvcwlJg0vZIbGCyJa9AKqk-R17EkjIhRpEGwGDypfOZKS2l_1WY0FAQBA/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 :

<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'>

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

</div>
</div>
</div>

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 ^_^

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...

ping fast my blog, website, or RSS feed for Freegoogle pagerank

Ping your blog, website, or RSS feed for Free

Please rate this article:

{[['

', '

']]}

{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

<a href="http://ut2a-4down.blogspot.com/2012/03/floating-dropdown-menu-plus-sosial.html">Floating Dropdown Menu Plus Sosial Icons With jQuery</a>

2 Comments

Comments

+ komentar + 2 Diskusi pada 'Floating Dropdown Menu Plus Sosial Icons With jQuery'

Anonim9:06 PM
Cara membuat navbar ini tetap diatas , ( Tidak Ngikut Ketika Kita Scrol Kebawah) Gimanaa..??,

Mohon Pencerahannya Sob :D

BalasHapus
Balasan
← Ⓐкα UTτα`8:54 AM
@Rizky Ritonga maaf ru bls,.. jadi cranya cukup mrubah kode berikut :

#header-bar-outer{
position:fixed;

Ket:

position:fixed anda dan mngnti mnjadi position:absolute
BalasHapus
Balasan

Tambahkan komentar

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^