Friday, November 15, 2013
Browse Manual »
Wiring »
dropdown
»
floating
»
icons
»
jquery
»
menu
»
plus
»
sosial
»
with
»
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 :
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.
4. Selanjutnya letakkan script berikut, di atas kode </head> :
5. Selanjutnya letakkan kode berikut, di bawah kode Head-nav (sesuaikan template) Masing-masing :
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 ^_^
Floating Dropdown Menu Plus Sosial Icons With jQuery
Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak3. 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/AVvXsEhG8UCxcfMarAVqxhCrVJvcLW1V7bEnx_qJA0HN8RD5k1S9gb0kjpiITTA6cikogDYp8v6FzVChHMtVBRt8REVSQLT2JiTe7nxE_Wftv1uDfT7RjqZaNMvczThLoYGIO0Sg0yto9eVvJtg/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://.blogspot.com/search/label/CSS%20Code%20Snippet>Code Snippet</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/CSS3>CSS3</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/Javascript>Javascript</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/jQuery>jQuery</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/SEO>SEO</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/Submit%20Website>Submite</a>
</li>
<li>
<a href=http://.blogspot.com/search/label/Tools%20Blog>Tools</a>
</li>
<li>
<a href=http://.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://.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 ^_^
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment