Horizontal Navigation Menu Fold Effect use CSS3 - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Horizontal Navigation Menu Fold Effect use CSS3, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Horizontal Navigation Menu Fold Effect use CSS3
link : Horizontal Navigation Menu Fold Effect use CSS3

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

Thus articles Horizontal Navigation Menu Fold Effect use CSS3

that is all articles Horizontal Navigation Menu Fold Effect use CSS3 This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Horizontal Navigation Menu Fold Effect use CSS3 with the link address https://autopostingblogspot.blogspot.com/2014/10/horizontal-navigation-menu-fold-effect.html