首页>>导航菜单>>响应式二级菜单的导航加全屏响应式图片滚动(2019-03-26)

响应式二级菜单的导航加全屏响应式图片滚动

响应式二级菜单的导航加全屏响应式图片滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <!-- 导航 -->  
  2. <header class="header">   
  3.     <div class="container clearfix">   
  4.         <div class="fl left">  
  5.             <a href="javascript:void(0)" ><img src="http://www.freejs.net/images/logo.png" alt="" class="img1" /></a>  
  6.             <a href="javascript:void(0)" ><img src="http://www.freejs.net/images/logo.png" alt="" class="img2" /></a>  
  7.         </div>  
  8.         <div class="fr nav">   
  9.             <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">  
  10.                 <li class="active">  
  11.                     <a href="javascript:void(0)">首页</a>                 </li>  
  12.                 <li class="dropdown">  
  13.                     <a href="javascript:void(0)">  
  14.                         业务体系                        </a>  
  15.                     <div class="dropdown_menu">  
  16.                         <a href="#">Custom Menu</a>  
  17.                         <a href="#">Custom Menu</a>  
  18.                         <a href="#">Custom Menu</a>                     </div>  
  19.                 </li>  
  20.                 <li class="dropdown">  
  21.                     <a href="javascript:void(0)">直营园</a>  
  22.                     <div class="dropdown_menu">  
  23.                         <a href="#">Custom Menu</a>  
  24.                         <a href="#">Custom Menu</a>  
  25.                         <a href="#">Custom Menu</a>                     </div>  
  26.                 </li>  
  27.                 <li>  
  28.                     <a href="javascript:void(0)">行知资讯</a>                   </li>  
  29.                 <li>  
  30.                     <a href="javascript:void(0)">关于我们</a>                   </li>  
  31.                 <li>  
  32.                     <a href="javascript:void(0)">联系合作</a>                   </li>  
  33.             </ul>  
  34.         </div>  
  35.         <a href="javascript:void(0)" id="navToggle">  
  36.             <span></span>  
  37.         </a>  
  38.     </div>  
  39. </header>  
  40. <!--移动端的导航-->  
  41. <div class="m_nav">  
  42.     <div class="top clearfix">  
  43.         <img src="images/closed.png" alt="" class="closed" />  
  44.     </div>  
  45.     <div class="logo">  
  46.         <img src="http://www.freejs.net/images/logo.png" alt="" />  
  47.     </div>  
  48.     <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">  
  49.         <li class="active">  
  50.             <a href="javascript:void(0)">首页</a>  
  51.         </li>  
  52.         <li class="dropdown">  
  53.             <a href="javascript:void(0)">  
  54.                 业务体系  
  55.             </a>  
  56.             <div class="dropdown_menu">  
  57.                 <a href="#">Custom Menu</a>  
  58.                 <a href="#">Custom Menu</a>  
  59.                 <a href="#">Custom Menu</a>  
  60.             </div>  
  61.         </li>  
  62.         <li class="dropdown">  
  63.             <a href="javascript:void(0)">直营园</a>  
  64.             <div class="dropdown_menu">  
  65.                 <a href="#">Custom Menu</a>  
  66.                 <a href="#">Custom Menu</a>  
  67.                 <a href="#">Custom Menu</a>  
  68.             </div>  
  69.         </li>  
  70.         <li>  
  71.             <a href="javascript:void(0)">行知资讯</a>  
  72.         </li>  
  73.         <li>  
  74.             <a href="javascript:void(0)">关于我们</a>  
  75.         </li>  
  76.         <li>  
  77.             <a href="javascript:void(0)">联系合作</a>  
  78.         </li>  
  79.     </ul>  
  80. </div>  

 


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