Desain Homepage – Horizontal Menu Scroll
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>