Login Formular in Dropdown (Material Design lite)

Ich versuche Login-Formular in Dropdown, aber das Problem ist, wenn ich auf Login klicken öffnet sich mir ein Dropdown loginsubmenu (was gut ist) und wenn ich auf einen der klicken Eingänge, Dropdown wird geschlossen (wahrscheinlich, weil Login-Untermenü ihre Is-Visible-Klasse, IDK verliert). Wie kann ich die Klasse is-visible auf loginsubmenu setzen (ich glaube, das ist ein Problem), wenn ich auf Eingaben innerhalb desselben Untermenüs klicke?Login Formular in Dropdown (Material Design lite)

<!-- 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>

Ausgelöst durch:

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

Quelle

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>

Bitte diesen Link: - http://www.codershood.info/2016/01/10/login-template-using-material-design-lite-mdl/ oder https://dcrazed.com/css-html-login-form-templates/

Quelle

2016-10-02 16:23:33

Es ist nicht das, was ich suche Form . Ich weiß, wie man Login-Seite erstellt, ich versuche, Login-Formular in DROPDOWN von LOGIN-Link zu PUT. – belmo

Login Formular in Dropdown (Material Design lite)

Antwort

Verwandte Themen