登录表单下拉(材料设计生活)

我试图把登录表单下拉，但问题是，当我点击登录它打开我一个下拉loginsubmenu(这是好的)，当我点击其中一个输入，下拉得到关闭(可能是因为登录子菜单失去了他们的is-visible类，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>

  * 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._%+-]+@[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/

相关内容

最新更新

热门标签：