首页>>导航菜单>>动画下拉导航菜单(2020-06-12)

动画下拉导航菜单

动画下拉导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <header class="cd-morph-dropdown">  
  2.     <a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>  
  3.       
  4.     <nav class="main-nav">  
  5.         <ul>  
  6.             <li class="has-dropdown gallery" data-content="about">  
  7.                 <a href="#0">About</a>  
  8.             </li>  
  9.   
  10.             <li class="has-dropdown links" data-content="pricing">  
  11.                 <a href="#0">Pricing</a>  
  12.             </li>  
  13.   
  14.             <li class="has-dropdown button" data-content="contact">  
  15.                 <a href="#0">Contact</a>  
  16.             </li>  
  17.         </ul>  
  18.     </nav>  
  19.       
  20.     <div class="morph-dropdown-wrapper">  
  21.         <div class="dropdown-list">  
  22.             <ul>  
  23.                 <li id="about" class="dropdown gallery">  
  24.                     <a href="#0" class="label">About</a>  
  25.                       
  26.                     <div class="content">     
  27.                         <ul>  
  28.                             <li>  
  29.                                 <a href="#0">  
  30.                                     <em>Title here</em>  
  31.                                     <span>A brief description here</span>  
  32.                                 </a>  
  33.                             </li>  
  34.   
  35.                             <li>  
  36.                                 <a href="#0">  
  37.                                     <em>Title here</em>  
  38.                                     <span>A brief description here</span>  
  39.                                 </a>  
  40.                             </li>  
  41.   
  42.                             <li>  
  43.                                 <a href="#0">  
  44.                                     <em>Title here</em>  
  45.                                     <span>A brief description here</span>  
  46.                                 </a>  
  47.                             </li>  
  48.   
  49.                             <li>  
  50.                                 <a href="#0">  
  51.                                     <em>Title here</em>  
  52.                                     <span>A brief description here</span>  
  53.                                 </a>  
  54.                             </li>  
  55.                         </ul>  
  56.                     </div>  
  57.                 </li>  
  58.   
  59.                 <li id="pricing" class="dropdown links">  
  60.                     <a href="#0" class="label">Pricing</a>  
  61.   
  62.                     <div class="content">  
  63.                         <ul>  
  64.                             <li>  
  65.                                 <h2>Services</h2>  
  66.   
  67.                                 <ul class="links-list">  
  68.                                     <li><a href="#0">Logo Design</a></li>  
  69.                                     <li><a href="#0">Branding</a></li>  
  70.                                     <li><a href="#0">Web Design</a></li>  
  71.                                     <li><a href="#0">iOS</a></li>  
  72.                                     <li><a href="#0">Android</a></li>  
  73.                                     <li><a href="#0">HTML/CSS/JS</a></li>  
  74.                                     <li><a href="#0">Packaging</a></li>  
  75.                                     <li><a href="#0">Mobile</a></li>  
  76.                                     <li><a href="#0">UI/UX</a></li>  
  77.                                     <li><a href="#0">Prototyping</a></li>  
  78.                                 </ul>  
  79.                             </li>  
  80.   
  81.                             <li>  
  82.                                 <h2>Projects</h2>  
  83.   
  84.                                 <ul class="links-list">  
  85.                                     <li><a href="#0">Logo Design</a></li>  
  86.                                     <li><a href="#0">Branding</a></li>  
  87.                                     <li><a href="#0">Web Design</a></li>  
  88.                                     <li><a href="#0">iOS</a></li>  
  89.                                     <li><a href="#0">Android</a></li>  
  90.                                     <li><a href="#0">HTML/CSS/JS</a></li>  
  91.                                 </ul>  
  92.                             </li>  
  93.                         </ul>  
  94.                     </div>  
  95.                 </li>  
  96.   
  97.                 <li id="contact" class="dropdown button">  
  98.                     <a href="#0" class="label">Contact</a>  
  99.                       
  100.                     <div class="content">     
  101.                         <ul class="links-list">  
  102.                             <li><a href="#0">Link #1</a></li>  
  103.                             <li><a href="#0">Link #2</a></li>  
  104.                             <li><a href="#0">Link #3</a></li>  
  105.                             <li><a href="#0">Link #4</a></li>  
  106.                             <li><a href="#0">Link #5</a></li>  
  107.                             <li><a href="#0">Link #6</a></li>  
  108.                         </ul>  
  109.   
  110.                         <a href="#0" class="btn">Get in Touch</a>  
  111.                     </div>  
  112.                 </li>  
  113.             </ul>  
  114.   
  115.             <div class="bg-layer" aria-hidden="true"></div>  
  116.         </div> <!-- dropdown-list -->  
  117.     </div> <!-- morph-dropdown-wrapper -->  
  118. </header>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_874.html