Adapun Cara membuat : ( Drop Down Menu Fixed Left Position - DROP ) sebagai berikut :
DAFTAR ISI CODE [Tampilkan][Sembunyikan]
CSS Kode
<style type="text/css">
/* Drop Down Menu Fixed Left Position
Input().menu: ID-sesi ()[SB-77] class()[dd-dropdown]
released publish: May 07, 2015
visit: Devy Indriyani
source: http://sahabatblogger77.blogspot.com */
#menuSB-77{
width:280px;height:50px;position:fixed !important;top:20px;left:0;color:#fff;
background:#000;box-shadow: 0 0 10px #000;overflow:hidden;
-webkit-backface-visibility: hidden;backface-visibility: hidden;
-webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
transition-delay: 400ms}
#menuSB-77.shownav {width:280px;height: 100%;border-left:5px solid yellow}
nav{width: 50px;height: 50px;background: rgba(0,0,0,0.2)}
.dd-menu {
position: absolute;top: 0px;left: 11px;display: block;width: 28px;height: 50px;
cursor: pointer;z-index: 30;transition-delay: 600ms;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition-delay: 600ms;-moz-transition-delay: 600ms}
.dd-menu span {
position: absolute;top: 50%;left: 0;display: block;width: 100%;height: 3px;
margin-top: -2px;background-color: #fff;font-size: 0px;
-webkit-user-select: none;-moz-user-select: none;user-select: none;
-webkit-transition: background-color 0.5s;transition: background-color 0.5s;
-moz-transition: background-color 0.5s}
.dd-open .dd-menu span {background-color:transparent}
.dd-open .dd-menu {
left:88%;-webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63)}
.dd-menu span:before,
.dd-menu span:after {
position: absolute;left: 0;width: 100%;height: 100%;background: #fff;
content: '';-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63)}
.dd-menu span:before {
-webkit-transform: translateY(-250%);
-moz-transform: translateY(-250%);
transform: translateY(-250%)}
.dd-menu span:after {
-webkit-transform: translateY(250%);
-moz-transform: translateY(250%);
transform: translateY(250%)}
.dd-open .dd-menu span:before {
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg)}
.dd-open .dd-menu span:after {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg)}
.ddTM-close .dd-menu:before {
-webkit-animation: plusVertical 0.3s ease forwards;
-moz-animation: plusVertical 0.3s ease forwards;
animation: plusVertical 0.3s ease forwards}
.ddTM-close .dd-menu:after {
-webkit-animation: plusHorizontal 0.3s ease forwards;
-webkit-animation: plusHorizontal 0.3s ease forwards;
animation: plusHorizontal 0.3s ease forwards}
.menu {z-index: 10;position: absolute;top: 0px;width: 100%;height: 100%}
.menu.open {background:#000;height: 100%}
.menu ul {
position: absolute;visibility: hidden;list-style-type:none;top: -40%;left: 0;
width: 100%;padding: 0;opacity: 0;display: table-cell;vertical-align: middle;
-webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
-moz-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
transform: perspective(600px) rotateX(20deg) rotateY(-20deg)}
.menu ul li a {text-align:left;color:#fff;font:700 14px/24px Verdana,sans-serif}
.menu ul li a:hover {color:aqua;border-left:solid 2px yellow;padding-left:5px}
.menu.open ul {
top: 40px;left:0;visibility: visible;opacity: 1;margin-top: 0;
-webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
-moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
-webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
transition-delay: 400ms}
</style>
HTML Kode
<div id="menuSB-77">
<nav class="ddTM">
<a href="#menuSB-77" class="dd-menu"><span>Menu</span></a>
<div class="menu">
<ul>
<li><a href="http://sahabatblogger77.blogspot.com">Menu 1</a></li>
<li><a href="http://sahabatblogger77.blogspot.com">Menu 2</a></li>
<li><a href="http://sahabatblogger77.blogspot.com">Menu 3</a></li>
<li><a href="http://sahabatblogger77.blogspot.com">Menu 4</a></li>
<li>..tambahkan lebih banyak menu lagi disini...</li>
....
....
</ul>
</div>
</nav>
</div>
JavaScript
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('.dd-menu').click(function(){
$('nav').toggleClass( "dd-open" );
$('.menu').toggleClass( "open" );
//$(id='menuSB-77','http://sahabatblogger77.blogspot.com');
$('#menuSB-77').toggleClass( "shownav" );
});
});
//]]>
</script>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Drop Down Menu Fixed Left Position - DROP ) semoga bermanfaat terima kasih.
Tidak ada komentar
Posting Komentar