ボタンクリック：隠しリスト

Material Design Liteに問題があります。私は自分の記事に「共有」ボタンを追加しようとしています。ボタンクリック：隠しリスト

クリックすると、facebook、twitterのようなアイコンが表示されます。バックグラウンドはありません。私のコードを試してみたら、それは動いています。

私の唯一の問題は、共有ボタンをクリックするたびに表示される白い四角です。それは私のアイコンを隠す。どのようにそれを削除するには？どこ？

ありがとうございました。

.mdl-menu-share{position:absolute;list-style:none;top:0;left:0;height:auto;width:auto;padding:8px 0;opacity:1;z-index:-1;} 
 
.mdl-menu-share .mdl-menu-share--bottom-right{left:auto;right:0}

<!doctype html> 
 

 
<html lang="en"> 
 
    <head> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
    <body> 
 
    <div class="blog mdl-layout mdl-js-layout has-drawer is-upgraded"> 
 
     <main class="mdl-layout__content"> <!-- body --> 
 
     <div class="blog__posts mdl-grid"> 
 
      <div class="mdl-card Article--1 mdl-cell mdl-cell--8-col"> <!-- Article #1 -->   
 
      <div class="mdl-card__media mdl-color-text--grey-800"> <!-- Article #1 Backgroud -->    
 
      </div>    
 
      <div class="mdl-color-text--light-blue-700 mdl-card__title">   
 
      TITLE   
 
      </div>    
 
      <div class="mdl-color-text--grey-600 mdl-card__supporting-text"> 
 
      Say something about the article    
 
      </div>    
 
      <div class="mdl-card__menu">    
 
       <button id="share1" class="mdl-button mdl-js-button mdl-button--icon">    
 
       <i class="material-icons mdl-color-text--red-400">share</i>   
 
       </button> 
 
       <ul class="mdl-menu-share mdl-menu-share--bottom-right mdl-js-menu" for="share1"> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">folder</i></li>    
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">alarm</i></li> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">visibility</i></li> 
 
        <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">error</i></li>    
 
       </ul>   
 
      </div>   
 
      </div>   
 
      <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
</body> 
 
</html>

出典

2017-03-19 SimonGdO

あなたはこれを行うことができます。

.mdl-menu-share { 
 
    position: absolute; 
 
    list-style: none; 
 
    top: 0; 
 
    left: 0; 
 
    height: auto; 
 
    width: auto; 
 
    padding: 8px 0; 
 
    opacity: 1; 
 
    z-index: -1; 
 
} 
 

 
.mdl-menu-share .mdl-menu-share--bottom-right { 
 
    left: auto; 
 
    right: 0 
 
} 
 

 
.mdl-menu__container.is-visible .mdl-menu__outline { 
 
    display: none; 
 
}

<!doctype html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 
    <div class="blog mdl-layout mdl-js-layout has-drawer is-upgraded"> 
 
    <main class="mdl-layout__content"> 
 
     <!-- body --> 
 
     <div class="blog__posts mdl-grid"> 
 
     <div class="mdl-card Article--1 mdl-cell mdl-cell--8-col"> 
 
      <!-- Article #1 --> 
 
      <div class="mdl-card__media mdl-color-text--grey-800"> 
 
      <!-- Article #1 Backgroud --> 
 
      </div> 
 
      <div class="mdl-color-text--light-blue-700 mdl-card__title"> 
 
      TITLE 
 
      </div> 
 
      <div class="mdl-color-text--grey-600 mdl-card__supporting-text"> 
 
      Say something about the article 
 
      </div> 
 
      <div class="mdl-card__menu"> 
 
      <button id="share1" class="mdl-button mdl-js-button mdl-button--icon">    
 
       <i class="material-icons mdl-color-text--red-400">share</i>   
 
       </button> 
 
      <ul class="mdl-menu-share mdl-menu-share--bottom-right mdl-js-menu" for="share1"> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">folder</i></li> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">alarm</i></li> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">visibility</i></li> 
 
       <li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">error</i></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
</body> 
 

 
</html>

出典

2017-03-19 12:41:59 sol

は完璧に仕事します！どうもありがとうございます！ – SimonGdO

うれしかったよ:) – sol

ボタンクリック：隠しリスト

答えて

関連する問題