Horizontal Navigation Menu Fold Effect use CSS3

Bagi sobat yang template blognya belum mempunyai menu, AA Koben akan share sebuah menu full stylish. Fungsi utama dari menu tidak lain untuk keperluan navigasi. Kita akan membuat menu navigasi horisontal fold/unfold efek menggunakan CSS3 tanpa javascript. Penggunaan fungsi css rotateX (), 3D transform and transition properties untuk menciptakan efek lipat. Akan teripta dua gaya, satu dengan dua tingkat sub menu dan yang kedua dengan tingkat sub menu dan pratinjau gambar!

Sobat dapat melihat hasil akhir (demo) dan download file dari sumber artikel by Pixel Hint pixelhint.com/tutorial-css3-horizontal-navigation-menu-fold-effect
Pada sumber artikel terdapat element header & logo. AA cuma mengambil bagian nav menu saja, menghilangkan bagian header, wrapper and logo. Posisi original nav yaitu memakai float: right, dan itupun saya hilangkan. Karena kode CSS bentrok dengan emoticon, maka sikat kode CSS di undercover blogger

Gantikan IMAGES/NAV_ARROW.PNG & IMAGES/BOX-ARROW.PNG dengan link image.

<nav>
<ul>
<li>
<a href="#">Main menu I<i class="nav_arrow"></i></a>
<!-- Menu item Sub menu level 1 Style 1 -->
<div class="sm_style1_level1">
<ul>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON1.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 Style 1 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON2.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON3.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON4.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON5.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu II<i class="nav_arrow"></i></a>
<!-- Countries item Sub menu level 1 style 2 -->
<div class="sm_style2_level1">
<ul>
<li>
<a href="#">
<span class="countries">New York</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE1.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Germany</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE2.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Italy</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE3.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">France</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE4.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Spain</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE5.JPG" />
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu III</a>
</li>
<li>
<a href="#">Main menu IV</a>
</li>
</ul>
</nav>

Gantikan seluruh IMAGE!
DONE.

10 Top CSS Menu Tutorials www.inspireleads.com/10-top-css-menu-tutorials