◄ Min  Size Fonts: + | - | ± Color: Max ►

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

Loading...
XHorizontal Navigation Menu Fold Effect use CSS3
Membuat fixed menu navigasi horisontal dengan gaya fold/flip efek menggunakan CSS3
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE