Cara mudah membuat menu navigasi sleding

,

Gambar 0.1 foto Preview navigasi sleding.
Menu navigasi sleding ini cukup keren, sleding dari kiri dengan menggunakan button toggle warna merah.
bisa disesuaikan nati sama sobat semua.

warns bsckground agak gelap jadi yang gak suka gelap bisa diganti di bagian background:#fff itu berarti warna putih.

oke kita kasih kodenya.

<html><head>
<script>


$('#toggle').click(function(){


var w = $('#sidebar').width();


var pos = $('#sidebar').offset().left;


if(pos == 0){


$('#sidebar').animate({'left': -w}, 'slow');



}



else



{


$('#sidebar').animate({'left': '0'}, 'slow');



}


});
</script>



<style>
#toggle{
position:relative;
left:8%;
top:50%;
background:red;
border-radius:180px;
padding:0 10px;
}
a:link {text-decoration: none; color: #bdc3c7;}

a:visited {text-decoration: none; color: #bdc3c7;}


a:hover {text-decoration: none; color: #bdc3c7;}



a:active {text-decoration: none; color: #bdc3c7;}

body {


background-color: #2c3e50;


font-family: Helvetica;


font-size: 22pt;


}



#sidebar {


position: absolute;


display: block;



height: 100%;


top: 0px;

left: 0px;


background-color: #34495e;



box-shadow: 5px 5px 10px;

}


#links {


position: relative;


float: left;


}



#link_list {


list-style-type: none;


width: 100%;


padding: 0px 50px 0px 0px;

}

#link_list li {



display: block;

width: 100%;
}

</style>
</head><body>
<div id='sidebar'>


<div id='links'>



<ul id='link_list'>



<a href=''><li>Example</li></a>



<a href=''><li>Example</li></a>



<a href=''><li>Example</li></a>

</ul>


</div>


<span id='toggle'>
&raquo;
</span>
</div>
</body></html>


Semoga membantu , dan bermanfat, trimakasih sudah mau nyimak.

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.