Pasang Sticky Menu di Blog
Sticky menu adalah menu yang menempel atau mengikuti index halaman blog pada saat kita menggulirkan Scroll kebawah pada browser anda..
Menu ini sangat unik karena kita tidak perlu mengararahkan scroll lagi keatas atau menu pada halaman header untuk mengklik menu tsb..
Sebagai contoh anda dapat menurunkan scroll pada browser anda...
Maka secara otomatis menu akan mengikuti...
Silahkan copy paste Script Kode dibawah ini :
<style>
/* CSS */
.mattblacktabs{
overflow: hidden;
width:450px;
background:#414141;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
/* www.kikiyo.co.cc */
.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://wwwkikiyococc.googlecode.com/files/sticky-www.kikiyo.co.cc.js">
/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
/* http://godknows-vandalize.blogspot.com/ */
</script>
<script>
/* www.kikiyo.co.cc */
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
<div id="samplemenu" class="mattblacktabs">
<ul>
<li><a href="http://godknows-villyx.blogspot.com">Home</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Menu</a></li>
<li><a href="http://godknows-villyx.blogspot.com">CSS</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Forums</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Blogger edit</a></li>
<li><a href="http://godknows-villyx.blogspot.com">JavaScript</a></li>
</ul>
</div>
<div style="height:1000px"></div>
Menu ini sangat unik karena kita tidak perlu mengararahkan scroll lagi keatas atau menu pada halaman header untuk mengklik menu tsb..
Sebagai contoh anda dapat menurunkan scroll pada browser anda...
Maka secara otomatis menu akan mengikuti...
Silahkan copy paste Script Kode dibawah ini :
<style>
/* CSS */
.mattblacktabs{
overflow: hidden;
width:450px;
background:#414141;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
/* www.kikiyo.co.cc */
.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://wwwkikiyococc.googlecode.com/files/sticky-www.kikiyo.co.cc.js">
/***********************************************
* Sticky Content script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
/* http://godknows-vandalize.blogspot.com/ */
</script>
<script>
/* www.kikiyo.co.cc */
jQuery(document).ready(function($){
$('#samplemenu').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
<div id="samplemenu" class="mattblacktabs">
<ul>
<li><a href="http://godknows-villyx.blogspot.com">Home</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Menu</a></li>
<li><a href="http://godknows-villyx.blogspot.com">CSS</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Forums</a></li>
<li><a href="http://godknows-villyx.blogspot.com">Blogger edit</a></li>
<li><a href="http://godknows-villyx.blogspot.com">JavaScript</a></li>
</ul>
</div>
<div style="height:1000px"></div>
Categories:
Blogging
0 komentar:
Posting Komentar