mdl-materialdesignlite-drawer菜单不起作用?

时间:2017-03-13 06:40:32

标签: android html css material-design-lite drawer

 <div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-    
 ripple-effect mdl-color--primary-dark ">          
  <a href="#Aboutus" class="mdl-layout__tab is-active">Aboutus</a>
  <a href="#Technology" class="mdl-layout__tab">Technology</a>
  <a href="#Outsource" class="mdl-layout__tab">Outsourcing</a>
   <a href="#Training" class="mdl-layout__tab">Training</a>
   <a href="#Techblog" class="mdl-layout__tab">Techblog</a>
  <a href="#Careers" class="mdl-layout__tab">Careers</a>
  <a href="#Contactus" class="mdl-layout__tab">Contactus</a>
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-
    ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--  
    accent" id="add"> 
   <i class="material-icons" role="presentation">add</i>
    <span class="visuallyhidden">Add</span>
   </button>
   </div>        
   </header>
  <div class="mdl-layout__drawer">
   <span class="mdl-layout-title">MaterialDesignLite</span>
   <nav class="mdl-navigation">
   <a href="#Aboutus" class="mdl-navigation__link">Overview</a>
  <a href="#Training" class="mdl-navigation__link">Features</a>
  <a href="#features" class="mdl-navigation__link">Details</a>
  <a href="#features" class="mdl-navigation__link">Technology</a>
  <a href="#features" class="mdl-navigation__link">FAQ</a>
  </nav>
 </div>

问题:mdl-layout__tab-bar选项卡与section id同步(例如:#Aboutus,#Technology), 其中mdl-drawer需要为每个内容单独的.html文件,它不使用section id(例如:#Aboutus,#Technology),是实现它的任何可能方法,而是创建单独的html文件。     感谢

1 个答案:

答案 0 :(得分:0)

<div class="mdl-layout__tab-panelmdl-layout__drawer" id="Techblog">
<section>
<div>
<div>
<div class="techblogimage">
<img class="article-image" src="images/techblog/3.png" border="0" alt="">
</div> 
</div>
</div>
</section>     
</div>

最后我得到了一个解决方案.. 在sectionblock中添加mdl-layout__drawer 这将有助于他们中的一些人陷入困境......