Desain Homepage – Horizontal Menu Scroll

Posted in Source Code by

Berikut ini merupakan contoh desain homepage dengan posisi item/menu discroll ke kiri/kanan. Kopi dan tempatkan script di bawah ini di dalam modul Source Code.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<title>Hello, world!</title>
<style>
/* css untuk scroll item dari kiri-kanan */
#card_slider {
clear: both;
overflow-y: hidden;
overflow-x: scroll;
height: 230px;
margin-top: 5px;
position: relative;
padding-left: 0px;
padding-top: 0px;
}

#card_slider::-webkit-scrollbar {
height: 5px;
display: none;
}

#card_slider::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 0px;
}

#card_slider::-webkit-scrollbar-thumb {
background-color: orange;
border-radius: 0px;
}

#card_track {
position: absolute;
width: 2500px;
}

.subject_card {
height: auto;
width: 300px;
background-color: #fff;
color: #5d646c;
float: left;
margin-right: 5px;
display: inline;
background-color: #b4b5b7;
border-radius: 5px;
border: 2px solid #b4b5b7;
}

.subject_card > img {
width: 100%;
height: 170px;
display: block;
border-radius: 5px;
border: none;
}

.subject_card > p {
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
overflow: hidden;
max-height: 60px;
color: #fff;
font-weight: bold;
}
/* css untuk scroll item dari kiri-kanan */
#scrollMenu h6 {
margin-top: 10px;
padding: 0px;
font-weight: bold;
background-color: orange;
padding: 10px;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<!--scrol menu -->
<div id="scrollMenu" class="container">
<h6>Terbaru dari Kami</h6>
<div id="card_slider">
<div id="card_track">
<a href="#myModal" onclick="mylink('inapp', 'https://www.siberiancms.com')">
<div class="subject_card">
<img src="https://broonet.com/wp-content/uploads/2020/04/1-contoh-iklan-produk-makanan.png" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href="https://cdn.idntimes.com/content-images/post/20161024/22-6208f7bc1fd60900abc5803ba4ad40f2_600x400.jpg">
<div class="subject_card">
<img src="https://cdn.idntimes.com/content-images/post/20161024/22-6208f7bc1fd60900abc5803ba4ad40f2_600x400.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>

<a href="">
<div class="subject_card">
<img src="https://cdn.idntimes.com/content-images/post/20161024/rsz-1cb9952268244356031bae7288e-dd07399ad80e402f36373b6ed6e833e6.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://cdn2.tstatic.net/suryamalang/foto/bank/images/kfc-chicken-halal_20150912_094134.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href="">
<div class="subject_card">
<img src="https://marketeers.com/wp-content/uploads/2018/04/12042_GOODFF_800.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://www.wowkeren.com/images/news/00104475.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://haluanpos.com/wp-content/uploads/2016/02/IKLAN-CONTOH-KFC.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://image.flaticon.com/icons/svg/724/724819.svg"/>
<p style="float: center; margin-top: 10px; text-align: center;">Lihat Semua</p>
</div>
</a>
</div>
</div>
</div>
<!-- card -->

<!--scrol menu -->
<div id="scrollMenu" class="container">
<h6>Mau Makan Apa Hari Ini?</h6>
<div id="card_slider">
<div id="card_track">
<a href="#">
<div class="subject_card">
<img src="https://broonet.com/wp-content/uploads/2020/04/1-contoh-iklan-produk-makanan.png" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href="https://cdn.idntimes.com/content-images/post/20161024/22-6208f7bc1fd60900abc5803ba4ad40f2_600x400.jpg">
<div class="subject_card">
<img src="https://cdn.idntimes.com/content-images/post/20161024/22-6208f7bc1fd60900abc5803ba4ad40f2_600x400.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>

<a href="">
<div class="subject_card">
<img src="https://cdn.idntimes.com/content-images/post/20161024/rsz-1cb9952268244356031bae7288e-dd07399ad80e402f36373b6ed6e833e6.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://cdn2.tstatic.net/suryamalang/foto/bank/images/kfc-chicken-halal_20150912_094134.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href="">
<div class="subject_card">
<img src="https://marketeers.com/wp-content/uploads/2018/04/12042_GOODFF_800.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://www.wowkeren.com/images/news/00104475.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://haluanpos.com/wp-content/uploads/2016/02/IKLAN-CONTOH-KFC.jpg" />
<p style="float: left; margin-top: 10px;">Super Besar 2</p><button type="button" class="btn btn-danger" style="float: right; margin: 5px;">Detail</button>
</div>
</a>
<a href=" ">
<div class="subject_card">
<img src="https://image.flaticon.com/icons/svg/724/724819.svg"/>
<p style="float: center; margin-top: 10px; text-align: center;">Lihat Semua</p>
</div>
</a>
</div>
</div>
</div>
<!-- card -->

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Related Posts

About Author

ADD YOUR COMMENT