- Daftar
- 4 Oct 1988
- Post
- ★
- Like diterima
- 9.157
LINK
DEMO
DOWNLOAD
Langkah 1 – Membuat Kode HTML
Menggunakan HTML buatlah div untuk menu dan kontent setiap halaman.
Langkah 2 – Tambahkan Desain CSS
Selanjutnya tambahkan kode CSS.
Kode jQuery
Terakhir tambahkan perintah jQuery untuk mengontrol setiap konten agar dapat di tampilkan secara horizontal. Fungsi scrollLeft() digunakan untuk meng-scroll konten ke kiri. Tambahkan pula efek animasi transisi menggunakan fungsi animate().
DEMO
DOWNLOAD
Langkah 1 – Membuat Kode HTML
Menggunakan HTML buatlah div untuk menu dan kontent setiap halaman.
Code:
<body>
<div id="menu">
<span class="link" id="home">Home</span>
<span class="link" id="about">About</span>
<span class="link" id="contact">Contact</span>
</div>
<div id="container">
<div class="content home" id="home">
<h1>Home</h1>
</div>
<div class="content about" id="about">
<h1>About</h1>
</div>
<div class="content contact" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
Langkah 2 – Tambahkan Desain CSS
Selanjutnya tambahkan kode CSS.
Code:
body{
overflow-x:hidden;
font-family: 'Open Sans', sans-serif;
}
h1 {
padding-left: 30px;
}
#container{
position:absolute;
top:0;
left:0;
width:4500;
height:100%;
}
.content{
width:1500;
height:100%;
float:left;
}
.home{
background-color:#85E4C4;
}
.about{
background-color:#5CC0C6;
}
.contact{
background-color:#F16E64;
}
#menu{
position:fixed;
top:100;
left:40%;
background-color:#728280;
z-index:1000;
padding:10px;
cursor:pointer;
border-radius:3px;
}
***** {
padding: 0 5px;
color: #ffffff;
}
Kode jQuery
Terakhir tambahkan perintah jQuery untuk mengontrol setiap konten agar dapat di tampilkan secara horizontal. Fungsi scrollLeft() digunakan untuk meng-scroll konten ke kiri. Tambahkan pula efek animasi transisi menggunakan fungsi animate().
Code:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#home").click(function(){
$("body").animate({ scrollLeft: 0},"slow");
});
$("#about").click(function(){
$("body").animate({ scrollLeft: 1500},"slow");
});
$("#contact").click(function(){
$("body").animate({ scrollLeft: 3000},"slow");
});
});
</script>