登录表单下拉（材料设计精简版）

我试图把登录表单放在下拉列表中，但问题是当我点击登录它会打开我一个下拉loginsubmenu（这是很好），当我点击其中一个输入，下拉关闭（可能是因为登录子菜单丢失了它们的可见类，idk）。当我点击同一子菜单内的输入时，如何设置类别在loginsubmenu（我相信这是一个问题）上的可见？登录表单下拉（材料设计精简版）

<!-- LOGIN DROP-DOWN --> 
     <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect submenu" for="loginsubmenu"> 
      <? if (!$_CURRENT_USER->is_anonymous) { ?> 

       <a href="<?php echo $USERS_BASE_URL;?>/users_edit.php?returnto=<?php echo returnto_url_enc();?>"><li class="mdl-menu__item">My profile</li></a> 
       <a href="<? echo $DOGARCHIVE_BASE_URL?>/php_users/htdocs/users.php"><li class="mdl-menu__item">Members</li></a> 
       <a href="<?php echo $USERS_BASE_URL;?>/logoff.php"><li class="mdl-menu__item">Logoff</li></a> 

      <? } else if ($_CURRENT_USER->is_anonymous) { ?> 

       <form action="#" class="login"> 
        <input type="text" name="username" placeholder="Enter your username.."> 
        <input type="password" name="password" placeholder="Enter your password"> 
        <button class="mdl-button mdl-js-button mdl-button--raised submit" type="submit"> 
         Login 
        </button> 
       </form> 



      <? } ?> 
      </ul>

触发源：

<a id="loginsubmenu" class="mdl-navigation__link" href="#">Login<i class="material-icons dd">arrow_drop_down</i>&nbsp;&nbsp;&nbsp;</a>

来源

2016-10-02 belmo

* div,h5,h3,button{ 
    font-family: cursive !important; 
} 
body{ 
    background: #fff; 
} 
.main_content h3{ 
    text-align: center; 
} 
.login-form-div{ 
    width: 500px; 
    background: #fff; 
} 
.form-column{ 
    padding: 20px 35px !important; 
} 
.cell_con{ 
    background: #fff; 
    padding-left: 20px; 
} 
.cell_con div{ 
    width: 87%; 
} 
.links{ 
    margin: auto; 
    text-align: center; 
} 
.btn{ 
    margin:auto; 
    width:100%; 
}

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Material Design Lite Login From</title> 
     <!-- Adding CSS for Alignment --> 
     <link rel="stylesheet" href="css/login-form.css"> 
     <!-- Adding Material Desgin CSS file --> 
     <link rel="stylesheet" href="css/material.min.css"> 
     <link rel="stylesheet" href="css/materialdesignicons.css" media="all" rel="stylesheet" type="text/css"> 
     <!-- Adding Material Desgin JS file --> 
     <script src="js/material.min.js"></script> 
     <!-- Adding Material Icons --> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
     <div class="mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--white-100"> 
      <main class="mdl-layout__content main_content"> 
       <h3><strong>Material Design Lite Login Template</strong></h3> 
       <div class="login-form-div mdl-grid mdl-shadow--2dp"> 
        <div class="mdl-cell mdl-cell--12-col cell_con"> 
         <i class="material-icons">person</i> 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
          <input class="mdl-textfield__input" type="text" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,3}$" id="sample2"> 
          <label class="mdl-textfield__label" for="sample2">Enter valid Email</label> 
          <span class="mdl-textfield__error">Invalid Email...!</span> 
         </div> 
        </div>    
        <div class="mdl-cell mdl-cell--12-col cell_con"> 
         <i class="material-icons">lock</i> 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
          <input class="mdl-textfield__input" type="text" id="sample2"> 
          <label class="mdl-textfield__label" for="sample2">Enter Password</label> 
         </div> 
        </div>    
        <div class="mdl-cell cell_con"> 
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2"> 
          <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input"> 
          <span class="mdl-checkbox__label">Remember Me</span> 
         </label> 
        </div> 
        <div class="mdl-cell mdl-cell--12-col login-btn-con"> 
         <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn">Login</button> 
        </div> 
        <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet links"> 
         <a class="mdl-button--primary">Register now !</a> 
        </div> 
        <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet links"> 
         <a class="mdl-button--primary">Forgot password ?</a> 
        </div>  
       </div> 
      </main> 
     </div> 
    </body> 
    </html>

请检查此链接： - http://www.codershood.info/2016/01/10/login-template-using-material-design-lite-mdl/或https://dcrazed.com/css-html-login-form-templates/

来源

2016-10-02 16:23:33

这不是我要找的形式。我知道如何创建登录页面，我试图将登录表单登录到LOGIN链接的DROPDOWN中。 – belmo

登录表单下拉（材料设计精简版）

回答

相关问题