menu bar auto hide cantik jquer

<style type='text/css'> ul#navigation-slide-out-kiri { position: fixed; margin: 0px; padding: 0px; top: 100px; left: 0px; list-style: none; z-index:9999; } ul#navigation-slide-out-kiri li { width: 100px; } ul#navigation-slide-out-kiri li a { display: block; margin-left: -82px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; } ul#navigation-slide-out-kiri li a { display: block; margin-left: -82px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation-slide-out-kiri li a:hover { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; } ul#navigation-slide-out-kiri .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9td6PJXOQhVSi3_TvlNPVVGcFwB8CPIvGDi4-ehOlr533RyHtHzzcBnRzAuC-NeAjViTjqPTrAqg6K43IEPdoFSQaSCVWOxk31Duam4gD49C-lPFPIcbwnZsbVVpb4k-HahI6M8fyUoZ7/s104/home.png); } ul#navigation-slide-out-kiri .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil57Fhs_lITGk_IJ1kTT-KjeSO4B4_CoP4Z0oAfnPXQdrgbTe3OXSwLSsKcB_-E_CwKit9aB6IzFJsNZosmpUuPIp2aRGcOKy5IZbajzsZF6FaUOv6rlQKFd6G49AcW93aOzusVUw9mFeO/s104/id_card.png); } ul#navigation-slide-out-kiri .news a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wK92O3JgyRo6EjHRzoemmMk0aocwqG3OVY1ydrNvvmMxT8afz-lD7N0ECsgUzI5Rngn435LuRi7Gw7cfXC7CLTLBKRZg_AaPnMwT05cuUVI-NX8WwAnoHHCAVFO_8T04IcoLA1N-Cao8/s104/promotion_new.png); } ul#navigation-slide-out-kiri .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHuTOX7K77sNoBDPmKcQselAV3Z-POKlUKK3eyApdXWTrrwutZrxOHMSrsDBO8SGe9JEd666SVa3tkxRjltntqA2YUtjThW_LF8192u-J5EuHMHrl-zMrpANfw8IsBot1A_QbWz9lQZuZQ/s104/rss.png); } ul#navigation-slide-out-kiri .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4TZ1sn2gKwfCF8CQ81fIqFJC1F15Z5TLL4inbkVJi63TDrKrDXcJpl4iyZ2KeZrm0IcM-2n3RZZAjQsaCt4TjRc0RkdVyWuchTWz446qe-EjIMq-Juahrzl2aOqhTZ2GKdhiqOLjYRss7/s104/mail.png); } </style>

8. Selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :

</body>

9. Copy kode dibawah ini dan paste sebelum kode </body>:

• Berikut kode Html, bila menu ditampilkan disebelah kanan :

<ul id="navigation-slide-out-kanan">
 <li class="home"><a href="ULR HALAMAN/ARTIKEL" title="Home"></a></li>
 <li class="about"><a href="ULR HALAMAN/ARTIKEL" title="About"></a></li>
 <li class="news"><a href="ULR HALAMAN/ARTIKEL" title="news"></a></li>
 <li class="rssfeed"><a href="ULR HALAMAN/ARTIKEL" title="Rss Feed"></a></li>
 <li class="contact"><a href="ULR HALAMAN/ARTIKEL" title="Contact"></a></li>
</ul>

• Berikut kode Html, bila menu ditampilkan disebelah kiri :

<ul id="navigation-slide-out-kiri">
 <li class="home"><a href="ULR HALAMAN/ARTIKEL" title="Home"></a></li>
 <li class="about"><a href="ULR HALAMAN/ARTIKEL" title="About"></a></li>
 <li class="news"><a href="ULR HALAMAN/ARTIKEL" title="news"></a></li>
 <li class="rssfeed"><a href="ULR HALAMAN/ARTIKEL" title="Rss Feed"></a></li>
 <li class="contact"><a href="ULR HALAMAN/ARTIKEL" title="Contact"></a></li>
</ul>

10. SIMPAN TEMPLATE

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.