DropDown Menu đa cấp với hiệu ứng Fading và Easing cho Blogger

Special Multilevel DropDown Menu With Fading and Easing Effects for Blogger

Ở các bài viết trước Iris Tips đã giới thiệu cho các bạn khá nhiều kiểu menu khác nhau. Hôm nay Iris Tips sẽ chia sẻ cho các bạn thêm 1 loại dropdown menu mới hiệu ứng Fading và Easing.

DropDown Menu đa cấp với hiệu ứng Fading và Easing cho Blogger

Cách thực hiện: Vào Bố cục >> Thêm tiện ích HTML/Javascript và thêm đoạn code bên dưới vào

 <link rel="stylesheet" href="https://sites.google.com/site/iristipsblogger/file/Multilevel%20DropDown%20Menu.css"/>
<nav id="nav">
<nav id='nav'> <ul class='menunav' id='navinti'> <li class='mhome'><a href='/'>Home</a></li> <li class='sub'><a href='/'>Categories</a> <ul class='sub-menu hidden'> <li class='multsub'><a href='/search/label/Windows'>Windows</a>
  <ul class='sub-sub-menu hidden'>
    <li><a href='/search/label/Windows XP'>Windows XP</a></li>
    <li><a href='/search/label/Windows 7'>Windows 7</a></li>
    <li><a href='/search/label/Windows 8'>Windows 8</a></li>
    <li><a href='/search/label/Windows News'>Windows News</a></li>
  </ul> </li>
           <li class='multsub'><a href='/search/label/Softwares'>Softwares</a>
    <ul class='sub-sub-menu hidden'>
       <li><a href='/search/label/System'>System</a></li>
       <li><a href='/search/label/Multimedia'>Multimedia</a></li>
       <li><a href='/search/label/Customization'>Customization</a></li>
       <li><a href='/search/label/Designing'>Designing</a></li>
    </ul> </li>
           <li class='multsub'><a href='/search/label/Blogger'>Blogger</a> <ul class='sub-sub-menu hidden'>
     <li><a href='/search/label/Blogger Widgets'>Blogger Widgets</a></li>
     <li><a href='/search/label/Blogger Templates'>Blogger Templates</a></li>
     <li><a href='/search/label/Blogger Tweaks'>Blogger Tweaks</a></li>
     <li><a href='/search/label/Blogger Tools'>Blogger Tools</a></li>
     <li><a href='/search/label/Drop Down Menu'>Drop Down Menu</a></li>
     <li><a href='/search/label/Social Profile Widget'>Social Profile Widgets</a></li> </ul> </li>
       <li><a href='#'>More...</a></li> </ul> </li> <li><a href='http://iris-tips.blogspot.com/p/contact.html'>Contact Us</a></li> <li class='singsub'><a href='/'>Tools</a> <ul class='sub-menu hidden'> <li><a href='http://iris-tips.blogspot.in/p/html-encoder.html'>HTML Editor</a></li> <li><a href='http://iris-tips.blogspot.in/p/color-code-generator.html'>Color Code Generator </a></li> </ul> 
</li>
</ul></nav> 

• DEMO

See the Pen rVawQp by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mjn/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm