2

好的，你看我已经能够在 Twitter Bootstrap 中成功创建一个下拉登录表单。在 Bootstrap 中它要简单得多，但这个框架并不那么容易工作。这就是我想要实现的目标：https ://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png 。这是我当前的代码：（我删掉了一些部分）

    <nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">ChatAar</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
    <a href="#" class="alert button" data-dropdown="hover1" data-options="is_hover:false">Login</a>
    <ul id="hover1" class="f-dropdown" data-dropdown-content>
    <!-- Login form here -->
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
            <div class="red"><?php echo $Login; ?></div>
                <p>Username:</p>
                <input name="user" type="text" class="field" id="user"/> 
                <p>Password:</p>
                <input name="pass" type="password" class="field" id="pass" value="" />
                    <br />
                <label style="text-color:white;">Remember Me For 30 Day's</lable>
                <input name="remember" type="checkbox" value="true" />
                <input name="page" type="hidden" value="<? echo $_GET['page']; ?>" />
                <input name="submit" type="submit" class="button" value="Log In" />
                    <br />
                <a href="forgotpassword.php">Password Recovery</a> | <a href="register.php">Sign Up</a>
             </div>
        </form>
    </ul>
    </ul>
  </section>
</nav>

这就是我得到的： http ://webymaster.hj.cx/public.php?service=files&t=cdf517da96a2ad178045198169958afb 。我已经尝试过正常的下拉菜单，但它不起作用（抱歉没有图片）然后我想出了这个，但它不是最好的。请帮忙谢谢！

4

2 回答 2

9

使用Foundation 5，这将使您接近：

<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#" data-dropdown="signin">Sign In</a></li>
    </ul>
  </section>
</nav>
<div id="signin" class="f-dropdown small content" data-dropdown-content>
  <!-- signin form here -->
</div>

请注意，登录表单需要位于之外，top-bar否则它将具有严重损坏的样式。

有关如何自定义它的完整参考、示例和想法，请查看 Zurb 关于下拉列表和表单的精彩文档。

于 2013-12-12T01:04:53.030 回答
3

扩展chadoh的优秀答案，适合任何正在寻找简单并准备就绪的人：

<div id="login-dropdown" class="f-dropdown small content" data-dropdown-content="true">
    <h5>Log In:</h5>
    <form id="top-nav-login" action="login.xqy" method="post">
        <div class="row">
            <label>Email Address</label>
            <input type="email" name="email" placeholder="email@example.com" tabindex="1"/>
        </div>
        <div class="row">
            <label>Password</label>
            <input type="password" name="email" placeholder="********" tabindex="2"/>
        </div>
        <div class="row">
            <input type="submit" class="button tiny success" value="Login" tabindex="3"/>
        </div>
    </form>
</div>

这只是标记的下拉部分。您仍然需要chadoh的回答中的顶栏和数据下拉元素。显然根据需要添加您自己的表单元素。

于 2014-01-09T17:56:17.363 回答