Menu Horizontal Slider

Menu Horizontal Slider

Pada kali saya akan memberikan posting menu dengan tampilan horizontal slider. dalam menu ini kita dapat menampilkan menu kita dengan gambar seperti slider gambar. baiklah untuk lebih jelasnya kamu dapat melihat hasilnya atau dapat diunduh langsung.

Tag CSS nya

<style type=text/css> #tbi_slider { overflow: hidden; margin: 20px auto; padding: 0; width: 805px; height: 320px; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } #tbi_slider ul { margin: 0; padding: 0; width: 2000px; } #tbi_slider li { position: relative; display: block; float: left; width: 160px; border-left: 1px solid #888; -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #tbi_slider ul:hover li { width: 40px; } #tbi_slider ul li:hover { width: 640px; } #tbi_slider li img { display: block; } #tbi_title { position: absolute; top: 0; left: 0; padding: 20px; width: 640px; background: rgba(0, 0, 0, 0.5); color: #fff; font: bold 16px 'trebuchet MS', sans-serif; } #tbi_title a { display: block; color: #fff; text-decoration: none; } </style>

Tag HTML nya

<div id="tbi_slider"> <ul> <li> <div id="tbi_title"> <a href="POST LINK">JUDUL POST</a> </div> <a href="POST LINK"> <img src=""https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zdg3gUEgnumKvZt2sNgwhTSbzP2OVC9kcgsjB8NwZbvxSnb_LTtrJ3yEnx6fGv04zokX_fLJMsepcUcgaYV2WaYsPdggFa6WwTCYstvcPlEj1Lb0rAbCLs3WJ64NETIhJO5Rjf1j9gAO/s1600/jquery-modern-logo.jpg" width=180px height=350px alt="Menu Horizontal Slider"/> </a> </li> <li> <div id="tbi_title"> <a href="POST LINK">JUDUL POST</a> </div> <a href="POST LINK"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8YYsrn1VIH3yApbnxy5UT5bSzlwkHWczF9QI5a4jANBVaX2OQWpMzojLXLlAqDV_zvLjd2DBZuJA9-rHHbMWCSfRDURfyAd-wpeQJcX173wx_GvivP1MrHeYX4zHo39YoYzOs9L1xrIu/s1600/logo_css3.png" alt="Menu Horizontal Slider" width=180px height=350px/> </a> </li> <li> <div id="tbi_title"> <a href="POST LINK">JUDUL POST</a> </div> <a href="POST LINK"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOFH430pBX1aXzzWoNpqEdeAbjYJmB2jjv0xM7zMGdX26diAaYkgePnmVlDnCvSeIyUBFK3LgDIiW9fZTzoVzpOdmu3Y-_DGVG7SjdK8t50WpxLzunJesHe04IUmPpdLjl74i7Yb5cCLK/s1600/Html5LogoIcon.jpg" alt="Menu Horizontal Slider" width=180px height=350px/> </a> </li> <li> <div id="tbi_title"> <a href="POST LINK">JUDUL POST</a> </div> <a href="POST LINK"> <img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UQJmJ93W7fW7rkn58-9dBSFeo6Ovp51JejeoqrA6umhi1oX1WOPtxrWjPgwGWodGTrTjNmv4qM2EGk6S-evqZ15ad6QRzdRWqUtdWLkgg1tR2rgdXh6neFHEjrFCwZnprqGHOD7-vZ8q/s1600/w3school.jpg"width=180px height=350px/> </a> </li> <li> <div id="tbi_title"> <a href="POST LINK">JUDUL POST</a> </div> <a href="POST LINK"> <img alt="Menu Horizontal Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17mMIvbukUsERck9Jh_XQchfpghXZEZ4s0Xveq6yxUkKsAhuhkhhCly1a4eCFmxzoUZpAvMmIm2b7R3jHbdIn9BMDkuOKQ0weClnDidDyuprU6UoBCBLPvvgVGkTqdfVuRJj9bZgAqJci/s1600/web_design.jpg"width=180px height=350px/> </a> </li> </ul> </div>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh