danisatya-st

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 :


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


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

Membuat menu jQuery Fancy Apple style

contoh menu jQuery Fancy Apple style disini

* Login ke blogger
* Pilih Rancangn masuk ke Edit Html
* Cari kode <head>
* Pastekan kode dibawah ini diatas atau sebelum kode <head>

<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/fancyapple/style.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script src='http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/jquery-1.3.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});

$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>

* Terakhir cari kode <body> dan pastekan kode dibawah ini diatas atau sebelum kode <body>

<div class='title'/>
<div class='navigation'>
<ul class='menu' id='menu'>
<li><span class='ipod'/><a class='first' href='alamat url'>Beranda</a></li>
<li><span class='video_camera'/><a href='alamat url'>Tentang</a></li>

<li><span class='television'/><a href='alamat url'>Cari</a></li>
<li><span class='monitor'/><a href='alamat url'>Foto</a></li>
<li><span class='toolbox'/><a href='alamat url'>Rss Feed</a></li>
<li><span class='telephone'/><a href='alamat url'>Podcasts</a></li>
<li><span class='print'/><a class='last' href='alamat url'>Kontak</a></li>
</ul>

</div>

* Ganti alamat url dengan alamat url kalian masing masing dan terakhir simpan dan lihat hasilnya

Sumber dan Contoh http://tympanus.net/

danisatya-st

Floating Dropdown Menu Plus Sosial Icons With jQuery

Membuat Effect "NUDGING" Pada Semua Link

Membuat menu vertical JQuery drop down

membuat menu jQuery Fancy Apple style

Mengenai Saya

Labels

Blog Archive

Pengikut